# 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:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FIGFcPQzqZkYUIxbFw2mU%2FZrzut%20ekranu%202025-09-17%20o%2014.51.50.png?alt=media&#x26;token=f14b8c45-1e3f-40d4-9383-8e7430cc8d01" alt=""><figcaption></figcaption></figure>

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](https://webkod.pl/kurs-html/tagi/grupowanie-zawartosci/element-hr).

Przykład:

```html
<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:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FBt78jLWVS2UH3ELLh9dN%2FZrzut%20ekranu%202025-09-17%20o%2014.52.13.png?alt=media&#x26;token=6c7680b0-4b6d-42eb-bb32-6bfe0bab9a30" alt=""><figcaption></figcaption></figure>

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:

```html
<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:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2F0VwSCxWW9WUicdmGeIav%2FZrzut%20ekranu%202025-09-17%20o%2014.52.39.png?alt=media&#x26;token=76a719a9-a5e7-445e-849f-1f50ec977978" alt=""><figcaption></figcaption></figure>

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ł.

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FzWaoXhONHIz9QN5imMX8%2FZrzut%20ekranu%202025-09-17%20o%2014.52.56.png?alt=media&#x26;token=2f52da84-5703-4ad4-baf6-596c4f9b22dc" alt=""><figcaption></figcaption></figure>

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.

```html
<!-- 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.
