Znaczniki semantyczne: header nav main article footer

Semantyczny HTML wykorzystuje elementy opisujące znaczenie treści, a nie tylko jej wygląd. Element <article> informuje: „to samodzielny fragment treści”. Ogólny element <div> nie przekazuje żadnej informacji.

Pierwsi twórcy stron internetowych budowali układy wyłącznie z elementów <div> i <span>. Czytniki ekranu nie potrafiły odróżnić nawigacji od treści ani reklam. Wyszukiwarki musiały zgadywać strukturę strony.

Element <header> zawiera treść wprowadzającą strony lub sekcji: zwykle logo, nazwę witryny i nawigację. Strona może mieć wiele elementów header — jeden dla witryny i po jednym dla każdego artykułu.

Używaj elementu <nav> do opakowywania zestawów odnośników nawigacyjnych: głównego menu, ścieżki nawigacyjnej lub spisu treści. Czytniki ekranu informują o punktach orientacyjnych nawigacji, dzięki czemu użytkownicy mogą przejść bezpośrednio do nich lub je pominąć.

Na każdej stronie powinien znajdować się dokładnie jeden element <main>. Zawiera on dominującą treść unikatową dla tej strony — nie powtarzalne elementy, takie jak nawigacja czy stopka. Technologie asystujące pozwalają użytkownikom przejść bezpośrednio do elementu main.

Element <article> opakowuje treść, która ma sens sama w sobie i może być rozpowszechniana niezależnie: wpis na blogu, wiadomość, komentarz użytkownika lub karta produktu. Warto zadać sobie pytanie: „Czy ta treść miałaby sens po skopiowaniu jej do innej witryny?”

Element <section> grupuje powiązaną treść, która należy do jednej całości — rozdziały, karty lub obszary tematyczne. Każda sekcja zazwyczaj ma nagłówek. Jeśli treść mogłaby funkcjonować samodzielnie, należy zamiast niej użyć article.

Element <aside> zawiera treść luźno związaną z otaczającą ją treścią: panele boczne, wyróżnione cytaty, reklamy lub powiązane odnośniki. Czytniki ekranu przedstawiają go jako uzupełniający punkt orientacyjny.

Element <footer> zawiera informacje dotyczące elementu, w którym się znajduje: informacje o prawach autorskich, odnośniki kontaktowe i powiązane dokumenty. Podobnie jak header, strona może mieć wiele elementów footer.

Używaj nagłówków do tworzenia logicznego konspektu dokumentu. Na każdej stronie powinien znajdować się tylko jeden element <h1>. Podnagłówki powinny używać h2, a podpodnagłówki — h3 i tak dalej. Nie pomijaj poziomów ani nie używaj nagłówków wyłącznie ze względu na ich rozmiar wizualny.

Wyszukiwarki wykorzystują strukturę semantyczną do rozumienia treści strony — strona z prawidłowymi punktami orientacyjnymi i hierarchią nagłówków często zajmuje wyższą pozycję w wynikach. Użytkownicy czytników ekranu poruszają się za pomocą punktów orientacyjnych i nagłówków, dlatego semantyka jest bezpośrednio związana z dostępnością.

Jaki element powinien zawierać główną, unikatową treść strony (występującą dokładnie raz)?

Używaj elementów <header>, <nav>, <main>, <article>, <section>, <aside> i <footer>, aby nadać dokumentowi strukturę rozumianą przez przeglądarki, wyszukiwarki i czytniki ekranu.