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

CSS CSS Layout Techniques Display Modes Inline-Block Formatting

Posted by Miguel Velasco
Miguel Velasco
5,898 Points

Is a better practice to let anchors inside other elements?

I'm watching the actual code of, for example, the li elements:

<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>

Is not easier to put the anchors outside the li elements in order to make the whole object clickleable without adding paddings to our layout?

<a href="#"><li>Link 1</li></a>
<a href="#"><li>Link 2</li></a>

This works but maybe is a better practice let the anchors inside?

thanks for clarifying.

3 Answers

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Miguel. In this case, anchor elements should never go outside list items. Your code will work, but to be properly validated, nothing should ever be outside li items inside a ul. For other elements, such as headlines, divs, and whatnot, it is perfectly okay to surround other elements with anchor tags, though.

Miguel Velasco
Miguel Velasco
5,898 Points
Miguel Velasco
Miguel Velasco
5,898 Points

Oh, ok, thanks for answering :)

Eric Buchmann
Eric Buchmann
15,080 Points
Eric Buchmann
Eric Buchmann
15,080 Points

For your example it wouldn't be correct to wrap an li tag in an anchor tag. It's because your unordered list tag expects only li tags to be inside of it. But, that isn't to say you couldn't do something else like

<ul>
 <li>
   <a href="#">
    <div>
     <span>something</span>
     <strong>bold</strong>
    </div>  
   </a>
 </li>
</ul>

and so on. It still works to do some things incorrect in HTML, but it's usually not recommended to do so.