Elementy semantyczne HTML5 to znaczniki, które opisują znaczenie fragmentów strony, a nie tylko ich wygląd. Przykłady takich elementów to header, nav, article, section, aside i footer.
Po co stosuje się elementy semantyczne?
Elementy semantyczne ułatwiają:
- logiczne porządkowanie struktury strony,
- interpretację treści przez wyszukiwarki,
- dostępność dla czytników ekranowych,
- czytelność kodu HTML dla programisty.
Przykład:
<header>Logo i nagłówek strony</header>
<nav>Menu nawigacyjne</nav>
<article>Treść artykułu</article>
<footer>Stopka strony</footer>
Problem ze starszymi przeglądarkami
Starsze przeglądarki, które nie obsługują HTML5, mogą nie rozpoznawać nowych znaczników semantycznych. W efekcie mogą wyświetlać je nieprawidłowo, np. jako elementy liniowe zamiast blokowych.
Dlatego często dodaje się w CSS zapis:
header, nav, article, footer {
display: block;
}
Taka deklaracja informuje przeglądarkę, że wymienione elementy mają być prezentowane jako elementy blokowe, podobnie jak div.
Ważne na egzaminie
Deklaracja display: block dla elementów HTML5 nie służy spełnianiu standardu HTML5 ani CSS. Jej celem jest zapewnienie poprawnej prezentacji strony w starszych przeglądarkach, które nie wspierają HTML5.