Czym jest semantyka w kontekście rozwoju stron…

Semantyka w tworzeniu stron internetowych to użycie znaczników HTML zgodnie z ich znaczeniem, a nie tylko do stylizacji. Pomaga opisać strukturę i sens treści, czyniąc stronę bardziej zrozumiałą dla przeglądarek, wyszukiwarek, czytników ekranowych i innych parserów.

Główne zalety semantycznego oznaczania:

Dostępność: Ulepsza interakcję z witryną dla osób z ograniczonymi możliwościami, korzystających z czytników ekranowych.
SEO: Pomaga wyszukiwarkom lepiej zrozumieć strukturę i zawartość strony, co pozytywnie wpływa na pozycjonowanie.
Utrzymanie: Ułatwia czytelność i zrozumiałość kodu dla innych programistów.
Zgodność: Zapewnia poprawne wyświetlanie treści na różnych urządzeniach i w różnych przeglądarkach.

Przykłady semantycznych znaczników w HTML5:

<header>: Reprezentuje wprowadzenie lub nawigację dla całego dokumentu lub określonej sekcji.
<nav>: Reprezentuje grupę linków nawigacyjnych.
<main>: Reprezentuje główną zawartość dokumentu.
<article>: Reprezentuje kompletny, samodzielny fragment treści, który może być niezależnie rozpowszechniany (np. wpis na blogu, wiadomość).
<section>: Reprezentuje samodzielną sekcję treści w dokumencie.
<aside>: Reprezentuje treści, które są pośrednio powiązane z główną treścią strony (np. pasek boczny).
<footer>: Reprezentuje stopkę dla całego dokumentu lub określonej sekcji.
<figure> i <figcaption>: Reprezentują element multimedialny (obraz, diagram itp.) i jego opis.
<time>: Reprezentuje datę i czas.

Porównanie podejścia semantycznego i niesemantycznego:

Podejście niesemantyczne	Podejście semantyczne
Użycie `<div>` i `<span>` do wszystkiego	Użycie specyficznych znaczników (`<header>`, `<nav>`, `<article>`)
Opis struktury za pomocą klas (`class="header"`)	Użycie znaczników, które opisują strukturę z natury
Zależność od CSS do zrozumienia struktury	Struktura jest zrozumiała z kodu HTML

Przykład niesemantycznego oznaczenia:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Strona główna</a></li>
      <li><a href="#">O nas</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Tytuł</h2>
    <p>Zawartość...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Przykład semantycznego oznaczenia:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Strona główna</a></li>
      <li><a href="#">O nas</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Tytuł</h2>
    <p>Zawartość...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

Semantyczne oznaczenie nie zastępuje CSS w stylizacji, ale czyni dokument HTML bardziej informacyjnym i użytecznym dla różnych odbiorców treści.

Czym jest semantyka w kontekście rozwoju stron internetowych?