Składnia języka HTML5 – podstawowe znaczniki

Znaczniki semantyczne HTML5

• <header> – definiuje nagłówek strony lub sekcji z elementami takimi jak logo, tytuł i menu nawigacyjne.
• <nav> – definiuje nawigację, czyli obszar zawierający linki do innych stron lub sekcji.
• <main> – reprezentuje główną treść dokumentu, unikalną dla każdej strony (po jednym elemencie na dokument).
• <section> – służy do grupowania tematycznie powiązanych bloków treści, np. rozdziałów dokumentu.
• <article> – samodzielna jednostka treści, jak wpis blogowy, artykuł lub komentarz.
• <aside> – zawiera treści poboczne, np. boczne panele, reklamy lub linki do powiązanych materiałów.
• <footer> – definiuje stopkę dokumentu lub sekcji, zawierającą informacje kontaktowe, prawa autorskie itp.

Znaczniki tradycyjne i grupujące

• odede><div> – ogólny kontener blokowy, nie mający semantycznego znaczenia.
• <span> – element liniowy, używany do oznaczania fragmentów tekstu bez semantyki.
• <p> – paragraf, blok tekstu.
• <h1>...<h6> – nagłówki, określające hierarchię tytułów i sekcji.
• <ul>, <ol>, <li> – listy nieuporządkowane, uporządkowane i elementy list.

Przykładowa baza znacznika semantycznych

<header>
  <h1>Moja strona</h1>
  <nav>
    <ul>
      <li><a href="#">Start</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Tytuł artykułu</h2>
    <p>Przykładowy tekst artykułu.</p>
  </article>

  <aside>
    <p>Dodatkowe informacje</p>
  </aside>
</main>

<footer>
  <p>Stopka strony © 2025</p>
</footer>

Ćwiczenia praktyczne

Nagłówek – <header>
Menu nawigacji – <nav>
Główna zawartość – <main>
Samodzielny artykuł – <article>
Treść poboczna – <aside>
Stopka – <footer>

Quiz

Podsumowanie

Znaczniki semantyczne w HTML5 ułatwiają organizację kodu, poprawiają dostępność i SEO oraz pozwalają tworzyć bardziej czytelne strony.

Dobór odpowiednich elementów zgodnie z ich znaczeniem to standard w nowoczesnym web designie.

Checklista