nav元素標籤

HTML5中的新元素標籤<nav>用來將具有導航性質的鏈接劃分在一起,使代碼結構在語義化方面更加準確,同時對於屏幕閱讀器等設備的支持也更好。

一直以來,我們習慣於使用形如<div id="nav">或<ul id="nav">這樣的代碼來寫頁面的導航;在HTML5中,我們可以直接將導航鏈接列表放到<nav>標籤中:

<nav>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="/about/">About</a></li>

<li><a href="/blog/">Blog</a></li>

</ul>

</nav>

根據W3C的定義規範:

nav元素是一個可以用來作爲頁面導航的鏈接組;其中的導航元素鏈接到其他頁面或當前頁面的其他部分。並不是所有的鏈接組都要被放進<nav>元素;例如,在頁腳中通常會有一組鏈接,包括服務條款、首頁、版權聲明等;這時使用<footer>元素是最恰當的,而不需要<nav>元素。

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

一個頁面中可以擁有多個<nav>元素,作爲頁面整體或不同部分的導航;下面是W3C給出的一個代碼示例:

<body>

<h1>The Wiki Center Of Exampland</h1>

<nav>

<ul>

<li><a href="/">Home</a></li>

<li><a href="/events">Current Events</a></li>

...more...

</ul>

</nav>

<article>

<header>

<h1>Demos in Exampland</h1>

<p>Written by A. N. Other.</p>

</header>

<nav>

<ul>

<li><a href="#public">Public demonstrations</a></li>

<li><a href="#destroy">Demolitions</a></li>

...more...

</ul>

</nav>

<div>

<section id="public">

<h1>Public demonstrations</h1>

<p>...more...</p>

</section>

<section id="destroy">

<h1>Demolitions</h1>

<p>...more...</p>

</section>

...more...

</div>

<footer>

<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>

</footer>

</article>

<footer>

<p><small>© copyright 1998 Exampland Emperor</small></p>

</footer>

</body>

在這個示例中,我們可以看到<nav>不僅可以用來作爲頁面全局導航,也可以放在<article>標籤內,作爲單篇文章內容的相關導航鏈接到當前頁面的其他位置。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章