CODEWITHSUNDEEP
htmlvalidation
Vloxxity
Vloxxity

Reputation: 980

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

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?

Upvotes: 12

Views: 8735

Answers (5)

Oliboy50
Oliboy50

Reputation: 2731

You have to use the valid way.

And set the "a" tag with :

display: block

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

And if you don't want to show the points at the beggining of the list elements.

You'll have to use : 

list-style: none;

Upvotes: 0

A.T.
A.T.

Reputation: 26382

Anchor tag is inline element so make it block using display:'block' so that it will take full width of its parent i.e. li tag

Upvotes: 2

PhonicUK
PhonicUK

Reputation: 13874

The second way around is the correct way to do it, you just have some minor styling issues.

If you set the <li>'s to have no padding and the <a>'s to have no margin, the links will fill the entire area of the list item.

Upvotes: 0

sevenseacat
sevenseacat

Reputation: 25049

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.

Upvotes: 15

Mr. Alien
Mr. Alien

Reputation: 157424

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>

Upvotes: 2

Related Questions