Semantyczne HTML5

Czym jest semantyka w HTML?

Semantyka w HTML polega na używaniu odpowiednich znaczników (tagów), które dokładnie opisują, co dany element na stronie oznacza. To nie tylko poprawia czytelność kodu, ale także ułatwia przeglądarkom, wyszukiwarkom oraz narzędziom do dostępności (np. czytnikom ekranów) lepsze zrozumienie struktury i zawartości strony. Dzięki temu możemy tworzyć strony, które są bardziej przyjazne dla użytkowników i łatwiejsze do indeksowania.

Dlaczego semantyka jest ważna?

SEO (optymalizacja pod kątem wyszukiwarek): Poprawnie semantycznie zorganizowany kod pomaga wyszukiwarkom, takim jak Google, lepiej zrozumieć, jakie treści są na stronie najważniejsze. To z kolei może poprawić pozycjonowanie strony w wynikach wyszukiwania.
Dostępność: Korzystanie z semantycznych elementów ułatwia osobom niepełnosprawnym nawigację po stronie. Na przykład czytniki ekranowe lepiej zrozumieją, co jest nagłówkiem, a co nawigacją.
Czytelność kodu: Kod semantyczny jest łatwiejszy do zrozumienia zarówno dla innych programistów, jak i dla Ciebie, jeśli wrócisz do projektu po jakimś czasie.

Nowe semantyczne elementy HTML5

W HTML5 wprowadzono kilka nowych znaczników, które pomagają w budowie bardziej logicznej struktury dokumentu. Oto najważniejsze z nich:

<header> – Reprezentuje górną część strony lub sekcji. Zawiera zazwyczaj tytuł, logo lub nawigację.
<nav> – Reprezentuje sekcję nawigacyjną strony, np. menu.
<section> – Reprezentuje logiczną sekcję strony, np. rozdział lub dział.
<article> – Reprezentuje samodzielną, niezależną jednostkę treści, np. wpis blogowy lub artykuł w gazecie.
<aside> – Reprezentuje treść poboczną, np. pasek boczny z dodatkowymi informacjami.
<footer> – Reprezentuje dolną część strony lub sekcji, zazwyczaj zawiera informacje o prawach autorskich lub linki do polityki prywatności.
<main> – Reprezentuje główną treść strony. Może zawierać kilka sekcji i artykułów, ale jest to główny punkt, na którym użytkownik się skupia.

Przykład użycia semantycznych elementów HTML5

Zobaczmy, jak możemy wykorzystać te nowe elementy w praktyce:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Strona z semantycznym HTML5</title>
</head>
<body>

  <header>
    <h1>Moja strona</h1>
    <nav>
      <ul>
        <li><a href="#home">Strona główna</a></li>
        <li><a href="#about">O nas</a></li>
        <li><a href="#contact">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="home">
      <h2>Strona główna</h2>
      <p>Witamy na naszej stronie! Tutaj znajdziesz wszystkie informacje, których potrzebujesz.</p>
    </section>

    <article id="post1">
      <h2>Najświeższy wpis</h2>
      <p>Oto najnowszy wpis na naszym blogu. Zapraszamy do lektury!</p>
    </article>

    <aside>
      <h3>Polecane artykuły</h3>
      <ul>
        <li><a href="#post2">Artykuł 1</a></li>
        <li><a href="#post3">Artykuł 2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 Moja strona. Wszelkie prawa zastrzeżone.</p>
  </footer>

</body>
</html>

Zasady używania semantycznych elementów

Używaj elementów zgodnie z ich przeznaczeniem – Na przykład, używaj <nav> tylko do elementów nawigacyjnych, a nie do innych list.
Unikaj nadmiernego zagnieżdżania – Staraj się nie tworzyć nadmiernie zagnieżdżonych struktur, które mogą utrudniać zrozumienie kodu.
Każda strona powinna mieć tylko jeden <main> – Element ten reprezentuje główną zawartość strony, więc nie powinno być ich więcej.
Używaj nagłówków w logiczny sposób – Elementy <h1> do <h6> powinny być używane w hierarchiczny sposób, aby odzwierciedlać strukturę treści.

Ćwiczenie: Semantyczny układ strony

Stwórz stronę główną, która wykorzystuje semantyczne elementy HTML5, takie jak <header>, <nav>, <main>, <article>, <section>, <aside> i <footer>. Upewnij się, że każdy element jest użyty zgodnie z jego przeznaczeniem.

Gratulacje! Ukończyłeś lekcję 6.
Przejdź teraz do lekcji 7 >> Zaawansowane formularze w HTML5