Semantyczne tagi HTML5
Opisuj strukturę strony poprawnie — dla SEO i dostępności
Semantyka — jak projekt architektoniczny
Wyobraź sobie budynek: wejście, hol, pokoje, kuchnia, wyjście. Gdyby każde pomieszczenie miało etykietę — architekt i każdy czytający projekt natychmiast rozumiałby co gdzie jest. Semantyczne tagi HTML5 to etykiety dla sekcji strony. Zamiast niezliczonych nienazwanych divów — znaczące nazwy: header, nav, main, footer.
Tagi semantyczne vs div
Przed HTML5 wszystkie bloki były robione z <div> — bezimiennego kontenera. To było złe: ani przeglądarka, ani Google, ani czytnik ekranu nie rozumiały co jest w środku.
HTML5 wprowadził tagi ze znaczeniem:
| Tag | Przeznaczenie |
|---|---|
<header> | Nagłówek strony lub sekcji (logo, nawigacja) |
<nav> | Blok nawigacyjny (menu, breadcrumbs) |
<main> | Główna treść strony (jeden na stronę) |
<section> | Tematyczna sekcja z nagłówkiem |
<article> | Samodzielna treść (artykuł, post, lekcja) |
<aside> | Pasek boczny, treść uzupełniająca |
<footer> | Stopka (copyright, linki) |
Dlaczego to ważne:
- Google lepiej indeksuje stronę (SEO)
- Czytniki ekranu dla osób niedowidzących działają poprawnie
- Współpracownicy szybciej rozumieją kod
Ta struktura to standard dla każdej nowoczesnej strony. Naucz się jej na pamięć.
Zapamiętaj główną zasadę: jeden <main> na stronę, <header> i <footer> mogą pojawiać się wewnątrz każdej <section>, <article> opisuje samodzielną treść (post blogowy, produkt, lekcja).