12

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?

Improve this question
1
  • Example with JQuery. Commented Apr 25, 2013 at 9:48

5 Answers 5

Reset to default
15

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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>
Improve this answer

Comments

2

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

Improve this answer

Comments

0

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.

Improve this answer

2 Comments

Not true. a is an inline element by default and will have only the width of its children.
<li>s also have inline behavior (although they're inline-blocks), so they'll take up the space of the <a>
0

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;
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.