Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
The introduction of new semantic elements in HTML5 has given us additional flexibility when we structure and style our pages. However, it's not unusual for designers to become a little confused about when it's appropriate to use them, so I want to take a moment to explore the nav element and how it can help us when structuring our site's navigation. To do that, I have the nav.htm file open from 01_03 folder, and right now I've just got it opened up in my Browser. And as you can see, I've added a couple of things to the page that we were using in the previous exercise, so it's kind of a continuation of that, if you will.
I've added a Search field down here so people can search the site. And then if I scroll down, I've also got some links here in the bottom page. In the footer I have some links, some additional resources where you can learn more about HTML5 elements, you can learn more about accessibility and then just some basic site type links like privacy statements, logins, things like that. So those are contained down on the footer of the page, if you will. The first thing I want to do is just talk about the nav element in general, what is it? And to do that I am going to switch over to a page on the W3C's Wiki site about using an HTML5 nav element.
This gives a pretty nice description of what it is and shows you a couple of examples of how to use it. Now the first thing I want to show you is down in this example, the nav element is just that N-A-V, usually surrounds menus or groupings of links as it says right here, the nav element allows the author to mark up major navigation blocks. Now keep that in mind, because we're going to talk about that more in just a minute, major navigation blocks in the HTML5 page. Now what does that actually do for you? And the description up here talks about how it's also helpful to assistive users of assistive technology in that it allows you to either jump directly to an area of navigation or to skip it.
So it essentially identifies this as saying, yes, this is part of the navigation of the site, you can choose to jump right to it and go into it or you can skip over it and go right to the content, so it's very helpful in that sense. As a matter of fact, later on down the page it talks about how this is meant to be used in conjunction currently with the ARIA's role of navigation, whereas later on it is more support for the nav element comes online for assistive technologies, we may not even need to continue to use the role of navigation. But right now, you know we kind of use them in tandem.
So that brings the biggest question which is, okay, does every grouping of links need now to have a nav element around it? Well, number one, remember this is only for HTML5 pages, so if you are not authoring HTML5, you don't need to worry about the nav element. The second is no. If you are going to be using the nav element, it doesn't go around every single block of links. And let me show you exactly where in the specification it kind of talks about that a little bit. So I've jumped over to the HTML5 specification right now. Remember, as it says the nav element represents a section of a page that links to other pages or parts within the page. It's the section with navigation links.
But the note right below, it is very informative. It says not all groups of links on the page need to be a nav element. Now the element is primarily intended for sections that consist of major navigation blocks. Now that's obviously open to interpretation, but the way that I look at that is that it's not for every grouping of links on the page, it's for only the ones that really are major navigation blocks within the site or within that particular page or application. It even goes on to talk about how you know it's common for footers to have a short list of links, and that probably doesn't warrant the use of a nav element, that sort of thing.
So what I want to do is I want to switch over to this page in a code editor, here I've got it opened up in Dreamweaver, and we're going to go through and take a look at the different sections of navigation within the page and then talk about whether they really merit the use of a nav element or not. If I go down this unordered list here that has our site's navigation in it, it's pretty obvious that that warrants a nav element. It's a main block of navigation on the page, it's the main navigation for the entire site, so I am going to go ahead and wrap that in a nav element. Now, the other thing that this allows us to do is repurpose some of the stuff we've got going on here.
I have an ID of mainNav, and I have the role of navigation applied to that. I am going to cut both of those from the unordered list, and I am just going to go ahead and paste both of those attributes into the nav element. By placing the nav element around an unordered list, it now becomes the parent element of that navigation group and so any IDs, things like that that you are going to apply to it should probably apply to that element. Now I've actually seen search forms kind of go either way. I've seen some designers wrap them in a nav element and other designers not.
They are becoming an increasingly more important part of site navigation, especially in the mobile space where users will often want to search for content rather than go through a complicated menu structure. But as of right now, for most individual search fields I won't wrap them in a nav element. Although you certainly do have that option, again, this is one of those personal preferences. Now if I scroll down towards the bottom of the page, I've got two sections down here that I want to talk about. I have an aside, which is pretty much the same as a sidebar, if you will, and then I have a footer.
Now if I look at the side I have a list of additional resources here and inside that I have some links to pages like HTML5 doctor, webstandards project, really nice external references for people when they want to learn about making sites more accessible or using some of these HTML5 elements. The question is does this warrant a nav element? And remember, the real litmus test that we use here is is this a main navigational block? Is it germane to the entire site and is it a main section of navigation? In this case, I would have to say no, it's not. It's additional resources that links outside the site for the most part, so it's really not part of the site navigation.
It's more of a section of links basically passing along more information to the user. So in that case, I would want screen readers to read it. I wouldn't want people to have the option of skipping over it or jumping right to it. I kind of like it being within the normal flow of that content. And then finally, if I go down into the footer, I notice here I have another set of links here, another menu, and this one does pertain to the site. So here we have the site's privacy statement, logins for users, account information, maybe some monthly specials that we have going on.
This is very common for a footer to have a small list of links that give more information about the site, typically things that aren't top level that you would find in the main navigation up top. Here I would be very tempted to wrap this in a nav element, and a lot of times within the footer I will do that if I think the footer is sufficiently complicated enough or complex enough to warrant that. In this case, I'm going to go with the specification. The specification said, hey, if it's in the footer, typically the footer element itself is able to handle that. It's the only thing within the footer, so I am going to leave that off, and in this case, I'm only using the nav element once on the page, which illustrates to you that a lot of times it's really a judgment call about when it's appropriate for you and when it's not.
There are currently no FAQs about CSS: Styling Navigation.
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.