Could i use <a> in <ul> around <li>

Question

Ive 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 perfectly fine in all major browsers, but it isn't allowed/invalid HTML and the right way should be this:

<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 it like the second example only the text not the whole <li> is clickable like i want it to.
Should I stay with the invalid working version or has anyone a better solution?

Answer 1

Use CSS to make the link take up the entire list item, eg. display: block (and any other styling you might want).

Wrapping links around list items is invalid HTML.

Answer 2

Short answer is NO, it won't be validated, only li can be inside ul and ol elements.

So this is incorrect

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

This is fine

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