What Are the Allowed Tags Inside a ≪Li≫

What are the allowed tags inside a li ?

TL;DR: an <li> can contain any element that is valid in <body>.

In the HTML 4.01 spec for lists you’ll find the relevant extract of the DTD:

<!ELEMENT LI - O (%flow;)* -- list item -->

This specifies that an <li> may contain flow content, which is the collection of all block and inline elements.

The HTML5 spec for an <li> is the same in that it also allows any flow content.

Can we use any other TAG inside ul along with li ?

For your code to be valid you can't put any tag inside a <ul> other than an <li>.

You can however, put any block level element inside the <li>, like so:

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>

a tag around li tag

the first one is wrong, as only <li> is to be a child of a list. the second is correct.

by what i understand, you want the whole list item to be "clickable". putting everything in <a> is also viable - block AND inline elements. this is perfectly valid in HTML5. won't validate in older HTML though. however, it does act correctly, given that <a> is given the style of display:block

A clickable <li> using an <a> tag - no JS to be used. Is it legal HTML?

Is div inside list allowed?

Yes it is valid according to xhtml1-strict.dtd. The following XHTML passes the validation:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
</head>
<body>
<ul>
  <li><div>test</div></li>
</ul>
</body>
</html>

nesting other html tags inside ul except li

According to the spec, the ul element is:

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.
The items of the list are the li element child nodes of the ul element.

So the children of the UL element must be li elements.

More specifically, it says under the ul tag:

Content model:

   Zero or more li elements.

It is however, perfectly legal to do:

<ul class="site-title left">
   <li><span><h1>site-title</h1></span></li>
</ul>

How can I get the a tag inside a li using selenium

You want href attribute but trying r.text which return the Text of the Element.

Use get_attribute() to get the href of all a tags.

And try Relative xpath like below. (As per the screen shot)

//ul[@class='box-listing']/li/a

options = driver.find_elements_by_xpath("//ul[@class='box-listing']/li/a") # Xpath to find all the `a` tags.
for option in options:
    print(option.get_attribute("href"))

Styling the a tags inside ul li

Use the following CSS selector, to refer to the <a>

.menuitems li a:hover

For adding space after the lines you can use margins.

.menuitems li {
margin-bottom: 5px;
}

See for reference : CSS Selectors

.menuitems {  font-size: 20px;  font-family: 'Roboto';  color: #337AB7;  position: relative;  display: block;  width: 180px;}
.menuitems li a:hover {  background-color: yellow;}
.menuitems li {  margin-bottom: 5px;}

<ul class="menuitems">  <li md-ink-ripple>    <a ui-sref="book">New Booking</a>  </li>  <li md-ink-ripple>    <a ui-sref="admin.home">Admin</a>  </li>  <li md-ink-ripple>    <a ui-sref="admin_logout">Logout</a>  </li></ul>

What Are the Allowed Tags Inside a ≪Li≫