Ostatnio edytowany:

Zarys korzenia sekcji

Autor: Virtual Patriot

Wiedząc, jak w kodzie HTML możemy rozróżniać poszczególne korzenie sekcji, sekcje zawartości, tytuły, podsekcje oraz kilka innych rzeczy, które do tej pory poznaliśmy, możemy dowiedzieć się, jak jeden z mechanizmów przeglądarki internetowej analizuje zawartość części BODY dokumentu HTML, czyli zawartość korzenia sekcji typu body.

Spróbujmy przeanalizować następujący kod HTML:

<body>
  <h1>Moje ulubione rzeczy</h1>

  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest róża.</p>
    <p>Ponieważ róża to symbol miłości.</p>

    <figure>
      <h1>Fotografia róży</h1>
      <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
    </figure>
  </article>

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

    <div>
      <h2>Dlaczego błękitny?</h2>
      <p>Ponieważ błękitny to kolor nieba.</p>
    </div>
  </article>

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

    <section>
      <h1>Dlaczego czereśnia?</h1>
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </section>
  </article>
</body>

W naszym przykładowym kodzie HTML występują dwa elementy HTML tworzące korzeń sekcji.

Elementem HTML tworzącym pierwszy korzeń sekcji jest element body. Wspomniany element body tworzy korzeń sekcji typu body. Wspomniany korzeń sekcji typu body posiada swój własny tytuł w postaci ciągu znaków Moje ulubione rzeczy. Do wspomnianego korzenia sekcji typu body należy: sekcja zawartości typu article tworzona przez pierwszy element article, sekcja zawartości typu article tworzona przez drugi element article oraz sekcja zawartości typu article tworzona przez trzeci element article.

Elementem HTML tworzącym drugi korzeń sekcji jest element figure. Wspomniany element figure tworzy korzeń sekcji typu figure. Wspomniany korzeń sekcji typu figure posiada swój własny tytuł w postaci ciągu znaków Fotografia róży. Do wspomnianego korzenia sekcji typu figure należy: element h1 oraz element img.

<body><!-- POCZĄTEK KORZENIA SEKCJI TYPU BODY -->
  <h1>Moje ulubione rzeczy</h1><!-- TYTUŁ -->

  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest róża.</p>
    <p>Ponieważ róża to symbol miłości.</p>

    <figure><!-- POCZĄTEK KORZENIA SEKCJI TYPU FIGURE -->
      <h1>Fotografia róży</h1><!-- TYTUŁ -->
      <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
    </figure><!-- KONIEC KORZENIA SEKCJI TYPU FIGURE -->
  </article>

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

    <div>
      <h2>Dlaczego błękitny?</h2>
      <p>Ponieważ błękitny to kolor nieba.</p>
    </div>
  </article>

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

    <section>
      <h1>Dlaczego czereśnia?</h1>
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </section>
  </article>
</body><!-- KONIEC KORZENIA SEKCJI TYPU BODY -->

Ponadto w naszym przykładowym kodzie HTML występują trzy sekcje zawartości określonego typu będące dodatkowo podsekcjami określonego typu korzenia sekcji typu body.

Elementem HTML tworzącym pierwszą sekcję zawartości określonego typu będącą podsekcją określonego typu korzenia sekcji typu body jest pierwszy element article. Wspomniany element article tworzy podsekcję typu article. Wspomniana podsekcja typu article posiada swój własny tytuł w postaci ciągu znaków Mój ulubiony kwiat. Do wspomnianej podsekcji typu article należy: element h1, dwa elementy p oraz korzeń sekcji typu figure tworzony przez element figure.

Elementem HTML tworzącym drugą sekcję zawartości określonego typu będącą podsekcją określonego typu korzenia sekcji typu body jest drugi element article. Wspomniany element article tworzy podsekcję typu article. Wspomniana podsekcja typu article posiada swój własny tytuł w postaci ciągu znaków Mój ulubiony kolor. Do wspomnianej podsekcji typu article należy: element h1, element p, element div oraz sekcja zawartości nieokreślonego typu tworzona przez element h2.

Elementem HTML tworzącym trzecią sekcję zawartości określonego typu będącą podsekcją określonego typu korzenia sekcji typu body jest trzeci element article. Wspomniany element article tworzy podsekcję typu article. Wspomniana podsekcja typu article posiada swój własny tytuł w postaci ciągu znaków Mój ulubiony owoc. Do wspomnianej podsekcji typu article należy: element h1, element p oraz sekcja zawartości typu section tworzona przez element section.

<body>
  <h1>Moje ulubione rzeczy</h1>

  <article><!-- POCZĄTEK PIERWSZEJ SEKCJI ZAWARTOŚCI TYPU ARTICLE -->
    <h1>Mój ulubiony kwiat</h1><!-- TYTUŁ -->
    <p>Moim ulubionym kwiatem jest róża.</p>
    <p>Ponieważ róża to symbol miłości.</p>

    <figure>
      <h1>Fotografia róży</h1>
      <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
    </figure>
  </article><!-- KONIEC PIERWSZEJ SEKCJI ZAWARTOŚCI TYPU ARTICLE -->

  <article><!-- POCZĄTEK DRUGIEJ SEKCJI ZAWARTOŚCI TYPU ARTICLE -->
    <h1>Mój ulubiony kolor</h1><!-- TYTUŁ -->
    <p>Moim ulubionym kolorem jest kolor błękitny.</p>

    <div>
      <h2>Dlaczego błękitny?</h2>
      <p>Ponieważ błękitny to kolor nieba.</p>
    </div>
  </article><!-- KONIEC DRUGIEJ SEKCJI ZAWARTOŚCI TYPU ARTICLE -->

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

    <section>
      <h1>Dlaczego czereśnia?</h1>
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </section>
  </article><!-- KONIEC TRZECIEJ SEKCJI ZAWARTOŚCI TYPU ARTICLE -->
</body>

Ponadto w naszym przykładowym kodzie HTML występuje jedna sekcja zawartości nieokreślonego typu będąca dodatkowo podsekcją nieokreślonego typu sekcji zawartości typu article.

Elementem HTML tworzącym sekcję zawartości nieokreślonego typu będącą podsekcją nieokreślonego typu sekcji zawartości typu article jest pierwszy element h2. Wspomniana podsekcja nieokreślonego typu posiada swój własny tytuł w postaci ciągu znaków Dlaczego błękitny?. Do wspomnianej podsekcji nieokreślonego typu należy: element h2 oraz element p.

<body>
  <h1>Moje ulubione rzeczy</h1>

  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest róża.</p>
    <p>Ponieważ róża to symbol miłości.</p>

    <figure>
      <h1>Fotografia róży</h1>
      <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
    </figure>
  </article>

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

    <div>
      <!-- POCZĄTEK SEKCJI ZAWARTOŚCI NIEOKREŚLONEGO TYPU -->
      <h2>Dlaczego błękitny?</h2><!-- TYTUŁ -->
      <p>Ponieważ błękitny to kolor nieba.</p>
    </div>
    <!-- KONIEC SEKCJI ZAWARTOŚCI NIEOKREŚLONEGO TYPU -->
  </article>

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

    <section>
      <h1>Dlaczego czereśnia?</h1>
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </section>
  </article>
</body>

Ponadto w naszym przykładowym kodzie HTML występuje jedna sekcja zawartości określonego typu będąca dodatkowo podsekcją określonego typu sekcji zawartości typu article.

Elementem HTML tworzącym sekcję zawartości określonego typu będącą podsekcją określonego typu sekcji zawartości typu article jest pierwszy element section. Wspomniana podsekcja typu section posiada swój własny tytuł w postaci ciągu znaków Dlaczego czereśnia?. Do wspomnianej podsekcji typu section należy: element h1 oraz element p.

<body>
  <h1>Moje ulubione rzeczy</h1>

  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest róża.</p>
    <p>Ponieważ róża to symbol miłości.</p>

    <figure>
      <h1>Fotografia róży</h1>
      <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
    </figure>
  </article>

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

    <div>
      <h2>Dlaczego błękitny?</h2>
      <p>Ponieważ błękitny to kolor nieba.</p>
    </div>
  </article>

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

    <section><!-- POCZĄTEK SEKCJI ZAWARTOŚCI TYPU SECTION -->
      <h1>Dlaczego czereśnia?</h1><!-- TYTUŁ -->
      <p>Ponieważ uwielbiam ten czereśniowy smak.</p>
    </section><!-- KONIEC SEKCJI ZAWARTOŚCI TYPU SECTION -->
  </article>
</body>

To nie koniec przygody z korzeniami sekcji oraz z sekcjami zawartości. Kolejne zagadnienia poznamy wkrótce.