Ostatnio edytowany:

Treść główna dokumentu HTML

Autor: Virtual Patriot

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:

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

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

Maksymalnie jeden element "main" może znaleźć się w części BODY dokumentu HTML.

W elemencie "main" nie powinna znajdować się zawartość, która powtarzana jest w obrębie wszystkich podstron danego serwisu internetowego, np. zawartość głównego nagłówka strony, zawartość głównej stopki strony, zawartość głównego menu nawigacji itp.