"The
<nav>element represents a navigation section where only sections that consist of primary navigation blocks are appropriate for the<nav>element." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
Like the new <header> tag replacing outmoded naming conventions like <div id="header">, we can also replace <div id="nav"> with the simple new <nav>. Makes much more sense, doesn't it? We think so too.
We're going to add the primary navigation bar like we so often see on web pages. This enables users to easily maneuver from page to page or, in this case, within the same page. Roxane wants to showcase her biographical information, work samples, and ways to contact her, so we'll use those as our anchors.
Let's create our navigation bar using the two most typical elements:
1. An unordered list
2. Accompanying hypertext links
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> <nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Work">Work</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> </body> </html>
Previously, we would have used something like <div id="nav"> to store our navigation list in it. But with HTML5, the new <nav> tag is all that's necessary.
When we apply CSS, we'll float those list items and make them appear more like a traditional web navigation bar.
The beauty of naming things more semantically is that now portions of our pages do exactly what we think they should do — a <header> contains heading information, <nav> contains navigation aids, and so on. Eschew obfuscation.
Remember also that more semantic naming can usually lead to shorter, leaner code. After all, <nav> is certainly shorter than the common <div id="nav">. And it makes more sense to both humans and machines. That means less for us to write, which saves us time. That also means less code for the browser to interpret and display, which saves download and render time. It also gives meaning and structure to the content, similar to the way an outline provides meaning and structure to a research paper. Everybody wins.
Since it's a still-evolving standard, you're encouraged to contribute to the evolution of HTML5 and help shape the language. Join the WHATWG's <[email protected]> mailing list to make suggestions and ask questions. Instructions for signing up are at: http://whatwg.org/mailing-list#help.