nav

  • Revision slug: HTML/Element/nav
  • Revision title: nav
  • Revision id: 292912
  • Criado:
  • Criador: AluisioASG
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

{{ HTMLVersionHeader(5) }}

Sumário

O Elemento HTML de Navegação (<nav>) representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação.

Notas de utilização:

  • Nem todos os links de um documento devem estar dentro de um elemento <nav>, o qual é destinado apenas para grupos importantes de links de navegação; tipicamente o elemento {{ HTMLElement("footer") }} contém uma lista de links que não precisam estar em um elemento {{ HTMLElement("nav") }}.
  • Um documento pode ter vários elementos {{ HTMLElement("nav") }}, por exemplo, um para navegação no site e outro para navegação dentro da página.for example, one for site navigation and one for intra-page navigation.
  • Agentes de usuário, como leitores de tela para usuários deficientes, podem utilizar este elemento para determinar se a renderização inicial do conteúdo do mesmo deve ser omitida.

Contexto de uso

Conteúdo permitido Conteúdo de fluxo
Omissão de tag Nenhuma, tanto a tag de início quanto a de fim são obrigatórias
Elementos-pai permitidos Quaisquer elementos que permitam conteúdo de fluxo. Note que um elemento <nav> não deve descender de um elemento {{ HTMLElement("address") }}.
Documento normativo HTML5, seção 4.4.3

Atributos

Este elemento não possui outros atributos além dos atributos globais, comuns a todos os elementos.

Interface DOM

Este elemento implementa a interface HTMLElement.

Exemplos

<nav>
  <ul>
    <li><a href="#">Página inicial</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</nav> 

Compatibilidade

{{ CompatibilityTable() }}

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 5 {{ CompatGeckoDesktop("2.0") }} 9.0 11.10 4.1
Recurso Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 2.2 {{ CompatGeckoMobile("2.0") }} 9.0 11.0 5.0 (iOS 4.2)

Veja também

  • Outros elementos relacionados à seções: {{ 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") }};
  • Seções e esboços de um documento HTML5
{{ HTML:Element_Navigation() }}
{{ languages({ "ja": "ja/HTML/Element/nav" }) }}

Fonte da revisão

<div>
  {{ HTMLVersionHeader(5) }}</div>
<h2 id="Summary">Sumário</h2>
<p>O <em>Elemento </em><em>HTML </em><em>de Navegação</em> (<code>&lt;nav&gt;</code>) representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação.</p>
<div class="note">
  <p><em>Notas de utilização:</em></p>
  <ul>
    <li>Nem todos os links de um documento devem estar dentro de um elemento <code>&lt;nav&gt;</code>, o qual é destinado apenas para grupos importantes de links de navegação; tipicamente o elemento {{ HTMLElement("footer") }} contém uma lista de links que não precisam estar em um elemento {{ HTMLElement("nav") }}.</li>
    <li>Um documento pode ter vários elementos {{ HTMLElement("nav") }}, por exemplo, um para navegação no site e outro para navegação dentro da página.for example, one for site navigation and one for intra-page navigation.</li>
    <li>Agentes de usuário, como leitores de tela para usuários deficientes, podem utilizar este elemento para determinar se a renderização inicial do conteúdo do mesmo deve ser omitida.</li>
  </ul>
</div>
<h2 id="Usage_context">Contexto de uso</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <td>Conteúdo permitido</td>
      <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">Conteúdo de fluxo</a></td>
    </tr>
    <tr>
      <td>Omissão de tag</td>
      <td>Nenhuma, tanto a tag de início quanto a de fim são obrigatórias</td>
    </tr>
    <tr>
      <td>Elementos-pai permitidos</td>
      <td>Quaisquer elementos que permitam conteúdo de fluxo. Note que um elemento <code>&lt;nav&gt;</code> não deve descender de um elemento {{ HTMLElement("address") }}.</td>
    </tr>
    <tr>
      <td>Documento normativo</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, seção 4.4.3</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes">Atributos</h2>
<p>Este elemento não possui outros atributos além dos <a href="/en/HTML/Global_attributes" rel="internal">atributos globais</a>, comuns a todos os elementos.</p>
<h2 class="editable" id="DOM_Interface">Interface DOM</h2>
<p>Este elemento implementa a interface <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code>.</p>
<h2 id="Examples">Exemplos</h2>
<pre class="brush: html">
&lt;nav&gt;
&nbsp; &lt;ul&gt;
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Página inicial&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Sobre&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="#"&gt;Contato&lt;/a&gt;&lt;/li&gt;
&nbsp; &lt;/ul&gt;
&lt;/nav&gt; 
</pre>
<h2 id="Compatibility">Compatibilidade</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Recurso</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Suporte básico</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>Recurso</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Suporte básico</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">Veja também</h2>
<ul>
  <li>Outros elementos relacionados à seções: {{ 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/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Seções e esboços de um documento HTML5</a></li>
</ul>
<div>
  {{ HTML:Element_Navigation() }}</div>
<div>
  {{ languages({ "ja": "ja/HTML/Element/nav" }) }}</div>
Reverter para esta revisão