Ostatnio edytowany:

Podsekcja sekcji zawartości określonego typu

Autor: Virtual Patriot

Każda sekcja zawartości określonego typu może posiadać swoją własną podsekcję określonego typu.

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

Przykład:

<article>
  <!-- SEKCJA ZAWARTOŚCI TYPU ARTICLE -->
  <h1>Mój ulubiony kwiat</h1>

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

  <section>
    <!--
      PIERWSZA PODSEKCJA TYPU SECTION
      SEKCJI ZAWARTOŚCI TYPU ARTICLE
    -->
    <h1>Dlaczego róża?</h1>

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

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

Kolejny przykład:

<article>
  <!-- SEKCJA ZAWARTOŚCI TYPU ARTICLE -->
  <h1>Mój ulubiony kwiat</h1>

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

  <section>
    <!--
      PIERWSZA PODSEKCJA TYPU SECTION
      SEKCJI ZAWARTOŚCI TYPU ARTICLE
    -->
    <h1>Dlaczego róża?</h1>

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

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

Każda sekcja zawartości określonego typu może posiadać swoją podsekcję nieokreślonego typu.

Umieszczając w zawartości elementu HTML tworzącego interesującą nas sekcję zawartości określonego typu (po elemencie HTML reprezentującym tytuł) element HTML posiadający niższą rangę, niż ranga posiadana przez element HTML reprezentujący tytuł wspomnianej sekcji zawartości określonego typu (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ącej już sekcji zawartości określonego typu.

Przykład:

<article>
  <!-- SEKCJA ZAWARTOŚCI TYPU ARTICLE POSIADAJĄCA 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)
      SEKCJI ZAWARTOŚCI TYPU ARTICLE POSIADAJĄCEJ 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)
      SEKCJI ZAWARTOŚCI TYPU ARTICLE POSIADAJĄCEJ TYTUŁ (O RANDZE 1)
    -->
    <h2>Fotografia róży</h2>
    <img src="http://webkod.pl/files/html/kwiat-01.png" alt="czerwona róża">
  </div>
</article>

Kolejny przykład:

<article>
  <!-- SEKCJA ZAWARTOŚCI TYPU ARTICLE POSIADAJĄCA 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)
      SEKCJI ZAWARTOŚCI TYPU ARTICLE POSIADAJĄCEJ 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)
        SEKCJI ZAWARTOŚCI TYPU ARTICLE POSIADAJĄCEJ TYTUŁ (O RANDZE 1)
      -->
      <h3>Miłość</h3>
      <img src="http://webkod.pl/files/html/symbol-01.png" alt="czerwone serce">
    </div>
  </div>
</article>

Gdy interesująca nas sekcja zawartości określonego typu została podzielona na kilka części, wtedy poszczególne części wspomnianej interesującej nas sekcji zawartości określonego typu mogą posiadać (według zasad, które poznaliśmy w tej części kursu HTML) podsekcje określonego lub nieokreślonego typu.

Przykład:

<article>
  <!--
    SEKCJA ZAWARTOŚCI TYPU ARTICLE NIEPOSIADAJĄCA 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" -->
    <h1>Mój ulubiony kolor</h1>

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

    <section>
      <!--
        PIERWSZA PODSEKCJA TYPU SECTION
        PIERWSZEJ CZĘŚCI SEKCJI TYPU ARTICLE
      -->
      <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 SEKCJI TYPU ARTICLE
      -->
      <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 SEKCJI TYPU ARTICLE
      -->
      <h1>Dlaczego róża?</h1>

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

Kolejny przykład:

<article>
  <!--
    SEKCJA ZAWARTOŚCI TYPU ARTICLE NIEPOSIADAJĄCA 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)
        SEKCJI ZAWARTOŚCI TYPU ARTICLE
      -->
      <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)
        SEKCJI ZAWARTOŚCI TYPU ARTICLE
      -->
      <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)
        SEKCJI ZAWARTOŚCI TYPU ARTICLE
      -->
      <h2>Dlaczego róża?</h2>

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