Obszar nagłówka

Jak już wiemy z poprzednich części tego kursu HTML każdy element HTML należący do kategorii sekcja zawartości, jak również każdy element HTML należący do kategorii korzeń sekcji może posiadać swój własny nagłówek reprezentowany przez któryś z elementów HTML należących do kategorii nagłówek zawartości.

Przykład:

<article>
  <h1>Mój ulubiony kolor</h1>

  <p>
    Moim ulubionym kolorem jest kolor błękitny.
  </p>

  <p>
    Ponieważ błękitny to kolor nieba.
  </p>
</article>

W naszym przykładowym kodzie HTML występuje jeden element HTML, który może posiadać swój własny nagłówek. Wspomnianym elementem HTML jest element article tworzący sekcję zawartości typu article. Wspomniany element article posiada swój własny nagłówek reprezentowany przez element h1. Wspomniany element h1 reprezentuje tytuł dla treści reprezentowanej przez zawartość wspomnianego elementu article. Wspomnianym tytułem w tym wypadku jest tytuł: Mój ulubiony kolor.

Nagłówek elementu HTML jest swego rodzaju wstępem do treści reprezentowanej przez pozostałą zawartość tegoż elementu HTML.

W sytuacji gdy chcemy, aby nagłówek interesującego nas elementu HTML nie składał się wyłącznie z elementu HTML należącego do kategorii nagłówek zawartości lub w sytuacji gdy chcemy wskazać przeglądarce internetowej, że to właśnie te, a nie inne elementy HTML stanowią nagłówek interesującego nas elementu HTML, wtedy możemy skorzystać z elementu header.

Przykład:

<article>
  <header><!-- POCZĄTEK OBSZARU NAGŁÓWKA SEKCJI ZAWARTOŚCI TYPU ARTICLE -->
    <p>Opublikowano: 2016-01-01</p>
    <h1>Mój ulubiony kolor</h1>
    <p>Autor: Jan Kowalski</p>
  </header><!-- KONIEC OBSZARU NAGŁÓWKA SEKCJI ZAWARTOŚCI TYPU ARTICLE -->

  <p>
    Moim ulubionym kolorem jest kolor błękitny.
  </p>

  <p>
    Ponieważ błękitny to kolor nieba.
  </p>
</article>

Od tej pory nasz przykładowy kod HTML zawiera dodatkową informację dla przeglądarki internetowej o tym, że nagłówek naszego przykładowego elementu article tworzony jest przez zawartość pierwszego elementu p, zawartość pierwszego elementu h1 oraz zawartość drugiego elementu p elementu header występującego w zawartości naszego przykładowego elementu article.