Czym są semantyczne elementy HTML?
Semantyczne elementy HTML to znaczniki, które opisują rolę i znaczenie fragmentu strony, a nie tylko jego wygląd. Dzięki nim kod jest czytelniejszy dla programisty, przeglądarki i technologii wspomagających.
W HTML5 do najważniejszych elementów semantycznych należą:
- <header> – nagłówek strony lub sekcji,
- <nav> – nawigacja,
- <main> – główna treść dokumentu,
- <section> – wydzielona sekcja tematyczna,
- <article> – samodzielna treść, np. wpis,
- <aside> – treść poboczna, np. panel boczny,
- <footer> – stopka.
Dlaczego są ważne?
Semantyczne znaczniki:
- porządkują strukturę strony,
- ułatwiają analizę kodu,
- poprawiają dostępność,
- pomagają w interpretacji treści przez wyszukiwarki.
Przykład prostego układu strony
<body>
<header>Nagłówek</header>
<nav>Menu</nav>
<main>
<section>Treść główna</section>
<aside>Panel boczny</aside>
</main>
<footer>Stopka</footer>
</body>
Jak łączy się to z zadaniami egzaminacyjnymi?
W pytaniach o rozmieszczenie elementów na stronie często trzeba rozpoznać, który obszar odpowiada:
- nagłówkowi,
- menu,
- treści głównej,
- panelowi bocznemu,
- stopce.
Znajomość semantycznych elementów HTML pozwala szybko dopasować funkcję sekcji do jej położenia na schemacie. Jeśli element znajduje się na dole strony, zwykle odpowiada znacznikowi <footer>.
Najczęstszy błąd
Początkujący często używają wszędzie tylko elementów div. Jest to możliwe, ale mniej czytelne. W nowoczesnych stronach warto stosować znaczniki semantyczne tam, gdzie pasują do funkcji danego obszaru.