Dlaczego nie możemy używać zwykłych tagów div zamiast…

Użycie semantycznych tagów <section> i <header> zamiast uniwersalnego <div> poprawia dostępność i czytelność kodu.

Dostępność: Czytniki ekranowe i inne technologie wspomagające korzystają z semantycznych tagów, aby zrozumieć strukturę treści. <header> oznacza część wstępną (np. logo, nawigacja), <section> to blok tematyczny. <div> samo w sobie nie niesie semantycznego znaczenia.
SEO (optymalizacja pod kątem wyszukiwarek): Wyszukiwarki lepiej indeksują treści uporządkowane za pomocą semantycznych tagów, co może poprawić pozycję.
Czytelność i utrzymanie kodu: Semantyczne tagi dokumentują strukturę same w sobie. Programista czytający kod od razu rozumie przeznaczenie bloku, bez zagłębiania się w style czy komentarze.

Podsumowując: <div> jest odpowiedni do grupowania elementów, gdy semantyka nie ma znaczenia (np. do stosowania stylów). <section> i <header> niosą ładunek semantyczny i czynią strony bardziej zrozumiałymi zarówno dla maszyn, jak i dla ludzi.

Przykład:

<!-- Struktura semantycznie poprawna -->
<header>
  <h1>Nazwa strony</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Tytuł sekcji</h2>
  <p>Zawartość sekcji...</p>
</section>

<!-- Przykład użycia div, który nie przekazuje semantyki -->
<div> <!-- header? section? nie wiadomo -->
  <h1>Nazwa strony</h1>
  <div> <!-- nawigacja? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- sekcja? -->
  <h2>Tytuł sekcji</h2>
  <p>Zawartość sekcji...</p>
</div>

Dlaczego nie możemy używać zwykłych tagów div zamiast tagów section i header?