CODEWITHSUNDEEP
htmlbackground-imagelistitem
tonyhh
tonyhh

Reputation: 63

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

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>

Upvotes: 6

Views: 10102

Answers (3)

Jason Gennaro
Jason Gennaro

Reputation: 34855

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.

Upvotes: 15

hmakholm left over Monica
hmakholm left over Monica

Reputation: 23332

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

Upvotes: 6

Pekka
Pekka

Reputation: 449395

It's not valid HTML.

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

Upvotes: 3

Related Questions