Nagłówek treści

Załóżmy, że chcemy, aby w oknie przeglądarki internetowej została wyświetlona treść, która będzie informowała nas o naszych ulubionych rzeczach.

Przykład:

Moim ulubionym kolorem jest kolor błękitny.

Moim ulubionym kwiatem jest róża.

Moim ulubionym owocem jest czereśnia.

Rezultat:

Pierwszą informacją, którą zawiera w sobie nasza przykładowa treść jest informacja o tym, iż naszym ulubionym kolorem jest kolor błękitny.

Drugą informacją, którą zawiera w sobie nasza przykładowa treść jest informacja o tym, iż naszym ulubionym kwiatem jest róża.

Trzecią informacją, którą zawiera w sobie nasza przykładowa treść jest informacja o tym, iż naszym ulubionym owocem jest czereśnia.

Innymi słowy nasza przykładowa treść zawiera w sobie trzy różne informacje należące do tej samej grupy informacji, czyli informacji o naszych ulubionych rzeczach.

Aby nieco bardziej poprawić czytelność oraz znaczenie naszej przykładowej treści możemy skorzystać z elementów p oraz elementów hr.

Przykład:

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

<hr>

<p>
  Moim ulubionym kwiatem jest róża.
</p>

<hr>

<p>
  Moim ulubionym owocem jest czereśnia.
</p>

Rezultat:

Element hr jest informacją dla przeglądarki internetowej o tym, że właśnie w tym miejscu w kodzie HTML występuje przejście tematyczne pomiędzy dwoma akapitami treści.

W naszym przykładzie akapity treści reprezentowane są przez elementy p.

W naszym przykładzie pierwszy element hr oznacza przejście tematyczne pomiędzy pierwszym, a drugim elementem p. W naszym przykładzie wspomniane przejście tematyczny dotyczy tego, iż w drugim akapicie treści jest już mowa o naszym ulubionym kwiecie, a nie o naszym ulubionym kolorze.

W naszym przykładzie drugi element hr oznacza przejście tematyczne pomiędzy drugim, a trzecim elementem p. W naszym przykładzie wspomniane przejście tematyczny dotyczy tego, iż w trzecim akapicie treści jest już mowa o naszym ulubionym owocu, a nie o naszym ulubionym kwiecie.

Dzięki elementom p oraz elementom hr nasza przykładowa treść stała się bardziej czytelna dla nas oraz bardziej zrozumiała dla przeglądarki internetowej, jednak jeżeli chcemy o wiele bardziej poprawić czytelność oraz znaczenie naszej przykładowej treści, wtedy możemy skorzystać z elementów HTML należących do kategorii nagłówek zawartości , dzięki czemu dla naszej przykładowej treści możemy utworzyć nagłówek, czyli dodatkowy tytuł, który będzie widoczny zarówno dla nas, jak i dla przeglądarki internetowej.

Przykład:

<h1>Mój ulubiony kolor</h1>
<p>
  Moim ulubionym kolorem jest kolor błękitny.
</p>

<h1>Mój ulubiony kwiat</h1>
<p>
  Moim ulubionym kwiatem jest róża.
</p>

<h1>Mój ulubiony owoc</h1>
<p>
  Moim ulubionym owocem jest czereśnia.
</p>

Rezultat:

Od tej pory w naszym przykładowym kodzie HTML każda treść reprezentowana przez zawartość elementu p posiada swój własny nagłówek, czyli tytuł.

Treść reprezentowana przez zawartość pierwszego elementu p posiada swój własny tytuł reprezentowany przez zawartość elementu h1, którą to zawartością w tym wypadku jest ciąg znaków Mój ulubiony kolor.

Treść reprezentowana przez zawartość drugiego elementu p posiada swój własny tytuł reprezentowany przez zawartość elementu h1, którą to zawartością w tym wypadku jest ciąg znaków Mój ulubiony kwiat.

Treść reprezentowana przez zawartość trzeciego elementu p posiada swój własny tytuł reprezentowany przez zawartość elementu h1, którą to zawartością w tym wypadku jest ciąg znaków Mój ulubiony owoc.

Jak już wiemy z poprzednich części tego kursu HTML, elementy HTML należące do kategorii nagłówek zawartości oprócz reprezentowania tytułu tworzą różne sekcje zawartości nieokreślonego typu. Innymi słowy w naszym przykładowym kodzie HTML występują trzy sekcje zawartości nieokreślonego typu.

<!-- POCZĄTEK PIERWSZEJ SEKCJI ZAWARTOŚCI NIEOKREŚLONEGO TYPU -->
<h1>Mój ulubiony kolor</h1>
<p>
  Moim ulubionym kolorem jest kolor błękitny.
</p>
<!-- KONIEC PIERWSZEJ SEKCJI ZAWARTOŚCI NIEOKREŚLONEGO TYPU -->

<!-- POCZĄTEK DRUGIEJ SEKCJI ZAWARTOŚCI NIEOKREŚLONEGO TYPU -->
<h1>Mój ulubiony kwiat</h1>
<p>
  Moim ulubionym kwiatem jest róża.
</p>
<!-- KONIEC DRUGIEJ SEKCJI ZAWARTOŚCI NIEOKREŚLONEGO TYPU -->

<!-- POCZĄTEK TRZECIEJ SEKCJI ZAWARTOŚCI NIEOKREŚLONEGO TYPU -->
<h1>Mój ulubiony owoc</h1>
<p>
  Moim ulubionym owocem jest czereśnia.
</p>
<!-- KONIEC TRZECIEJ SEKCJI ZAWARTOŚCI NIEOKREŚLONEGO TYPU -->

Aby jeszcze bardziej poprawić (dla przeglądarki internetowej) czytelność naszego kodu HTML możemy skorzystać z sekcji zawartości określonego typu, które (jak już wiemy z poprzednich części tego kursu HTML) może tworzyć któryś z elementów HTML należących do kategorii sekcja zawartości . Innymi słowy czas poznać, jakiego typu treść może być reprezentowana przez poszczególne sekcje zawartości określonego typu.