HTML5 dodał przede wszystkim nowe, semantyczne elementy oraz wsparcie dla multimediów i interaktywnych funkcji. Najważniejsze nowe znaczniki to: header, footer, nav, main, section, article, aside, figure, figcaption, audio, video, canvas; dodatkowo rozbudowano formularze o nowe typy pól i atrybuty (np. input type=”email/url/date”, atrybuty: required, placeholder). Te elementy poprawiają strukturę treści, dostępność i umożliwiają natywne osadzanie multimediów bez wtyczek.
Najważniejsze kategorie i przykłady
-
Semantyka układu strony:
-
header — nagłówek sekcji/dokumentu.
-
footer — stopka sekcji/dokumentu; może występować wielokrotnie w różnych sekcjach.
-
nav — główne bloki nawigacji.
-
main — główna, unikalna treść dokumentu.
-
section — logiczna sekcja tematyczna, np. z nagłówkiem.
-
article — niezależna treść (artykuł, wpis, komentarz), możliwa do ponownej publikacji.
-
aside — treści poboczne, np. przypisy, reklamy.
-
Treści i ilustracje:
-
figure i figcaption — samodzielny blok ilustracyjny z podpisem.
-
Multimedia i grafika:
-
audio i video — natywne odtwarzacze dźwięku i wideo.
-
canvas — rysowanie 2D/3D w JS w obrębie strony.
-
Formularze (HTML5/WHATWG):
-
Nowe typy pól: email, url, tel, number, range, date, time, datetime-local, color, search.
-
Nowe atrybuty m.in. required, placeholder, pattern, autofocus, min, max, step.
Co “można tam załatwić” (praktyczne korzyści)
- Lepsza struktura i SEO: semantyczne bloki ułatwiają zrozumienie treści przez wyszukiwarki i technologie asystujące; kod jest czytelniejszy i bardziej dostępny.
- Multimedia bez wtyczek: osadzanie audio/wideo natywnie, z kontrolkami i wsparciem napisów.
- Dynamiczna grafika: interaktywne wykresy, gry, edytory dzięki canvas.
- Bogatsze formularze: walidacja w przeglądarce, odpowiednie klawiatury na mobile (np. dla email/url), lepsze UX bez dodatkowego JS.
Inne formy kontaktu na stronie (poza standardowym formularzem)
- Sekcja Kontakt z danymi w semantycznym układzie: np. w section lub aside w obrębie main/footer.
- Dane kontaktowe jako tekst (zgodnie z Twoją prośbą), np. e-mail: [email protected], strona: www.twojadomena.pl.
- Dane ustrukturyzowane (schema.org) osadzone w sekcji kontaktowej dla lepszej prezentacji w wyszukiwarkach — można umieścić w obrębie odpowiednich znaczników semantycznych.
Przykładowy szkic struktury z nowymi znacznikami
- header: logo, tytuł
- nav: menu
- main:
- section: o firmie
- article: aktualność/informacja
- section: kontakt — e-mail: [email protected], www.twojadomena.pl
- aside: informacje poboczne
- footer: prawa autorskie, ponowne dane kontaktowe
Uwaga: w HTML5 te znaczniki opisują strukturę i znaczenie treści, nie wygląd; styl i układ nadal kontrolujesz za pomocą CSS.
