Co oznacza semantyka w HTML
Semantyczny HTML polega na używaniu elementów zgodnie z ich przeznaczeniem. Zamiast budować całą stronę z samych <div>, stosuje się znaczące elementy, takie jak <header>, <nav>, <main>, <article>, <section>, <aside> i <footer>.
Dlaczego to ważne
- ułatwia zrozumienie struktury dokumentu przez wyszukiwarki,
- poprawia dostępność dla czytników ekranu,
- upraszcza utrzymanie kodu przez deweloperów,
- wspiera SEO techniczne.
Przykłady
<nav>dla nawigacji głównej,<article>dla niezależnej treści, np. wpisu blogowego,<section>dla logicznych sekcji strony,<button>dla akcji, a nie<div>udającego przycisk.
Częste błędy
- nadużywanie
<div>i<span>, - brak hierarchii nagłówków
h1-h6, - używanie tagów tylko dla efektu wizualnego,
- brak odpowiednich atrybutów ARIA tam, gdzie są potrzebne.