W dzisiejszym świecie projektowania stron internetowych HTML semantyczny stanowi fundament nowoczesnego podejścia do tworzenia witryn. Pozwala budować bardziej uporządkowane, dostępne i przyjazne dla wyszukiwarek strony. W erze, gdy dostępność i SEO nabierają coraz większego znaczenia, znajomość i prawidłowe stosowanie znaczników semantycznych HTML5 może znacząco podnieść jakość Twoich projektów webowych.
Podstawowe znaczniki semantyczne HTML5
HTML5 wprowadził szereg znaczników semantycznych, które umożliwiają precyzyjne określenie roli poszczególnych elementów strony. Wcześniej większość struktury budowano przy pomocy generycznych elementów
Najważniejsze znaczniki semantyczne HTML5 to:
- <header> – zawiera elementy wprowadzające lub nawigacyjne dla sekcji lub całej strony, zazwyczaj logo, nagłówek strony, menu nawigacyjne
- <nav> – przeznaczony do grupowania linków nawigacyjnych, ułatwia czytelnikom ekranu identyfikację menu
- <main> – określa główną zawartość dokumentu, powinien występować tylko raz na stronie
- <article> – definiuje niezależny, samodzielny fragment treści, który mógłby istnieć niezależnie od reszty strony (np. wpis na blogu)
- <section> – reprezentuje tematycznie pogrupowaną zawartość, zwykle z własnym nagłówkiem
- <aside> – zawiera treści poboczne, luźno związane z główną zawartością (np. sidebary, wyjaśnienia, reklamy)
- <footer> – stopka sekcji lub całej strony, zawierająca informacje o autorach, prawach autorskich, linkach do dokumentów
Inne przydatne znaczniki semantyczne to <figure> i <figcaption> (do opisywania ilustracji), <time> (do oznaczania dat i czasu) czy <mark> (do wyróżniania tekstu w celach referencyjnych).
Zamiast tworzyć strukturę opartą wyłącznie na divach:
„`html
„`
Możemy wykorzystać znaczniki semantyczne, które jasno komunikują strukturę strony:
„`html
„`
Praktyczne zastosowanie znaczników semantycznych
Struktura typowej strony internetowej
Przyjrzyjmy się, jak mogłaby wyglądać podstawowa struktura strony z wykorzystaniem znaczników semantycznych HTML5:
„`html
Nazwa strony
Tytuł artykułu
Treść artykułu…
Podsekcja artykułu
Treść podsekcji…
„`
Ten przykład pokazuje, jak każdy element pełni konkretną, jasno zdefiniowaną rolę w strukturze dokumentu. Dzięki temu zarówno przeglądarki, jak i technologie asystujące mogą lepiej interpretować zawartość strony.
Zagnieżdżanie elementów semantycznych
Znaczniki semantyczne można zagnieżdżać, co pozwala na tworzenie bardziej złożonych struktur. Na przykład, element
„`html
Tytuł artykułu
Opublikowano:
Treść artykułu…
„`
Podobnie, element
