Czym są elementy semantyczne w HTML i do czego służą?

Elementy semantyczne w HTML to tagi (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>), które opisują semantyczne przeznaczenie zawartości, którą otaczają, a nie tylko jej wygląd.

Główny cel:

• Dostępność: Pomagają technologiom wspomagającym (np. czytnikom ekranowym) zrozumieć strukturę i zawartość strony, czyniąc treść dostępną dla użytkowników z ograniczeniami.
• SEO (Optymalizacja pod kątem wyszukiwarek): Strony z semantycznym oznaczeniem są lepiej indeksowane i oceniane przez wyszukiwarki, ponieważ mogą dokładniej określić główną treść i jej relewantność względem zapytań.
• Rozwój i utrzymanie: Poprawiają czytelność i utrzymanie kodu, czyniąc strukturę strony bardziej zrozumiałą dla innych programistów (i dla siebie w przyszłości).
• Lepsze zrozumienie struktury: Pozwalają wyraźnie oddzielić logiczne bloki strony (nawigacja, główna treść, stopka itp.).

Przykład niesemantycznego oznaczenia:

<div>
  <h2>Tytuł artykułu</h2>
  <p>Zawartość artykułu...</p>
</div>
<div>
  <h3>Pasek boczny</h3>
  <p>Informacje o pasku bocznym...</p>
</div>

Przykład semantycznego oznaczenia:

<article>
  <h2>Tytuł artykułu</h2>
  <p>Zawartość artykułu...</p>
</article>
<aside>
  <h3>Pasek boczny</h3>
  <p>Informacje o pasku bocznym...</p>
</aside>

Użycie elementów semantycznych przyczynia się do tworzenia bardziej strukturalnych, dostępnych i zoptymalizowanych pod kątem wyszukiwarek stron internetowych.