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

Hey! I thought I'd start from the beginning here and my first question is why you use structure tags over div tags?

Structure vs Div?

3 Answers

Kevin Korte
Kevin Korte
28,148 Points

I assume you are referring to using the nav, ul, and li tags to build the navigation instead of using just <div>.

The answer is pretty easy. We always want to use the most descriptive tag we can. Divs are meaningless, they are block level elements that have no meaning other than they are a block of content. They are a division of content.

Now, when you think about what a navigation is, it is in it's prime, a list of navigation links, so it would make sense to structure our navigation as a list of navigation links. Semantically, this is far more descriptive about what we are trying trying to accomplish with our structure.

The other thing to consider is how your markup, or HTML looks without CSS. In rare cases, the CSS might not load, so in that case we would want our HTML to be as semantically correct as possible. In the case of navigation links without CSS, which would be easier for the user to understand the hierarchy and layout your navigation...would it be all your links inside of a block level div, or would it be all your links listed in a bullet list, still retaining their informational hierarchy without the CSS. Clearly the list of links would be easier

We want to be as semantic as possible, and fail as gracefully as possible, and navigation as an unordered list does that best.

James Home
James Home
12,011 Points

Is this what you mean?

<header>
 content
</header>

over

<div class="header">
 content
</div>

''' <nav> <ul> <li><a href="index.html">Porfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <section> <ul> <li> <img src="img/numbers-01.jpg" alt=""> </li> </ul> </section> '''

Just for holding content after the header tags, my current knowledge is peiced together from youtube videos and old reference books and I havn't used the <section> tags before