Can wrapping a div or an anchor tag around a <LI> still be considered valid html structure

Question

I have also noticed a website I've been working with has a <ul> structure list written incorrectly. I believe this code does not conform to normal HTML Standards.

Currently the code is written in such a fashion.

<ul>

<a href="#"><li>message 1</li></a>

<a href="#"><li>message 2</li></a>

<a href="#"><li>message 3</li></a>

</ul>

Surely the correct HTML format should be

<ul>

<li><a href="#">message 1</a></li>

<li><a href="#">message 2</a></li>

<li><a href="#">message 3</a></li>

</ul> 

My Question is.. if you wrap a div or an anchor tag around a

<li>

does this still make the html valid?

The reason why I'm guessing it was coded in such a fashion was to make the li clickable.

What is the correct standard for the <ul> list, can it be written in different ways?

Answer 1

No, it is not valid, though it often works.

Yes, the reason most people do like this is to make it clickable.

There is many ways to make any element besides an anchor clickable, where wrapping an anchor around it is the most used.

This is valid for all non block level elements, but will likely work on all element level types because of event bubbling.

For block level elements (can also be used on inline elements), one can do like this, to make the whole element clickable

HTML

<div class="clickable"><a href='....'></a></div>

CSS

.clickable a {
  display: inline-block; height: 100%; width: 100%;   /*  fill the parent  */
}

---

An alternative when one just can't use an anchor and still need it clickable, would be by using a click handler, like this, using jQuery.

$( "li" ).click(function() {
  // Do something here on click
});