Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Josef Coban
Josef Coban
7,260 Points

setting link to <li> elements

I'm trying to make an <li> element into a link so that I can click anywhere on the element and the whole area is clickable. What I had written originally was <a href ...etc><li>....</li></a> the link worked perfectly but when I had run it on the WC3 validator it showed up as a an error. The error read "Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)". How could I do this without getting the error ? Or should I just ignore the error :S thanks in advance!

6 Answers

Guled A.
Guled A.
10,605 Points
Guled A.
Guled A.
10,605 Points

Is this how you were setting the links? 

<ul>
<a href="#"><li>Something here</li></a>
<a href="#"><li>Something here</li></a>
<a href="#"><li>Something here</li></a>
<a href="#"><li>Something here</li></a>
</ul>
Mohammed Hossen
Mohammed Hossen
5,591 Points
Mohammed Hossen
Mohammed Hossen
5,591 Points

You just need to put the link <a> element inside the list <li> element

Mohammed Hossen
Mohammed Hossen
5,591 Points

<li><a href="#">Something here</a></li>

Araik Gingnagel
Araik Gingnagel
3,303 Points
Araik Gingnagel
Araik Gingnagel
3,303 Points

So it has to be like this:

            <ul>

<li><a href="#">Something here</a></li>

</ul>
            ```
Dennis Skoko
Dennis Skoko
12,860 Points
Dennis Skoko
Dennis Skoko
12,860 Points

Is it this your are looking for? http://codepen.io/anon/pen/xEAeK I just pretty much added some padding on the <a> tags

Dave Levine
Dave Levine
1,474 Points
Dave Levine
Dave Levine
1,474 Points

Araiks answer is correct but it's also important to know why. It's because an a tag is an inline element and li is a block element. It is best practice to wrap inline elements with block elements.

Josef Coban
Josef Coban
7,260 Points
Josef Coban
Josef Coban
7,260 Points

Thanks everyone! The a:focus with the padding is what I was looking for, thanks Dennis.