It's time to start taking a more in-depth of some of
the structural elements that are in HTML5.
I want to start by taking a look at the nav element.
Now that's one of the section elements that are brand new, introduced in HTML5,
and I first want to examine what the specification says about it and
then we'll go and explore how to use it in our sites.
Now to view the specification I'm at w3.org and
this gives us a table of contents if you scroll down enough and
honestly you can just sort of scroll through this and you'll begin to
see individual attributes or elements in red, and what I'm looking for is,
I'm going to scroll down to this area for sections, creating sections of content,
and I'm going to look for things like the nav element.
And when I click on that, it'll take me right to it.
Now, I know this specification is not the easiest thing in the world to read,
especially if you're not used to looking at them,
like I am, but essentially we get a breakdown of the element here.
Now, categories, content model, things like that, tells us where we can put this,
the type of things that we can nest inside of it, whether it needs an opening and
closing tag, what attributes are available for
it, what ARIA roles ought to be applied to it, things like that.
What I'm more interested in, however, is the semantic usage of the element.
And if I scroll down I can see that it has a description of the element and
then some notes.
Let's take a look at what those say.
So, the description said that the nav element represents a section of a page
that links to other pages or parts within the page, a section with navigation links.
So the emphasis here to me seems to be on a group of links that navigate to pages or
parts within a page, and typically it applies within a site.
Now the three notes there.
First node says, in a case where the content of a nav element represents a list
of items, use list markup to aid understanding and navigation.
That essentially means that it's a little bit more helpful if you have multiple
links within a nav to arrange them with in a list, which is nice to know.
It's also mentions in the next note that not all group of links on a page need to
be in a nav element.
This is a fairly significant element because it is a sectioning element,
meaning every time that it's used within the document outline,
a new section is created.
So, this element's primarily intended for
sections that consist of major navigation blocks.
And it actually mentions the fact that in the footer of a page you might have
a link to the copyright page.
You don't need navs for those.
So you only use them for major navigation blocks within the site.
The next note just talks about how user agents can use them to
navigate to those specific areas.
And that's one of the Symantec usages that we need to think about.
If a screen reader encounters a page with a nav element, it can tell the user,
hey, there is a navigation element and it can either skip over that if it
wants to go directly to the content or it can go directly to it.
So its sort of of beacon, if you will, to devices.
With that in mind, what I'd like you to do is go and open up the structure.htm file.
Which can be found in the 04_03 directory.
Now I'm going to preview this in the browser and
I can kind of see what we're going to be working with here.
It's the structuring pages reference that we're building in our
challenges from the HTML essentials training reference site.
So here we can see that this page has a little bit of navigation up top.
So you have a list of links here that navigate to different pages within
the site.
And if we scroll down, I can see that there are individual links.
There's another list of inks down here and
what these links are going to do is they're going to link external to
the site to those specific elements inside the HTML file specifications.
It's sort of a quick jump if you want to learn a little bit more about the elements
that we're going to be using.
If I scroll down, I can see that we have a few more links just sort of
scattered throughout the content, and
then we have some links down here in this sort of bottom section.
So knowing what we have already learned about the nav element,
which of these section or
sections do you think makes the most sense to actually use the nav element?
You'll probably immediately say the top section since this has the navigation for
our site, and you'd be 100% right.
Where you kind of have to make a judgement call is this other section of
links down here.
So, these links don't link within the site, they link externally to it.
And they're not a part of the main page navigation.
So, do they get a nav element, or don't they?
All right let's go back into our code.
And I think we are all in agreement that the first section of links needs a nav.
So what I'm going to do is I'm going to go ahead and
wrap that unordered list that I find just below the heading 2 in a nav element.
Now remember, for navs, you need both an opening and a closing tag.
So I'm going to make sure that I have an opening and
closing tag wrapping around the unordered list that contains all of the page links.
Now I'm going to save this.
And as I scroll down I see that I have all of the links down here that
are going outside of the site to the W3C's HTML5 specification to give
a little bit of extra information about these elements.
Now in my opinion, and
this is a judgment call, this does not warrant the use of a nav element.
It doesn't really need to create a brand new section in my content.
So if I was looking at the document outline, for example,
I wouldn't want these to occupy their own slot within the document outline.
I also would like to point out that it's not navigating internally to my site.
So this is, really isn't page navigation, this is just informational links.
Even though they're grouped together to me they don't rise to warrant the use of
a nav element.
So, remember that the nav element isn't right for
every group of links in your pages.
Play close attention to the semantics of your site so
that you can make sure that you're using it correctly.