# Treść główna dokumentu HTML

Jak już zdążyliśmy zauważyć zawartość występująca w części BODY dokumentu HTML reprezentuje treść, która to treść ma zostać wyświetlona w oknie przeglądarki internetowej dla użytkownika odwiedzającego nasz dokument HTML.

W części BODY dokumentu HTML, czyli w zawartości elementu `body`, mogą występować różne elementy HTML reprezentujące różne treści.

Przykład:

```html
<body>
  <!-- ELEMENT HEADER ELEMENTU BODY -->
  <header>
    <h1>Rzeczowo o rzeczach</h1>
  </header>

  <!-- ELEMENT ARTICLE ELEMENTU BODY -->
  <article>
    <header>
      <p>Opublikowano: 2016-01-01</p>
      <h1>Mój ulubiony kolor</h1>
    </header>

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

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

    <footer>
      <p>Autor: Jan Kowalski</p>

      <address>
        jankowalski@mail.com
      </address>
    </footer>
  </article>

  <!-- ELEMENT FOOTER ELEMENTU BODY -->
  <footer>
    <p>Autor: Grupa Rzeczowo o Rzeczach</p>

    <address>
      rzeczowoorzeczach@mail.com
    </address>
  </footer>
</body>
```

Nasz przykładowy kod HTML reprezentuje przykładową część BODY dokumentu HTML.

Nasza przykładowa część BODY dokumentu HTML posiada swój własny nagłówek (reprezentowany przez zawartość elementu `header`), swoją własną stopkę (reprezentowaną przez zawartość elementu `footer`) oraz swoją własną treść artykułu (reprezentowaną przez zawartość elementu `article`).

Zazwyczaj każdy użytkownik zapoznający się z treścią reprezentowaną przez zawartość naszego dokumentu HTML zorientuje się, gdzie znajduje się główny nagłówek danej strony internetowej, gdzie znajduje się główna stopka danej strony internetowej oraz (co najważniejsze) gdzie znajduje się główna treść danej strony internetowej (którą to treścią w tym wypadku jest treść mówiąca o naszym ulubionym kolorze).

Czy przeglądarka internetowa również będzie wiedziała, gdzie znajduje się zawartość, która z naszego założenia reprezentuje główną treść naszego dokumentu HTML?

Aby mieć pewność, że tak właśnie będzie, możemy skorzystać z elementu main.

Przykład:

```html
<body>
  <!-- ELEMENT HEADER ELEMENTU BODY -->
  <header>
    <h1>Rzeczowo o rzeczach</h1>
  </header>

  <!-- ELEMENT MAIN ELEMENTU BODY -->
  <main>
    <article>
      <header>
        <p>Opublikowano: 2016-01-01</p>
        <h1>Mój ulubiony kolor</h1>
      </header>

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

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

      <footer>
        <p>Autor: Jan Kowalski</p>

        <address>
          jankowalski@mail.com
        </address>
      </footer>
    </article>
  </main>

  <!-- ELEMENT FOOTER ELEMENTU BODY -->
  <footer>
    <p>Autor: Grupa Rzeczowo o Rzeczach</p>

    <address>
      rzeczowoorzeczach@mail.com
    </address>
  </footer>
</body>
```

Od tej pory nasz przykładowy kod HTML zawiera dodatkową informację dla przeglądarki internetowej o tym, że treścią główną występującą w zawartości naszego przykładowego dokumentu HTML jest treść reprezentowana przez zawartość elementu `main`.

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FWM2OhZkJqHfAY8jmPjGW%2FZrzut%20ekranu%202025-09-17%20o%2015.02.59.png?alt=media&#x26;token=22863a12-0062-4df3-875a-30a82eede527" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2F34niC2gp1p94eLS9w8Pr%2FZrzut%20ekranu%202025-09-17%20o%2015.03.08.png?alt=media&#x26;token=21d2a159-859d-43f6-b754-36c041f462b1" alt=""><figcaption></figcaption></figure>
