Podstawowe znaczniki semantyczne HTML5

Język HTML jest podstawą tworzenia stron internetowych. Służy do definiowania struktury i wyglądu strony. W HTML5 wprowadzono nowe znaczniki semantyczne, które pozwalają na lepszą interpretację zawartości strony przez roboty internetowe, takie jak wyszukiwarki oraz ułatwiają pracę programistom webowym.

Najważniejsze znaczniki semantyczne HTML5:

Znacznik <header>

Znacznik <header> definiuje nagłówek strony. Zazwyczaj zawiera on informacje takie jak tytuł strony, logo, menu główne, itp.

Przykład:

<header>
  <h1>Tytuł strony</h1>
  <img src="logo.png" alt="Logo strony">
  <nav>
    <a href="#">Menu</a>
    <a href="#">Strona główna</a>
    <a href="#">O nas</a>
    <a href="#">Kontakt</a>
  </nav>
</header>

Znacznik <footer>

Znacznik <footer> definiuje stopkę strony. Zazwyczaj zawiera on informacje takie jak prawa autorskie, adres strony, itp.

Przykład:

<footer>
  <p>Copyright © 2023</p>
  <p>Adres: ul. Sienkiewicza 12, 00-000 Warszawa</p>
</footer>

Znacznik <main>

Znacznik <main> definiuje główną treść strony. Zazwyczaj zawiera on informacje takie jak artykuły, newsy, itp.

Przykład:

<main>
  <article>
    <h2>Tytuł artykułu</h2>
    <p>Treść artykułu</p>
  </article>
  <article>
    <h2>Tytuł drugiego artykułu</h2>
    <p>Treść drugiego artykułu</p>
  </article>
</main>

Znacznik <section>

Znacznik <section> definiuje sekcję strony. Sekcja może być używana do grupowania elementów o podobnej tematyce.

Przykład:

<section>
  <h2>Sekcja o produktach</h2>
  <article>
    <h3>Produkt 1</h3>
    <p>Opis produktu 1</p>
  </article>
  <article>
    <h3>Produkt 2</h3>
    <p>Opis produktu 2</p>
  </article>
</section>

Znacznik <article>

Znacznik <article> definiuje artykuł. Artykuł może być używany do przedstawiania niezależnej jednostki treści, takiej jak news, artykuł, czy opinia.

Przykład:

<article>
  <h2>Tytuł artykułu</h2>
  <p>Treść artykułu</p>
</article>

Znacznik <aside>

Znacznik <aside> definiuje blok informacji pobocznych. Blok ten może być używany do umieszczania informacji takich jak reklamy, banery, czy komentarze.

Przykład:

<article>
  <h2>Tytuł artykułu</h2>
  <p>Treść artykułu</p>
</article>
<aside>
  <h2>Reklama</h2>
  <img src="reklama.png" alt="Reklama">
</aside>

Znacznik <nav>

Znacznik <nav> definiuje menu nawigacyjne. Menu to może być używane do nawigacji po stronie internetowej.

Przykład:

<nav>
  <a href="#">Strona główna</a>
  <a href="#">O nas</a>
  <a href="#">Kontakt</a>
</nav>