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
Abdul Latheef Mohamed
3,091 PointsPlacement of Anchor Tags
In the attached code snippet, you can see that h1 and h2 elements are nested inside the anchor tag.
However, for the lists inside the nav element, the anchor tags are nested inside the li elements.
What's the right way to go about this? Is it okay to place anchor tags as you see fit? If not, what difference does it make?
What are the rules, if any, regarding placement of anchor tags?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit</title>
</head>
<body>
<header>
<a href="index.html">
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<section></section>
<footer>
<p>© 2013 Nick Pettit.</p>
</footer>
</body>
</html>
2 Answers
Jason Anders
Treehouse Moderator 145,860 PointsHey Abdul,
It kind of depends on what you are linking to and what you want to be able to be clicked to reach that link. In the sample you gave. The h1 and h2 are two very separate elements on the page, but both can be clicked on to reach the same link. Even though they are on two different lines (and can be styled and formatted differently), they are part of the same link.
In the second list, the li elements are the only thing that leads to a single link location. You can't click on "about" to get to index, and vise-versa.
I find that if you want multiple elements to link to a single location, it's easiest to nest the items in the 'a' tag.
On the other hand, if there is only a single element to a single location, link the 'a' tag in the primary element tag.
For example, if only the 'h1' is meant to have the link and NOT the 'h2', I would nest the 'a' inside the 'h1'.
I hope that makes sense and helps some. :) Jason
Abdul Latheef Mohamed
3,091 PointsHi Ryan Field ,
Much Thanks. Where do I find more info on semantic rules?
Abdul Latheef Mohamed
3,091 PointsAbdul Latheef Mohamed
3,091 PointsHi Jason,
Thanks for the clarification; however, I still have the following concern:
Please note the code snippet below:
<li><a href="index.html">Portfolio</a></li>What difference does it make to have it as follows:
<a href="index.html"><li>Portfolio</li></a>If there isn't any difference, what's the right way to go about it? Are there any syntax rules governing the placement of anchor tags in scenarios such as this?
Ryan Field
Courses Plus Student 21,242 PointsRyan Field
Courses Plus Student 21,242 PointsHi Abdul.
In lists, you must put the anchor tags inside the
<li>elements to have proper semantic markup. In fact, nothing should go outside of<li>tags. It will technically work if you do it the other way, but it trying to validate it will throw errors.