Ostatnio edytowany:

Podsekcja korzenia sekcji

Autor: Virtual Patriot

Każdy korzeń sekcji może posiadać swoją własną podsekcję określonego typu.

Umieszczając w zawartości elementu HTML tworzącego interesujący nas korzeń sekcji element HTML należący do kategorii sekcja zawartości, tworzymy w ten sposób podsekcję określonego typu istniejącego już korzenia sekcji.

Przykład:

<body>
  <!-- KORZEŃ SEKCJI TYPU BODY -->
  <h1>Mój ulubiony kwiat</h1>

  <p>
    Moim ulubionym kwiatem jest róża.
  </p>

  <section>
    <!--
      PIERWSZA PODSEKCJA TYPU SECTION
      KORZENIA SEKCJI TYPU BODY
    -->
    <h1>Dlaczego róża?</h1>

    <p>
      Ponieważ róża to symbol miłości.
    </p>
  </section>

  <section>
    <!--
      DRUGA PODSEKCJA TYPU SECTION
      KORZENIA SEKCJI TYPU BODY
    -->
    <h1>Fotografia róży</h1>
    <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
  </section>
</body>

Kolejny przykład:

<body>
  <!-- KORZEŃ SEKCJI TYPU BODY -->
  <h1>Mój ulubiony kwiat</h1>

  <p>
    Moim ulubionym kwiatem jest róża.
  </p>

  <section>
    <!--
      PIERWSZA PODSEKCJA TYPU SECTION
      KORZENIA SEKCJI TYPU BODY
    -->
    <h1>Dlaczego róża?</h1>

    <p>
      Ponieważ róża to symbol miłości.
    </p>

    <aside>
      <!--
        PIERWSZA PODSEKCJA TYPU ASIDE
        PIERWSZEJ PODSEKCJI TYPU SECTION
        KORZENIA SEKCJI TYPU BODY
      -->
      <h1>Miłość</h1>
      <img src="http://webkod.pl/files/html/symbol-01.png" alt="czerwone serce">
    </aside>
  </section>
</body>

Każdy korzeń sekcji może posiadać swoją podsekcję nieokreślonego typu.

Umieszczając w zawartości elementu HTML tworzącego interesujący nas korzeń sekcji (po elemencie HTML reprezentującym tytuł) element HTML posiadający niższą rangę, niż ranga posiadana przez element HTML reprezentujący tytuł wspomnianego korzenia sekcji (elementy HTML mogące posiadać swoją rangę oraz występujące w zawartości jakiegokolwiek innego elementu HTML należącego do kategorii korzeń sekcji lub należącego do kategorii sekcja zawartości nie są brane pod uwagę), tworzymy w ten sposób podsekcję nieokreślonego typu istniejącego już korzenia sekcji.

Przykład:

<body>
  <!-- KORZEŃ SEKCJI TYPU BODY POSIADAJĄCY TYTUŁ (O RANDZE 1) -->
  <h1>Mój ulubiony kwiat</h1>

  <p>
    Moim ulubionym kwiatem jest róża.
  </p>

  <div>
    <!--
      PIERWSZA PODSEKCJA NIEOKREŚLONEGO TYPU (O RANDZE 2)
      KORZENIA SEKCJI TYPU BODY POSIADAJĄCEGO TYTUŁ (O RANDZE 1)
    -->
    <h2>Dlaczego róża?</h2>

    <p>
      Ponieważ róża to symbol miłości.
    </p>
  </div>

  <div>
    <!--
      DRUGA PODSEKCJA NIEOKREŚLONEGO TYPU (O RANDZE 2)
      KORZENIA SEKCJI TYPU BODY POSIADAJĄCEGO TYTUŁ (O RANDZE 1)
    -->
    <h2>Fotografia róży</h2>
    <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
  </div>
</body>

Kolejny przykład:

<body>
  <!-- KORZEŃ SEKCJI TYPU BODY POSIADAJĄCY TYTUŁ (O RANDZE 1) -->
  <h1>Mój ulubiony kwiat</h1>

  <p>
    Moim ulubionym kwiatem jest róża.
  </p>

  <div>
    <!--
      PIERWSZA PODSEKCJA NIEOKREŚLONEGO TYPU (O RANDZE 2)
      KORZENIA SEKCJI TYPU BODY POSIADAJĄCEGO TYTUŁ (O RANDZE 1)
    -->
    <h2>Dlaczego róża?</h2>

    <p>
      Ponieważ róża to symbol miłości.
    </p>

    <div>
      <!--
        PIERWSZA PODSEKCJA NIEOKREŚLONEGO TYPU (O RANDZE 3)
        PIERWSZEJ PODSEKCJI NIEOKREŚLONEGO TYPU (O RANDZE 2)
        KORZENIA SEKCJI TYPU BODY POSIADAJĄCEGO TYTUŁ (O RANDZE 1)
      -->
      <h3>Miłość</h3>
      <img src="http://webkod.pl/files/html/symbol-01.png" alt="czerwone serce">
    </div>
  </div>
</body>

Gdy interesujący nas korzeń sekcji został podzielony na kilka części, wtedy poszczególne części wspomnianego interesującego nas korzenia sekcji mogą posiadać (według zasad, które poznaliśmy w tej części kursu HTML) podsekcje określonego lub nieokreślonego typu.

Przykład:

<body>
  <!--
    KORZEŃ SEKCJI TYPU BODY NIEPOSIADAJĄCY SWOJEGO TYTUŁU,
    LECZ PODZIELONY NA TRZY CZĘŚCI:
    - Mój ulubiony kolor (CZĘŚĆ I)
    - Mój ulubiony owoc (CZĘŚĆ II)
    - Mój ulubiony kwiat (CZĘŚĆ III)
  -->

  <div>
    <!-- CZĘŚĆ PIERWSZA O TYTULE: "Mój ulubiony kolor" -->
    <h1>Mój ulubiony kolor</h1>

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

    <section>
      <!--
        PIERWSZA PODSEKCJA TYPU SECTION
        PIERWSZEJ CZĘŚCI KORZENIA SEKCJI TYPU BODY
      -->
      <h1>Dlaczego błękitny?</h1>

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

  <div>
    <!-- CZĘŚĆ DRUGA O TYTULE: "Mój ulubiony owoc" -->
    <h1>Mój ulubiony owoc</h1>

    <p>
      Moim ulubionym owocem jest czereśnia.
    </p>

    <section>
      <!--
        PIERWSZA PODSEKCJA TYPU SECTION
        DRUGIEJ CZĘŚCI KORZENIA SEKCJI TYPU BODY
      -->
      <h1>Dlaczego czereśnia?</h1>

      <p>
        Ponieważ uwielbiam ten czereśniowy smak.
      </p>
    </section>
  </div>

  <div>
    <!-- CZĘŚĆ TRZECIA O TYTULE: "Mój ulubiony kwiat" -->
    <h1>Mój ulubiony kwiat</h1>

    <p>
      Moim ulubionym kwiatem jest róża.
    </p>

    <section>
      <!--
        PIERWSZA PODSEKCJA TYPU SECTION
        TRZECIEJ CZĘŚCI KORZENIA SEKCJI TYPU BODY
      -->
      <h1>Dlaczego róża?</h1>

      <p>
        Ponieważ róża to symbol miłości.
      </p>
    </section>
  </div>
</body>

Kolejny przykład:

<body>
  <!--
    KORZEŃ SEKCJI TYPU BODY NIEPOSIADAJĄCY SWOJEGO TYTUŁU,
    LECZ PODZIELONA NA TRZY CZĘŚCI:
    - Mój ulubiony kolor (CZĘŚĆ I)
    - Mój ulubiony owoc (CZĘŚĆ II)
    - Mój ulubiony kwiat (CZĘŚĆ III)
  -->

  <div>
    <!-- CZĘŚĆ PIERWSZA O TYTULE: "Mój ulubiony kolor" (RANGA 1) -->
    <h1>Mój ulubiony kolor</h1>

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

    <div>
      <!--
        PIERWSZA PODSEKCJA NIEOKREŚLONEGO TYPU (O RANDZE 2)
        PIERWSZEJ CZĘŚCI POSIADAJĄCEJ TYTUŁ (O RANDZE 1)
        KORZENIA SEKCJI TYPU BODY
      -->
      <h2>Dlaczego błękitny?</h2>

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

  <div>
    <!-- CZĘŚĆ DRUGA O TYTULE: "Mój ulubiony owoc" (RANGA 1) -->
    <h1>Mój ulubiony owoc</h1>

    <p>
      Moim ulubionym owocem jest czereśnia.
    </p>

    <div>
      <!--
        PIERWSZA PODSEKCJA NIEOKREŚLONEGO TYPU (O RANDZE 2)
        DRUGIEJ CZĘŚCI POSIADAJĄCEJ TYTUŁ (O RANDZE 1)
        KORZENIA SEKCJI TYPU BODY
      -->
      <h2>Dlaczego czereśnia?</h2>

      <p>
        Ponieważ uwielbiam ten czereśniowy smak.
      </p>
    </div>
  </div>

  <div>
    <!-- CZĘŚĆ TRZECIA O TYTULE: "Mój ulubiony kwiat" (RANGA 1) -->
    <h1>Mój ulubiony kwiat</h1>

    <p>
      Moim ulubionym kwiatem jest róża.
    </p>

    <div>
      <!--
        PIERWSZA PODSEKCJA NIEOKREŚLONEGO TYPU (O RANDZE 2)
        TRZECIEJ CZĘŚCI POSIADAJĄCEJ TYTUŁ (O RANDZE 1)
        KORZENIA SEKCJI TYPU BODY
      -->
      <h2>Dlaczego róża?</h2>

      <p>
        Ponieważ róża to symbol miłości.
      </p>
    </div>
  </div>
</body>