Can I use <a> in <ul> around <li>

Question

I got the following code:

<ul> <a href="./index.php?profile=User1"> <li>User1 : 16</li> </a> <a href="./index.php?profile=User2"> <li>User2 : 4</li> </a> </ul> 

This works great in all major browsers, but this is not allowed / invalid HTML, and the correct path should be as follows:

 <ul> <li> <a href="./index.php?profile=User1">User1 : 16</a> </li> <li> <a href="./index.php?profile=User2">User2 : 4</a> </li> </ul> 

But if I do this, as in the second example, only the text is clickable, and not the entire <li> as I want.
Should I stay with an invalid working version, or does anyone have a better solution?

Answer 1

Use CSS to make the link occupy the entire list item, for example. display: block (and any other style you might want).

Wrapping links around list items is invalid HTML.

Answer 2

The short answer is NO , it will not be checked, only li can be inside the elements ul and ol .

So this is wrong

 <ul> <a><li></li></a> </ul> 

This is normal

 <ul> <li><a></a></li> </ul> 

Answer 3

An anchor tag is an inline element, so block it with display: 'block' so that it gets the full width of its parent li.e tag. li

Answer 4

The second way is the right way to do this, you have some minor design issues.

If you set the <li> parameter to be indented and <a> to have no field, the links will fill the entire area of ​​the list item.

Answer 5

You must use a valid path.

And set the tag "a":

 display: block 

http://jsfiddle.net/TYVV6/1/

And if you do not want to show dots at the beginning of the list items.

You will need to use:

 list-style: none;