Kurs HTML

Strukturyzowanie głównej treści

Podczas gdy <header>, <footer>, <nav> i <main> definiują ogólną strukturę strony, znaczniki <article> i <section> służą do bardziej szczegółowego podziału i organizacji samej treści wewnątrz <main> (lub czasem wewnątrz innych elementów, jak <aside>).

Rozróżnienie między nimi jest kluczowe dla poprawnej semantyki dokumentu, choć czasem może wydawać się niejednoznaczne.

Element <article>: Samodzielna treść

Element <article> reprezentuje kompletną, samodzielną jednostkę treści, która ma sens sama w sobie i mogłaby być potencjalnie dystrybuowana lub ponownie wykorzystana niezależnie od reszty strony (np. w kanale RSS, jako osobny dokument).

Typowe przykłady użycia <article>:

• Post na blogu
• Artykuł informacyjny
• Wpis na forum
• Komentarz użytkownika
• Opis produktu w sklepie internetowym
• Interaktywny widżet lub aplikacja

Każdy element <article> powinien być identyfikowalny, zazwyczaj poprzez posiadanie własnego nagłówka (<h1>-<h6>), często umieszczonego wewnątrz elementu <header> należącego do tego <article>.

Przykład użycia <article> dla posta na blogu:

<main>
  <article class="blog-post">
    <header>
      <h2>Jak efektywnie uczyć się HTML?</h2>
      <p>Autor: Anna Nowak, Opublikowano: <time datetime="2025-04-30">30 kwietnia 2025</time></p>
    </header>
    
    <p>Nauka HTML może być przyjemna i satysfakcjonująca...</p>
    <!-- ... dalsza treść posta ... -->
    
    <footer>
      <p>Komentarze (3)</p>
    </footer>
  </article>
  
  <article class="blog-post">
    <header>
      <h2>Nowości w CSS 2025</h2>
      <p>Autor: Piotr Zieliński, Opublikowano: <time datetime="2025-04-28">28 kwietnia 2025</time></p>
    </header>
    
    <p>Najnowsze funkcje CSS, które warto znać...</p>
    <!-- ... dalsza treść posta ... -->
  </article>
</main>Kopiuj

Element <section>: Tematyczna grupa treści

Element <section> reprezentuje ogólną sekcję dokumentu lub aplikacji. Służy do grupowania powiązanych tematycznie treści, zazwyczaj (choć nie zawsze) posiadających własny nagłówek (<h1>-<h6>).

<section> używamy, gdy chcemy podzielić większą całość na logiczne części, które niekoniecznie są samodzielne w taki sposób jak <article>.

Typowe przykłady użycia <section>:

• Rozdziały książki lub długiego artykułu.
• Poszczególne zakładki w interfejsie z kartami (tabbed interface).
• Sekcje tematyczne na stronie głównej (np. "O nas", "Nasze usługi", "Kontakt").
• Grupy powiązanych elementów w formularzu (choć często lepszy jest <fieldset>).

Ważna zasada: Nie używaj <section> jako generycznego kontenera do stylizacji - do tego służy <div>. Używaj <section> tylko wtedy, gdy grupowana treść stanowi logiczną, tematyczną całość i zazwyczaj powinna mieć swój nagłówek.

Przykład użycia <section> na stronie głównej:

<main>
  <section id="o-nas" aria-labelledby="o-nas-heading">
    <h2 id="o-nas-heading">O Nas</h2>
    <p>Jesteśmy firmą z wieloletnim doświadczeniem...</p>
  </section>
  
  <section id="uslugi" aria-labelledby="uslugi-heading">
    <h2 id="uslugi-heading">Nasze Usługi</h2>
    <ul>
      <li>Tworzenie stron WWW</li>
      <li>Optymalizacja SEO</li>
      <li>Marketing internetowy</li>
    </ul>
  </section>
  
  <section id="kontakt" aria-labelledby="kontakt-heading">
    <h2 id="kontakt-heading">Kontakt</h2>
    <p>Skontaktuj się z nami...</p>
    <!-- Formularz kontaktowy -->
  </section>
</main>Kopiuj

Wskazówka dotycząca dostępności: Użycie aria-labelledby wskazującego na id nagłówka sekcji pomaga czytnikom ekranu lepiej zrozumieć strukturę i powiązać nagłówek z treścią sekcji.

<article> vs <section> vs <div> - Podsumowanie

• <article>: Używaj dla treści, która jest samodzielna, kompletna i potencjalnie redystrybuowalna.
• <section>: Używaj do grupowania tematycznie powiązanych treści w ramach większej całości. Zazwyczaj powinna mieć nagłówek.
• <div>: Używaj jako generycznego kontenera do celów stylizacji lub grupowania, gdy żaden inny, bardziej semantyczny element (jak <article>, <section>, <nav>, <aside>) nie pasuje.

Często zdarza się, że <article> zawiera w sobie elementy <section>, lub <section> zawiera w sobie elementy <article> (np. sekcja "Najnowsze posty" zawierająca kilka skróconych artykułów).

Zagnieżdżanie

Zarówno <article>, jak i <section> mogą być w sobie zagnieżdżane. Na przykład, komentarze do posta na blogu mogą być elementami <article> zagnieżdżonymi wewnątrz głównego <article> reprezentującego post.

<article> <!-- Post na blogu -->
  <h2>Tytuł Posta</h2>
  <p>Treść posta...</p>
  
  <section id="comments">
    <h3>Komentarze</h3>
    
    <article class="comment"> <!-- Pierwszy komentarz -->
      <header>
        <p>Autor: Użytkownik1</p>
      </header>
      <p>Treść komentarza...</p>
      
      <article class="comment-reply"> <!-- Odpowiedź na komentarz -->
        <header>
          <p>Autor: Użytkownik2</p>
        </header>
        <p>Treść odpowiedzi...</p>
      </article>
      
    </article>
    
    <article class="comment"> <!-- Drugi komentarz -->
      <!-- ... -->
    </article>
    
  </section>
</article>Kopiuj

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz strukturę HTML dla strony z przepisem kulinarnym. Użyj <article> dla całego przepisu. Wewnątrz <article> użyj <section> do oddzielenia listy składników od instrukcji przygotowania. Upewnij się, że każda sekcja i artykuł mają odpowiednie nagłówki.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przepis na Szarlotkę</title>
    <style>
        body { font-family: sans-serif; }
        article { border: 1px solid #ccc; padding: 15px; margin: 20px; }
        article header h2 { margin-top: 0; }
        section { margin-top: 20px; padding-top: 10px; border-top: 1px dashed #eee; }
        section h3 { margin-top: 0; }
    </style>
</head>
<body>

<main>
    <article>
        <header>
            <h2>Przepis na Domową Szarlotkę</h2>
            <p>Klasyczny przepis na pyszną szarlotkę.</p>
        </header>
        
        <section id="skladniki" aria-labelledby="skladniki-heading">
            <h3 id="skladniki-heading">Składniki</h3>
            <ul>
                <li>1.5 kg jabłek (najlepiej szara reneta)</li>
                <li>3 szklanki mąki pszennej</li>
                <li>1 kostka masła (200g)</li>
                <li>3/4 szklanki cukru</li>
                <li>2 jajka</li>
                <li>1 łyżeczka proszku do pieczenia</li>
                <li>Cynamon do smaku</li>
            </ul>
        </section>
        
        <section id="przygotowanie" aria-labelledby="przygotowanie-heading">
            <h3 id="przygotowanie-heading">Przygotowanie</h3>
            <ol>
                <li>Mąkę przesiać z proszkiem do pieczenia.</li>
                <li>Dodać zimne masło, posiekać nożem.</li>
                <li>Dodać cukier, jajka i szybko zagnieść ciasto.</li>
                <li>Podzielić ciasto na dwie części (większą i mniejszą), owinąć folią i włożyć do lodówki na ok. 30 minut.</li>
                <li>Jabłka obrać, usunąć gniazda nasienne i zetrzeć na tarce o grubych oczkach lub pokroić.</li>
                <li>Podsmażyć jabłka z cynamonem (można dodać trochę cukru, jeśli są kwaśne).</li>
                <li>Większą częścią ciasta wylepić dno formy.</li>
                <li>Wyłożyć jabłka.</li>
                <li>Mniejszą część ciasta zetrzeć na tarce na wierzch lub zrobić kratkę.</li>
                <li>Piec w temperaturze 180°C przez około 45-50 minut, do uzyskania złotego koloru.</li>
            </ol>
        </section>
        
        <footer>
            <p>Smacznego!</p>
        </footer>
    </article>
</main>

</body>
</html>Kopiuj