Ostatnio edytowany:

nav

Autor: Virtual Patriot

Przeznaczenie elementu nav

Element nav reprezentuje sekcję typu nav, której zawartością powinny być elementy HTML tworzące nawigację pomiędzy różnymi dokumentami HTML lub ich częściami.

Dodatkowe techniczne informacje o elemencie nav

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst opływający

Przykładowy Kod HTML

<body>
  <h1>Sprzedaż sztucznych owoców</h1>

  <nav>
    <h2>Główna nawigacja do produktu</h2>

    <ul>
      <li>
        <a href="#produkt-1">zobacz czereśnię</a>
      </li>

      <li>
        <a href="#produkt-2">zobacz truskawkę</a>
      </li>

      <li>
        <a href="#produkt-3">zobacz kiwi</a>
      </li>
    </ul>
  </nav>

  <article id="produkt-1">
    <h2>Czereśnia</h2>
    <img src="owoc-01.png" alt="zdjęcie czereśni">
  </article>

  <article id="produkt-2">
    <h2>Truskawka</h2>
    <img src="owoc-02.png" alt="zdjęcie truskawki">
  </article>

  <article id="produkt-3">
    <h2>Kiwi</h2>
    <img src="owoc-03.png" alt="zdjęcie kiwi">
  </article>
</body>

Kontekstem zewnętrznym przykładowego elementu "nav" jest element "body". Wspomniany element "body" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst opływający, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "body", jest prawidłowym kontekstem zewnętrznym dla elementu "nav".

kontekst wewnętrzny
zawartość opływająca, lecz nie element main jako element potomek

Przykładowy Kod HTML

<body>
  <h1>Sprzedaż sztucznych owoców</h1>

  <nav>
    <h2>Główna nawigacja do produktu</h2>

    <ul>
      <li>
        <a href="#produkt-1">zobacz czereśnię</a>
      </li>

      <li>
        <a href="#produkt-2">zobacz truskawkę</a>
      </li>

      <li>
        <a href="#produkt-3">zobacz kiwi</a>
      </li>
    </ul>
  </nav>

  <article id="produkt-1">
    <h2>Czereśnia</h2>
    <img src="owoc-01.png" alt="zdjęcie czereśni">
  </article>

  <article id="produkt-2">
    <h2>Truskawka</h2>
    <img src="owoc-02.png" alt="zdjęcie truskawki">
  </article>

  <article id="produkt-3">
    <h2>Kiwi</h2>
    <img src="owoc-03.png" alt="zdjęcie kiwi">
  </article>
</body>

Kontekstem wewnętrznym przykładowego elementu "nav" są wyłącznie elementy HTML, które należą do kategorii zawartość opływająca oraz które nie są zakazanym kontekstem wewnętrznym elementu "nav", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "h2" oraz element "ul", jest prawidłowym kontekstem wewnętrznym dla elementu "nav".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<nav> ... </nav>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

block

Dodatkowe domyślne reguły CSS elementu nav

nav {
  display:block;
}

Interpretacja elementu nav

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji elementu .