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 .