Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using the nav element

From: CSS: Styling Navigation

Video: Using the nav element

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.

Using the nav element

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.

Now don't feel like you have to use the nav element, it is entirely optional, and indeed, since it's an HTML5 element, it's only available to you if you are authoring HTML5 pages. Plus, since older Browser support for HTML5 wasn't really all that great, it does require a little bit of JavaScript if you want it to work in Internet Explorer 6 and below. However, it does give you additional semantics, and it helps prepare your content for future support in browsers and assistive devices. Keep in mind that where you use it is always a bit of a judgment call, so be sure you understand the element clearly before attempting to use it.

Show transcript

This video is part of

Image for CSS: Styling Navigation
CSS: Styling Navigation

53 video lessons · 16709 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 3m 8s
    1. Welcome
      42s
    2. What you should know before watching this course
      1m 12s
    3. Using the exercise files
      1m 14s
  2. 35m 25s
    1. Organizing menus with lists
      4m 26s
    2. Ensuring accessibility
      9m 3s
    3. Using the nav element
      7m 30s
    4. Creating block-level links
      3m 8s
    5. Lab: Structuring navigation
      4m 11s
    6. Solution: Structuring navigation
      7m 7s
  3. 48m 42s
    1. Exploring link style considerations
      9m 2s
    2. Using global link styles
      9m 56s
    3. Styling link states
      10m 57s
    4. Indicating external links
      10m 4s
    5. Styling image links
      8m 43s
  4. 52m 5s
    1. Stripping default list styling
      4m 34s
    2. Defining link dimensions
      6m 0s
    3. Setting link styling
      3m 36s
    4. Aligning links vertically
      4m 11s
    5. Controlling link spacing
      2m 30s
    6. Styling menus with borders
      2m 32s
    7. Creating rollovers
      4m 45s
    8. Restricting link styling
      3m 31s
    9. Lab: Creating a vertical menu
      11m 44s
    10. Solution: Creating a vertical menu
      8m 42s
  5. 54m 58s
    1. Stripping list styling
      3m 35s
    2. Displaying links horizontally
      6m 14s
    3. Clearing floats
      6m 12s
    4. Controlling link sizing and spacing
      3m 11s
    5. Styling links
      7m 16s
    6. Creating rollovers
      5m 52s
    7. Indicating current pages
      4m 43s
    8. Controlling cursor states
      2m 46s
    9. Lab: Creating horizontal menus
      6m 45s
    10. Solution: Creating horizontal menus
      8m 24s
  6. 55m 35s
    1. Overview of dropdown menus
      1m 17s
    2. Structuring submenus
      5m 56s
    3. Styling submenus
      6m 4s
    4. Creating submenu rollovers
      3m 28s
    5. Positioning submenus
      5m 43s
    6. Controlling submenu display
      5m 5s
    7. Creating persistent hover states
      5m 53s
    8. Animating menus with CSS transitions
      6m 29s
    9. Lab: Dropdown menus
      6m 51s
    10. Solution: Dropdown menus
      8m 49s
  7. 58m 7s
    1. Creating CSS-only buttons
      8m 39s
    2. Creating special effects for buttons
      4m 2s
    3. Enhancing buttons with gradients
      7m 40s
    4. Overview of CSS sprites
      3m 30s
    5. Using CSS sprites for icons
      14m 30s
    6. Styling block-level links
      8m 38s
    7. Lab: Enhancing navigation with CSS
      5m 26s
    8. Solution: Enhancing navigation with CSS
      5m 42s
  8. 6m 29s
    1. Additional resources
      6m 29s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Styling Navigation.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.