HTML5 - Struktura treści

Tworzenie struktury treści przed HTML5 sprowadzało się do umieszczania w dokumencie wielu elementów div z przypisanymi do nich unikalnymi identyfikatorami w atrybucie id. Tak więc na przykład w celu określenia nagłówka dokumentu tworzony był element div z id="header", dla głównej części dokumentu element div z id="main" a dla stopki element div z id="footer". HTML5 wprowadza szereg elementów semantycznych służących do opisu struktury treści dokumentu.

Zobacz:


Główna część dokumentu - main

Element main określa główną część zawartości dokumentu lub aplikacji. Może być użyty w dokumencie tylko raz i nie może być umieszczony wewnątrz innych elementów sematycznych struktury treści.

Treść dokumentu objęta elementem main powinna być unikalna dla dokumentu w którym się znajduje oraz niepowtarzać się w innych dokumentach. Treści wspólne dla wielu dokumentów, takie jak linki nawigacyjne, znaki firmowe witryny, informacje o prawach autorskich czy elementy wyszukiwarek powinny znajdować się poza elementem main.

Przykład:

<body>
   <header>...</header>

   <main>
      Treść główna dokumentu lub aplikacji.
   </main>

   <footer>...</footer>
</body>
Element main może być użyty na stronie tylko raz.

Element main nie może być stosowany jako element potomny elementów article, aside, footer, header, nav.

Nagłówek dokumentu lub sekcji - header

Element header określa nagłówek dokumentu lub sekcji. Powinien być wykorzystywany jako kontener na zawartość wstępną i/lub zestaw łączy nawigacyjnych. W dokumencie może być użytych kilka elementów header, ale element ten nie może być umieszczany wewnątrz elementów main, footer, jak również innym elemencie header.

Przykład 1:

Nagłówek zawartości dokumentu
<body>
   <header>
      Tutaj umieszczane są informacje wstępne i/lub linki nawigacyjne.
   </header>

   <main>...</main>

   <footer>...</footer>
</body>

Przykład 2:

Nagłówek zawartości sekcji <article>
<article>
   <header>
      Zawartość nagłówka sekcji <article>.
   </header>

   Pozostała zawartość sekcji <article>.
</article>
Element header nie może być stosowany jako element potomny elementów main, header, footer.

Stopka dokumentu lub sekcji - footer

Element footer określa stopkę dokumentu lub sekcji. Powinien być wykorzystywany do umieszczania informacji o swojej sekcji takich jak autor, prawa autorskie, linki do materiałów powiązanych, dane kontaktowe, itp. W dokumencie może być użytych kilka elementów footer, ale element ten nie może być umieszczany wewnątrz elementów main, header, jak również innym elemencie footer.

Przykład 1:

Stopka zawartości dokumentu
<body>
   <header>...</header>

   <main>...</main>

   <footer>
      Tutaj umieszczane są informacje o autorze, prawach autorskich, linki do treści powiązanych, itp.
   </footer>
</body>

Przykład 2:

Stopka zawartości sekcji <article>
<article>
   Zawartość sekcji <article>.

   <footer>
      Zawartość stopki sekcji <article>.
   </footer>
</article>
Element footer nie może być stosowany jako element potomny elementów main, header, footer.

Treści samodzielne - article

Element article określa samodzielne, niezależne treści. Może być używany wielokrotnie. Treści nim objęte powinny mieć sens we własnych granicach. Mogą to być wiadomości na forum, artykuły prasowe, wpisy na blogu, komentarze nadesłane przez użytkowników, interaktywne widgety lub gadżety, lub inne niezależne elementy treści.

Gdy element article jest zagnieżdzony wewnątrz innego elementu article, treści nim objęte, powinny pozostawać w ścisłym związku z treścią elementu rodzica.

Przykład 1:

Sekcja article z nagłówkiem i stopką
<article>
   <header>
      Informacje wstępne.
   </header>
   
   Główna zawartość sekcji.
   
   <footer>
      Informacje o sekcji.
   </footer>
</article>

Przykład 2:

Sekcja article zagnieżdżona wewnątrz sekcji article
<article>
   Komentarz do artykułu.
   <section>
      <article>
         Komentarz do komentarza.
      </article>
   </section>
</article>

Treści poboczne - aside

Element aside określa sekcję strony, której zawartość jest odnoszona do treści wokół elementu, ale którą uznać można za odrębną od tychże treści. Element może być stosowany do zawartości takich jak paski boczne zawierające cytaty, reklamy, grupy elementów nav i innych treści, które uważa się za odrębne od głównej treści strony.

Przykład 1:

<body>
   <header>...</header>

   <main>...</main>

   <aside>
      Treści poboczne dla głównej zawartości dokumentu.
   </aside>

   <footer>...</footer>
</body>

Przykład 2:

<body>
   <header>...</header>

   <aside>
      <nav>
         Sekcja linków nawigacyjnych, na przykład do treści zbieżnych tematycznie.
      </nav>
   </aside>

   <article>
      ...
      <aside>
         Treści poboczne do zawartości sekcji <article>.
      </aside>
   </article>

   <footer>...</footer>
</body>
Element aside nie może być stosowany jako element potomny elementu main, ponieważ stanowiąc treści poboczne, z definicji nie stanowi głównej zawartości dokumentu.

Sekcja linków nawigacyjnych - nav

Element nav określa sekcję linków nawigacyjnych. Element ten nie powinien być stosowany dla wszystkich linków, a jedynie dla bloków linków odpowiadających za nawigację w witrynie. Mogą to być na przykład menu główne witryny, menu boczne, czy menu w stopce.

Przykład 1:

Sekcja linków
<nav>
   <a href="/link_1">Link 1</a> | <a href="/link_2">Link 2</a> | <a href="/link_3">Link 3</a>
</nav>

Przykład 2:

Sekcja linków oparta na liście
<nav>
   <ul>
      <li><a href="/link_1">Link 1</a></li>
      <li><a href="/link_2">Link 2</a></li>
      <li><a href="/link_3">Link 3</a></li>
   </ul>
</nav>
Element nav nie może być stosowany jako element potomny elementu main, ponieważ sekcje linków witryny są elementami wspólnymi wielu stron.

Sekcja dokumentu lub aplikacji - section

Element section określa sekcję strony, stanowiącą tematyczną grupę zawartości. Mogą to być na przykład rozdziały, nagłówki, stopki lub inne części dokumentu. Temat każdej sekcji powinien być jasno określony, najczęściej poprzez nagłówek (elementy h1 do h6).

Przykład:

<article>
   <header>...</header>

   <section>
      Tematyczna sekcja artykułu.
   </section>

   <section>
      Kolejna tematyczna sekcja artykułu.
   </section>

   <footer>...</footer>
</article>

Elementy struktury treści

Tag pocz. Tag końc. Opis
<article> </article> Określa artykuł.
<aside> </aside> Określa treści dodatkowe, niebędące treściami zasadniczymi.
<footer> </footer> Określa stopkę dokumentu lub sekcji.
<header> </header> Określa nagłówek dokumentu lub sekcji.
<nav> </nav> Określa zestaw linków nawigacyjnych.
<main> </main> Określa główną część dokumentu.
<section> </section> Określa sekcję w dokumencie.