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 How to Make a Website Creating HTML Content Use the Navigation Element

Cynthia Gomez
Cynthia Gomez
689 Points
Posted by Cynthia Gomez
Cynthia Gomez
689 Points

Why put <a href> after <li> element?

Hello,

I don't understand why <a href> was put after the <li> element if we put <a href> before <h1> under the <header> element? Is there a reason for this?

Kennedy Chimwanda
Kennedy Chimwanda
10,237 Points

The href attribute specifies the URL of the page the link goes to. If the href attribute is not present, the a tag is not a hyperlink. In the context of your question, you are linking each li i.e link to a URL

Hope this makes sense...

Next time, its a good practice to show code with your question.

2 Answers

ivanwebster
ivanwebster
7,048 Points
ivanwebster
ivanwebster
7,048 Points

Hello, the only real benefit with having this code 

<li><a href="#">LINK</a></li>

vs this code

<a href="#"><li>LINK</li></a>

... is the conviniencs for styling the a tags. See the text is inside the a tag, there fore you can desend to the a tag like so li a {porperty: value;}. And this way li element is a list item not a link text wrapper. . In other case you are using li tag as not a list item, but rather something else, just a good practice.

Cynthia Gomez
Cynthia Gomez
689 Points
Cynthia Gomez
Cynthia Gomez
689 Points

This is helpful. Thank you all for answering and the tips!

Justin Iezzi
Justin Iezzi
18,199 Points
Justin Iezzi
Justin Iezzi
18,199 Points

Hi Cynthia,

If I understand your question correctly, you're asking why do this - 

<li><href a="index.html">Portfolio</a></li>

When other lines are written as -

<li>
    <href a="index.html">Portfolio</a>
</li>

We could even go further and do this -

<li>
    <href a="index.html">
        Portfolio
    </a>
</li>

The truth is that they all work. The answer to your question is more of an opinion, different companies will have different rules for their own code. I believe the first example is nicer and easier to read. I follow the rule that actual content within tags shouldn't be chopped up with newlines unless readability is an issue.