Znaczniki semantyczne HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym są znaczniki semantyczne HTML?

Znaczniki semantyczne HTML to elementy, które opisują znaczenie fragmentu strony, a nie tylko jego wygląd. Pomagają określić strukturę dokumentu, dzięki czemu kod jest czytelniejszy dla programisty, przeglądarki, wyszukiwarki oraz technologii wspomagających, np. czytników ekranu.

Przykłady znaczników semantycznych

Do często używanych znaczników semantycznych należą:

  • <header> - nagłówek strony lub sekcji,
  • <footer> - stopka strony lub sekcji,
  • <section> - logiczna sekcja dokumentu,
  • <article> - samodzielna treść, np. artykuł lub wpis,
  • <nav> - obszar nawigacji,
  • <main> - główna treść dokumentu,
  • <aside> - treść poboczna, np. panel boczny.

Przykład struktury strony

<header>
  <h1>Moja strona</h1>
</header>

<nav>
  <a href="index.html">Start</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

<main>
  <section>
    <h2>Aktualności</h2>
    <p>Treść sekcji...</p>
  </section>
</main>

<footer>
  <p>Stopka strony</p>
</footer>

Znaczniki strukturalne a formatowanie tekstu

Znaczniki takie jak <header>, <footer>, <section> czy <div> mogą służyć do organizowania układu dokumentu. Natomiast znaczniki <i>, <b>, <u> dotyczą głównie wyglądu lub wyróżnienia tekstu:

  • <i> - tekst pochylony,
  • <b> - tekst pogrubiony,
  • <u> - tekst podkreślony.

Nie służą one do określania struktury dokumentu HTML. W pytaniach egzaminacyjnych warto odróżniać znaczniki budujące układ strony od znaczników formatujących tekst.