• Wprowadzenie
• Typ dokumentu HTML5
• Element html
• Element head
• Kodowanie znaków w HTML5
• Relacje między dokumentami
• Elementy semantyczne HTML5
• Obsługa nieznanych elementów
• Nagłówki w HTML5
• Artykuły w HTML5
• Elementy daty i godziny HTML5
• Nawigacja w HTML5
• Stopka strony w HTML5

Pozostając przy naszej przykładowej stronie, zobaczmy co da się zrobić z tym kodem HTML:

<div class="entry">
  <p class="post-date">22 października 2009 r.</p>
  <h2>
    <a href="#"
       rel="bookmark"
       title="łącze do tego wpisu">
       Dzień wyjazdu
    </a>
  </h2>
  …
</div>

Jest to poprawny kod HTML5. Ale w języku HTML5 dostępny są też specjalny element służący do oznaczania artykułów na stronach: element article.

<article>
  <p class="post-date">22 października 2009 r.</p>
  <h2>
    <a href="#"
       rel="bookmark"
       title="łącze do tego wpisu">
       Dzień wyjazdu
    </a>
  </h2>
  …
</article>

Hola, to nie takie proste. Trzeba zmienić coś jeszcze. Najpierw pokażę co, a potem wyjaśnię dlaczego:

<article>
  <header>
    <p class="post-date">22 października 2009 r.</p>
    <h1>
      <a href="#"
         rel="bookmark"
         title="łącze do tego wpisu">
         Dzień wyjazdu
      </a>
    </h1>
  </header>
  …
</article>

Wiesz o co chodzi? Zamieniłem element h2 na h1 i oba umieściłem w elemencie header. Element header już widziałeś wcześniej. Służy do grupowania elementów stanowiących nagłówek artykułu (w tym przypadku jest to data i tytuł publikacji). Ale…ale…ale… czy w dokumencie nie powinien znajdować się maksymalnie jeden element h1? Czy to nie popsuje zarysu dokumentu? Nie, ale żeby zrozumieć dlaczego, musimy nieco się cofnąć.

W HTML 4, zarys dokumentu można było tworzyć tylko przy użyciu elementów <h1>–<h6>. Jeśli chcieliśmy mieć w zarysie tylko jeden węzeł główny, musieliśmy ograniczyć się do użycia tylko jednego elementu h1. Ale w specyfikacji HTML5 zdefiniowano algorytm generowania zarysu dokumentów biorący pod uwagę nowe elementy semantyczne. W algorytmie ten element article tworzy nową sekcję, a więc nowy węzeł w zarysie. Ponadto w HTML5 każda sekcja może zawierać własny element h1.

Jest to radykalna i bardzo korzystna zmiana w stosunku do HTML 4. Wiele strony internetowych jest generowanych przy użyciu szablonów. Składa się je po kawałku z części pochodzących z różnych źródeł — trochę stąd, trochę stamtąd i otrzymujemy kompletną stronę. W ten sam sposób skonstruowanych jest wiele kursów. „Oto fragment kodu HTML. Skopiuj go i wklej na swoją stronę”. Jest to dobre rozwiązanie w przypadku niewielkich fragmentów treści, ale pomyśl co by było, gdyby trzeba było wkleić całą sekcję. W takim przypadku kurs wyglądałby mniej więcej tak: „Oto fragment kodu HTML. Skopiuj go, wklej do edytora tekstu, a następnie dostosuj nagłówki tak, aby pasowały poziomem do nagłówków, które już znajdują się na stronie, na którą masz wkleić kod”.

Innymi słowy w języku HTML 4 nie ma ogólnego elementu nagłówkowego. Są tylko ponumerowane nagłówki h1–h6, które muszą być stosowane w ściśle określonej kolejności. To poważny problem, zwłaszcza gdy strona jest „składana” z różnych części, a nie stanowi jednolitego ciągu treści. Ten właśnie problem w HTML5 rozwiązano przy użyciu nowych elementów sekcyjnych i reguł dotyczących stosowania istniejących nagłówków. Jeśli używasz nowych elementów sekcyjnych, to mogę przekazać ci poniższy kod HTML:

<article>
  <header>
    <h1>Wpis</h1>
  </header>
  <p>Lorem ipsum la la la…</p>
</article>

Ty możesz ten kod skopiować i wkleić w dowolnym miejscu na swojej stronie nic w nim nie zmieniając. Zawartość elementu h1 nie stanowi tu problemu, ponieważ całość znajduje się w elemencie article. Element article w zarysie dokumentu stanowi samodzielny węzeł a element h1 jest jego tytułem. Pozostałe elementy sekcyjne na tej samej stronie pozostaną na swoim odpowiednim poziomie zagnieżdżenia.

• Wprowadzenie
• Typ dokumentu HTML5
• Element html
• Element head
• Kodowanie znaków w HTML5
• Relacje między dokumentami
• Elementy semantyczne HTML5
• Obsługa nieznanych elementów
• Nagłówki w HTML5
• Artykuły w HTML5
• Elementy daty i godziny HTML5
• Nawigacja w HTML5
• Stopka strony w HTML5