Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The next element I want to introduce you to is the nav element. Now, as the name suggests, the nav element allows you to group and identify site navigation. Let's go to the spec and take a closer look at it. Now again, remember, we are looking at the HTML5 specification, the author view that the W3C provides us, and from here on out, instead of finding the table of contents, I am just going to jump directly to that section. So, table of contents is pretty easy to find your way around. Just go ahead and keep spec open throughout this title and just search through and find the nav element.
So here we are in the Sections area looking at the nav element. Again, Category content, it's both Flow and Sectioning content, so go ahead and file that away for a little bit later when we talk about the difference between the different content models. Notice that it expects Flow content inside of it, but there are no real limitations here. All right, so let's take a look at the description. So the nav element represents a section of a page that links to other pages or to parts within the page, a section with navigational links essentially. There are really important notes that follow this; you would definitely want to read these. So notice the first note here that says, "Not all groups of links on a page need to be in a nav element." So let's take a look at some of the criteria for when you should consider putting something inside of a nav element.
Notice that it says it's primarily intended for sections that consist of major navigational blocks. Here's something interesting. In particular, it's common for footers --footer elements, which we're going to cover a little bit later--to have a short list of links to various pages for a site. And it says, a lot of times the footer element alone is sufficient for such cases. So, that's kind of interesting. So, essentially it's telling us major navigation blocks, maybe if you've got some links in the footers, maybe yes maybe no, but now the second note adds even more clarity to it. I am going to scroll down a little bit, so we can see this one. "User agents (such as screen readers) that are targeted at users who can benefit from navigational information being omitted in initial rendering," so skipping a nav, if you will, "or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and or provide on request." Now those two things, when you put them together, really gives you a criteria for using the nav element or not.
So, is it a major navigation block? If assistive technologies, such as a screen reader, were accessing your page, would you want those links presented as a major navigational unit for something to either skip over or to be accessed right away? If the answers to those were yes, then the nav element is probably appropriate. But if it's not something that you'd want to experienced right away or that you would want presented as separate element, the nav element is probably not appropriate. Now again, let's take a look at some of the examples I have used here. Here we have some markup where we have a whole list of links here, going to news, blogs, and forums, but that's not considered in this case a major navigational block.
If you look just underneath that where the navigation is being identified, that's linking to all of the articles and what's going on today, success stories--that is encased in the nav. So really, this example crystallizes, more than anything else, that the use of the nav element is a judgment call. It is up to you as the web author to determine whether those list of links, those blocks of links, fall under the category of being a major list of navigational items. I also want to point out that the nav element can contain more than just links. Notice here, for example, there's an h1 tag inside of an unordered list.
You've got your list of links, and it could even wrap things like paragraphs. So if I scroll down a little bit further to one of these sort of the bottom examples, you can see the nav element here. It's containing a lot of things. Here is the heading1 tag, paragraphs, a whole section of content here being encased here within the nav element. So now that we know a little bit more about the nav element, let's switch back to our page and put it to use. So what we are looking at here is the html5.htm document open up from 02_04 folder, and really it's just an extension of what we were doing in the previous exercise.
Again, if I look through my links on the page, I really have only one big block of links. So I do have some links down here on the bottom for monthly specials, and these are linking to different packages that we are trying to promote to people. But if we think about that, that's not really a list of major navigation site navigation, so that probably doesn't meet the criteria. However, if I go up here where I have a div whose id is actually navigation--and this is my main site navigation-- this one certainly fits that criteria. So I am just going to replace the existing div tag with the nav element, and again, don't forget to do the closing tag.
So I am going to covert both the opening div tag and the closing div tag, two nav tags, and save the file. Like most of the new structural elements that we are going to learn, many times the trick to the nav element is going to be knowing when to use it. Just remember what the spec suggests, that it's for sections that consist of major navigational blocks, for sites, or blocks of navigation within the current page. Now I like to look at it this way. If I would want a user agent, especially assistive technology, to identify these links, so it could hide them, skip them, or highlight them, to facilitate reading a navigation, well, then a nav element is probably appropriate.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105289 Viewers
56 Video lessons · 117045 Viewers
71 Video lessons · 86241 Viewers
131 Video lessons · 41225 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.