Autor publikacji
Virtual Patriot - Administrator

nav

Data publikacji
Ostatnio edytowano

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 artykuły związane z elementem nav

Informacje techniczne 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

zdolność fallback

nie dotyczy

składnia HTML

<nav> ... </nav>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

  • block (jeżeli przeglądarka internetowa interpretuje element nav)

  • inline (jeżeli przeglądarka internetowa nie interpretuje elementu nav)

Przypuszczalnie domyślne reguły CSS elementu nav

/* jeżeli przeglądarka internetowa interpretuje element "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 .