Creating a table of contents using the nav tag_HTML5 Multimedia Development Cookbook-QQ阅读男生中文科幻网

上QQ阅读APP看书，第一时间看更新

Creating a table of contents using the nav tag

"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.

Getting ready

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.

How to do it...

Let's create our navigation bar using the two most typical elements:

An unordered list

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>

How it works...

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.

There's more...

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.

Use <nav> elsewhere

Like <header>, <nav> can appear in more than one place on a page.

More semantic = more gooder

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.

Still evolving

Originally, the new <nav> element was only for "primary" navigation blocks. However, Ian Hickson, the driving force behind HTML5, updated the specification to be "major" navigation blocks instead.