Ostatnio edytowany:

Ranga wartości treści

Autor: Virtual Patriot

Zapoznając się z elementami HTML należącymi do kategorii nagłówek zawartości dowiedzieliśmy się, że każdy ze wspomnianych elementów HTML posiada swoją własną rangę.

<h1></h1><!-- ELEMENT HTML O RANDZE 1 -->
  <h2></h2><!-- ELEMENT HTML O RANDZE 2 -->
    <h3></h3><!-- ELEMENT HTML O RANDZE 3 -->
      <h4></h4><!-- ELEMENT HTML O RANDZE 4 -->
        <h5></h5><!-- ELEMENT HTML O RANDZE 5 -->
          <h6></h6><!-- ELEMENT HTML O RANDZE 6 -->

Element h1 posiada najwyższą rangę. Element h6 posiada najniższą rangę. Element h2 posiada wyższą rangę od rangi elementu h3, lecz niższą rangę od rangi elementu h1. Element h3 posiada wyższą rangę od rangi elementu h4, lecz niższą rangę od rangi elementu h2 oraz jeszcze niższą rangę od rangi elementu h1 itd.

Ponadto wiemy już również, że każdy z elementów HTML należących do kategorii nagłówek zawartości może tworzyć swoją własną sekcję zawartości nieokreślonego typu, lecz dla nas w tej chwili najważniejszym jest przypomnienie sobie faktu, iż każdy element HTML należący do kategorii nagłówek zawartości może reprezentować tytuł sekcji zawartości określonego typu (tworzonej przez któryś z elementów HTML należących do kategorii sekcja zawartości) lub może reprezentować tytuł korzenia sekcji (tworzonego przez któryś z elementów HTML należących do kategorii korzeń sekcji).

Nie jest wymogiem, aby każdy element HTML należący do kategorii korzeń sekcji oraz każdy element HTML należący do kategorii sekcja zawartości posiadał tytuł, lecz takie elementy HTML jak: element "body", element "article" oraz element "section", zawsze powinny posiadać swój własny tytuł.

Przykład:

<body>
  <header>
    <!-- TYTUŁ KORZENIA SEKCJI TYPU BODY (RANGA 1) -->
    <h1>Rzeczowo o rzeczach</h1>
  </header>

  <nav>
    <a href="moj-ulubiony-kolor.html">Mój ulubiony kolor</a>
    <a href="moj-ulubiony-kwiat.html">Mój ulubiony kwiat</a>
    <a href="moj-ulubiony-owoc.html">Mój ulubiony owoc</a>
  </nav>

  <main>
    <article>
      <header>
        <p>Opublikowano: 2016-01-01</p>
        <!-- TYTUŁ SEKCJI ZAWARTOŚCI TYPU ARTICLE (RANGA 1) -->
        <h1>Mój ulubiony kolor</h1>
      </header>

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

      <section>
        <header>
          <!-- TYTUŁ SEKCJI ZAWARTOŚCI TYPU SECTION (RANGA 1) -->
          <h1>Dlaczego błękitny?</h1>
        </header>

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

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

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

  <footer>
    <p>Autor: Grupa Rzeczowo o Rzeczach</p>

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

Występujący w zawartości naszego przykładowego kodu HTML element body posiada swój własny tytuł w postaci ciągu znaków Rzeczowo o rzeczach, który to ciąg znaków reprezentowany jest przez zawartość elementu HTML posiadającego najwyższą rangę, czyli rangę 1.

Występujący w zawartości naszego przykładowego kodu HTML element article posiada swój własny tytuł w postaci ciągu znaków Mój ulubiony kolor, który to ciąg znaków reprezentowany jest przez zawartość elementu HTML posiadającego najwyższą rangę, czyli rangę 1.

Występujący w zawartości naszego przykładowego kodu HTML element section posiada swój własny tytuł w postaci ciągu znaków Dlaczego błękitny?, który to ciąg znaków reprezentowany jest przez zawartość elementu HTML posiadającego najwyższą rangę, czyli rangę 1.

Innymi słowy ze względu na to, iż każdy tytuł posiadany przez wspomniane elementy HTML jest reprezentowany przez element HTML posiadający najwyższą rangę, dla przeglądarki internetowej oznacza to, że najważniejszą treścią występującą w zawartości naszego przykładowego kodu HTML jest treść reprezentowana przez zawartość każdego ze wspomnianych elementów HTML. Między innymi oznacza to, że chcemy powiedzieć naszej przeglądarce internetowej, że treść reprezentowana przez zawartość elementu nav (ponieważ element nav znajduje się w zawartości elementu body) jest tak samo ważna, jak treść reprezentowana przez zawartość elementu article, co w tej sytuacji nie jest wcale prawdą, ponieważ w tym wypadku to właśnie zawartość elementu article reprezentuje główną treść danego dokumentu HTML, dlatego treść reprezentowana przez zawartość elementu article jest treścią ważniejszą od treści reprezentowanej przez zawartość elementu nav.

W części BODY dokumentu HTML powinien występować tylko jeden element h1 (chyba że chcemy podzielić element body na kilka części o najwyższej randze, lecz do wspomnianego celu wcale nie musimy wykorzystywać elementów HTML posiadających najwyższą rangę, ponieważ możemy skorzystać z elementów HTML posiadających niższą rangę). Wspomniany element h1 powinien reprezentować tytuł sekcji zawartości, której zawartość z naszego założenia reprezentuje główną treść danego dokumentu HTML (w niektórych sytuacjach to cała zawartość korzenia sekcji typu body reprezentuje główną treść dokumentu HTML). Natomiast pozostałe sekcje zawartości powinny posiadać swój własny tytuł reprezentowany przez element HTML posiadający niższą rangę od rangi 1 (w kodzie HTML powinna zostać zachowana kolejność od rangi wyższej do rangi niższej (w niektórych sytuacjach osobno dla korzenia sekcji typu body oraz osobno dla sekcji zawartości, której zawartość reprezentuje główną treść dokumentu HTML)).

Przykład:

<body>
  <header>
    <!-- TYTUŁ KORZENIA SEKCJI TYPU BODY (RANGA 2) -->
    <h2>Rzeczowo o rzeczach</h2>
  </header>

  <nav>
    <a href="moj-ulubiony-kolor.html">Mój ulubiony kolor</a>
    <a href="moj-ulubiony-kwiat.html">Mój ulubiony kwiat</a>
    <a href="moj-ulubiony-owoc.html">Mój ulubiony owoc</a>
  </nav>

  <main>
    <article>
      <header>
        <p>Opublikowano: 2016-01-01</p>
        <!-- TYTUŁ SEKCJI ZAWARTOŚCI TYPU ARTICLE (RANGA 1) -->
        <h1>Mój ulubiony kolor</h1>
      </header>

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

      <section>
        <header>
          <!-- TYTUŁ SEKCJI ZAWARTOŚCI TYPU SECTION (RANGA 2) -->
          <h2>Dlaczego błękitny?</h2>
        </header>

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

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

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

  <footer>
    <p>Autor: Grupa Rzeczowo o Rzeczach</p>

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

Od tej pory ze względu na to, iż tytuł elementu body reprezentowany jest przez element HTML posiadający rangę 2, nasz przykładowy kod HTML zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść reprezentowana przez zawartość wspomnianego elementu body nie jest treścią najważniejszą (co nie oznacza, że w zawartości wspomnianego elementu body nie może wystąpić treść ważna).

Od tej pory ze względu na to, iż tytuł elementu article reprezentowany jest przez element HTML posiadający rangę 1, nasz przykładowy kod HTML zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść reprezentowana przez zawartość wspomnianego elementu article jest treścią najważniejszą (co nie oznacza, że w zawartości wspomnianego elementu article nie może wystąpić treść mniej ważna).

Ponadto od tej pory ze względu na to, iż tytuł elementu section reprezentowany jest przez element HTML posiadający rangę 2, nasz przykładowy kod HTML zawiera dodatkową informację dla przeglądarki internetowej o tym, że treść reprezentowana przez zawartość wspomnianego elementu section nie jest treścią najważniejszą, lecz treść reprezentowana przez zawartość wspomnianego elementu section należy do treści najważniejszej, ponieważ wspomniany element section tworzy podsekcję sekcji zawartości typu article posiadającej tytuł o najwyższej randze.