Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Using icons
- Navigating with Spry widgets
- Styling Spry menus
- Working with background images
- Implementing sprites
- Designing navigation with accessibility in mind
- Adding drop-down menus
- Developing graphical navigation with jQuery
- Creating pop-out vertical navigation
- Exploring CSS3 and HTML5 enhancements
Skill Level Intermediate
HTML5 is coming fast down the pike and bringing with it a boatload of changes, including a tag specifically intended for navigation. The nav tag is one of a group of what are known as semantic tags. Semantic tags are intended to more clearly convey what the markup holds. And in the case of the nav tag, that's primary as well as a secondary and other navigation. Let's take a look at an example. We've used this page in several movies in the course, including Chapter 5 on vertical navigation. So let me go over to Source Code, and here you see right near the top, a nav tag with an id of mainNav.
Now notice this is not a div tag with an id of mainNav; it's actually a nav tag. And if I happen to remove it temporarily, and then type it back in, you'll notice that after I type a couple of the letters just 'na', Dreamweaver's code hints come up. So we have code hint support in Dreamweaver CS5. And I can add in the id = mainNav, and that's really all there is to it. There are no additional syntax to learn for the nav tag. But if you decide to work with HTML5 tags like nav now, there are a few things you should know.
First, you need to declare a proper DOCTYPEm such as !DOCTYPE HTML. This is the DOCTYPE that's being recommended currently by the WC3 for HTML5, and web designers all around the world are applauding its simplicity. Now that you made sure that your pages are forward compatible, you need to make sure that they are also compatible with older browsers. Most browsers will basically ignore the strangeness of any tags they don't know and render them according to whatever CSS rules are applied. However, because they don't assign any basic properties, there's one that you have to do yourself, the display property.
If you don't include a CSS rule that specifies a display property and value for the nav and other HTML5 semantic tags, most of the current crop of browsers--and all of the old ones--will just assume it's an inline tag, which would be disastrous for your pretty distinct nav bar. Therefore, you have to create a rule like this one, in the main.css file, found on line 67. Notice what we have here are most of the semantic tags that are used in HTML5, including the nav tag.
And they're all set to one property, display:block. Now I was careful to say that most browsers will ignore unknown tags. That's not the case with Internet Explorer browsers before version 9. They will all totally block if they encounter an unknown tag. To get around this problem, you need to include a conditional comment that targets all IE browsers before 9. Like the one that we have in the source code here, right before the end of the head tag, this conditional comment looks for versions less than IE9, and if the browser being used by the site visitor is one of those, a certain script is included.