Elementy semantyczne HTML5

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Elementy semantyczne HTML5 to znaczniki, które opisują znaczenie zawartości strony, a nie tylko jej wygląd. Dzięki nim kod HTML jest czytelniejszy dla programisty, przeglądarki, wyszukiwarki oraz technologii wspomagających, np. czytników ekranu.

Do typowych elementów semantycznych wprowadzonych lub upowszechnionych w HTML5 należą m.in.:

  • <header> - nagłówek strony lub sekcji, zwykle zawiera logo, tytuł, menu,
  • <nav> - blok nawigacji,
  • <main> - główna treść dokumentu,
  • <article> - samodzielna treść, np. wpis blogowy, artykuł, news,
  • <section> - logiczna sekcja tematyczna dokumentu,
  • <aside> - treść poboczna, np. panel boczny,
  • <footer> - stopka strony lub sekcji.

Przykład

<header>
  <h1>Portal informacyjny</h1>
</header>

<main>
  <article>
    <h2>Tytuł artykułu</h2>
    <section>
      <h3>Wprowadzenie</h3>
      <p>Treść sekcji artykułu.</p>
    </section>
  </article>
</main>

<footer>
  <p>Copyright 2026</p>
</footer>

Znaczenie na egzaminie

Jeśli w pytaniu pojawiają się znaczniki takie jak <header>, <article>, <section> i <footer>, należy kojarzyć je z HTML5. Nie są one typowe dla starszych standardów, takich jak HTML 4.01 Strict, HTML 4.01 Transitional czy XHTML 1.1.