Revision 298021 of <nav>

  • Revision slug: HTML/Element/nav
  • Revision title: nav
  • Revision id: 298021
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{HTMLVersionHeader(5)}}

Summary

The HTML Navigation Element (<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Usage notes:

  • Not all links of a document must be in a <nav> element, which is intended only for major block of navigation links; typically the {{HTMLElement("footer")}} element often has a list of links that don't need to be in a {{HTMLElement("nav")}} element.
  • A document may have several {{HTMLElement("nav")}} elements, for example, one for site navigation and one for intra-page navigation.
  • User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of this content.

Usage context

Permitted content Flow content
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements Any element that accepts flow content. Note that a <nav> element must not be a descendant of an {{HTMLElement("address")}} element.
Normative document HTML5, section 4.4.3

Attributes

This element has no other attributes than the global attributes, common to all elements.

DOM Interface

This element implements the HTMLElement interface.

Examples

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav> 

Compatibility

{{CompatibilityTable()}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 {{CompatGeckoDesktop("2.0")}} 9.0 11.10 4.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.2 {{CompatGeckoMobile("2.0")}} 9.0 11.0 5.0 (iOS 4.2)

See also

  • Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};
  • Sections and outlines of an HTML5 document.
{{HTML:Element_Navigation()}}

Revision Source

<div>{{HTMLVersionHeader(5)}}</div>

<h2 id="Summary">Summary</h2>
<p>The <em>HTML Navigation Element</em> (<code>&lt;nav&gt;</code>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links.</p>
<div class="note">
  <p><em>Usage notes:</em></p>
  <ul>
    <li>Not all links of a document must be in a <code>&lt;nav&gt;</code> element, which is intended only for major block of navigation links; typically the {{HTMLElement("footer")}} element often has a list of links that don't need to be in a {{HTMLElement("nav")}} element.</li>
    <li>A document may have several {{HTMLElement("nav")}} elements, for example, one for site navigation and one for intra-page navigation.</li>
    <li>User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of this content.</li>
  </ul>
</div>

<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td>Permitted content</td>
      <td><a href="/en-US/docs/HTML/Content_categories#flow_content" title="en-US/docs/HTML/Content categories#flow content">Flow content</a></td>
    </tr>
    <tr>
      <td>Tag omission</td>
      <td>None, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td>
    </tr>
    <tr>
      <td>Permitted parent elements</td>
      <td>Any element that accepts flow content. Note that a <code>&lt;nav&gt;</code> element must not be a descendant of an {{HTMLElement("address")}} element.</td>
    </tr>
    <tr>
      <td>Normative document</td>
      <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element">HTML5, section 4.4.3</a></td>
    </tr>
  </tbody>
</table>

<h2 id="Attributes">Attributes</h2>
<p>This element has no other attributes than the <a href="/en-US/docs/HTML/Global_attributes" rel="internal">global attributes</a>, common to all elements.</p>

<h2 class="editable" id="DOM_Interface">DOM Interface</h2>
<p>This element implements the <code><a href="/en-US/docs/DOM/element" title="en-US/docs/DOM/element">HTMLElement</a></code> interface.</p>

<h2 id="Examples">Examples</h2>
<pre class="brush:xml">
&lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt; 
</pre>

<h2 id="Compatibility">Compatibility</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>5</td>
        <td>{{CompatGeckoDesktop("2.0")}}</td>
        <td>9.0</td>
        <td>11.10</td>
        <td>4.1</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.2</td>
        <td>{{CompatGeckoMobile("2.0")}}</td>
        <td>9.0</td>
        <td>11.0</td>
        <td>5.0 (iOS 4.2)</td>
      </tr>
    </tbody>
  </table>
</div>

<h2 id="See_also">See also</h2>
<ul>
  <li>Other section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
  <li class="last"><a class="deki-ns current" href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="en-US/docs/Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
</ul>

<div>{{HTML:Element_Navigation()}}</div>
Revert to this revision