Semantyczny układ strony WWW

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

Co to jest semantyczny układ strony WWW?

Semantyczny układ strony WWW to sposób organizacji treści za pomocą elementów HTML, które opisują znaczenie danej sekcji, a nie tylko jej wygląd. Dzięki temu kod jest czytelniejszy dla programisty, przeglądarki, wyszukiwarek i technologii wspomagających.

W typowym układzie strony można wyróżnić:
- header – nagłówek strony,
- nav – menu nawigacyjne,
- main – główną treść,
- aside – panel boczny,
- footer – stopkę strony.

W pytaniach egzaminacyjnych często pokazuje się schemat blokowy strony. W takim układzie stopka zwykle znajduje się na dole całej strony, pod główną treścią i panelami bocznymi.

Najczęstsze sekcje

  • Nagłówek – logo, tytuł, baner
  • Nawigacja – odnośniki do działów serwisu
  • Treść główna – artykuły, opisy, formularze
  • Panel boczny – dodatkowe informacje, reklamy, skróty
  • Stopka – prawa autorskie, kontakt, linki techniczne

Przykład w HTML

<body>
  <header>Nagłówek</header>
  <nav>Menu</nav>
  <main>
    <article>Treść strony</article>
    <aside>Panel boczny</aside>
  </main>
  <footer>Stopka strony</footer>
</body>

Dlaczego to ważne?

Semantyczny układ:
- ułatwia zrozumienie struktury dokumentu,
- poprawia dostępność strony,
- wspiera SEO,
- porządkuje projektowanie interfejsu.

Co zapamiętać na egzamin?

Jeśli na schemacie sekcja znajduje się na samym dole strony na pełnej szerokości, to najczęściej oznacza stopkę. W HTML odpowiada jej element:

<footer>

Stopka nie jest miejscem na główną treść strony, lecz na informacje końcowe i pomocnicze.