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 Bilal Junaidy
Bilal Junaidy
1,775 Points

The use of Nav element

I am currently doung the web design track and I am currently in the first stage of this track called "how to make a website" which itself has 10 different achievement. Now I am currently at the achievement called "Creating HTML content". Now in this this achievement they talk about using the navigation element along with lists. could someone please answer the following question One thing I am not able to understand is why are we using the nav element to create the gallery and the navigation bar? I mean wouldnt it be the same thing if we were to make an unordered list without using the nav element?

Jeff Busch
Jeff Busch
19,287 Points

Hi Bilal,

Like Lukasz said, it is a semantic tag that communicates to software designed for people that can't see well, that the items enclosed are for navigation purposes, like links.

Jeff

4 Answers

Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Just think of it as a div that holds your navigation elements. It's simply there to make your markup more semantic and structured. I tend to use it, but It is not mandatory in any way.

You can just as easily use:

<div id="nav">

or 

<div id="spaghettification">

or whatever you like.

simondavidson
simondavidson
4,428 Points
simondavidson
simondavidson
4,428 Points

I am doing the same course right now, I think there may be a mixup., They use the nav element for the site navigation and use the section element for the gallery, mines shows it that way on the course. but basically as Lukasz has said there just div elements really.

Gildo Santana
Gildo Santana
3,184 Points
Gildo Santana
Gildo Santana
3,184 Points

In a word: yes! They could achieve the same result without the nav element. But I believe they made this choice to use the built-in semantics of the <nav> tag. Remember: HTML is for structure and CSS is for presentation. Speaking of CSS, it will be very useful to style the navigation bar itself. I mean, they could use

<div id="navbar">
   <ul>
   ...
   </ul>
</div>

but why would they want to do that if the <nav> element already exists?

Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

Hi Bilal,

The HTML 5 specification defines <nav> as:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element.

Note: In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

In the video listed he uses the section element for the image gallery and then applies the li for the gallery. Semantically this is correct.