Is it sound to wrap a list item in an anchor?

Question

I have a group of images which each have their own links. I want the images to be in a list (<ul><li> .. etc) and have each item have a different background-image.

Would I run into any issues with something like this?

<ul>
<a href="#"><li class="1"></li></a>
<a href="#"><li class="2"></li></a>
<a href="#"><li class="3"></li></a>
<a href="#"><li class="4"></li></a>
<a href="#"><li class="5"></li></a>
<a href="#"><li class="6"></li></a>
</ul>

Answer 1

You would do better to write it like this

<ul>
<li class="1"><a href="#"></a></li>
<li class="2"><a href="#"></a></li>
<li class="3"><a href="#"></a></li>
</ul>

Then you could add the background-image to either the a or the li.

However, you would style the as as display:block and give them the same height and width of the li. That way the background-image would show and the entire li would be clickable.

Answer 2

It is not valid HTML because the only thing allowed in an <ul> element is <li>s.

Answer 3

It's not valid HTML.

<!ELEMENT UL - - (LI)+                 -- unordered list -->