11. Zaawansowane semantyczne tagi dla treści

Poznaj tagi, które dodają więcej znaczenia do treści – artykuły, figury, daty, rozwijane sekcje.

<article> – samodzielna, niezależna treść

<article>
  <header>
    <h2>Tytuł posta</h2>
    <p>2 marca 2026</p>
  </header>
  <p>Treść, która mogłaby istnieć osobno.</p>
</article>

<figure> + <figcaption> – obraz z opisem

<figure>
  <img src="wykres.jpg" alt="Wykres sprzedaży 2025">
  <figcaption>Źródło: dane wewnętrzne, 2025</figcaption>
</figure>

<time> – precyzyjna data/godzina (maszynowo czytelna)

<time datetime="2026-03-02T14:30+01:00">2 marca 2026, godz. 14:30</time>

<details> + <summary> – rozwijany blok

<details>
  <summary>Co to jest HTML5?</summary>
  <p>Piąta główna rewizja języka HTML...</p>
</details>

Zadanie

Wstaw do index.html:

• jedno <article> z nagłówkiem i treścią
• <figure> z obrazem i podpisem
• dwie daty w <time>
• sekcję FAQ w <details>