Do budowy struktury strony internetowej w HTML służy kilka podstawowych znaczników, które definiują główne sekcje i układ dokumentu. Najważniejsze z nich to: <html>, <head>, <body>, a wewnątrz ciała dokumentu stosuje się także znaczniki semantyczne, takie jak <header>, <nav>, <main>, <section>, <article>, <aside> oraz <footer>.
Fundamentalne znaczniki strukturalne HTML
<html>– otacza cały dokument HTML i stanowi kontener dla wszystkich elementów na stronie. Informuje przeglądarkę, że ma do czynienia z kodem HTML;<head>– sekcja przeznaczona na metadane, tytuł strony (<title>), odwołania do arkuszy stylów, skryptów oraz inne zasoby niewidoczne dla użytkownika;<body>– zawiera całą treść, która będzie wyświetlana użytkownikom: teksty, obrazy, linki, formularze i wszystko, co widoczne na stronie.
Przykład podstawowej struktury strony HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Tytuł strony</title>
</head>
<body>
<!-- Zawartość strony -->
</body>
</html>
Znaczniki semantyczne do budowy układu strony
Dzięki specyficznym znacznikom HTML5 można jeszcze czytelniej i bardziej uporządkowanie zorganizować treść strony. Każdy z poniższych elementów spełnia określoną funkcję:
<header>– definiuje górną sekcję strony, zwykle zawierającą logo, nagłówek strony lub menu nawigacyjne;<nav>– sekcja przeznaczona na nawigację, czyli menu z linkami do najważniejszych części serwisu;<main>– główny blok z najważniejszą treścią witryny; powinien być unikalny na każdej podstronie;<section>– logiczna sekcja dokumentu, grupująca powiązaną tematycznie zawartość;<article>– samodzielny artykuł, wpis, post lub inny fragment, który może zostać przekazany poza kontekstem strony (np. w syndykacji);<aside>– dodatkowa treść, boczne panele lub kontent powiązany, niebędący kluczowym przekazem strony (np. reklamy, listy linków zewnętrznych);<footer>– stopka strony, najczęściej zawiera informacje kontaktowe, dane o autorze lub odnośniki do polityki prywatności.
Przykładowy, rozbudowany szablon:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Struktura strony w HTML</title>
</head>
<body>
<header>
<h1>Moja strona</h1>
<nav>
<ul>
<li><a href="#home">Strona główna</a></li>
<li><a href="#about">O mnie</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section>
<article>
<h2>Aktualności</h2>
<p>Najnowsze informacje ze świata technologii.</p>
</article>
</section>
<aside>
<h3>Warto przeczytać</h3>
<ul>
<li>Poradnik HTML</li>
<li>Wprowadzenie do CSS</li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Moja strona</p>
</footer>
</body>
</html>
Dodatkowe znaczniki strukturalne
<div>– ogólny blokowy znacznik kontenerowy, wykorzystywany do grupowania większych sekcji wtedy, gdy nie pasuje żaden bardziej semantyczny element;<span>– kontener liniowy, używany głównie do stylizacji lub wydzielania mniejszych fragmentów w tekście.
Kluczowe praktyki i zalety stosowania semantycznych znaczników
- Poprawiają czytelność kodu oraz jego strukturę dla osób utrzymujących serwis,
- ułatwiają optymalizację SEO – wyszukiwarki lepiej rozumieją układ i hierarchię treści,
- wspierają dostępność (Accessibility), pomagając technologiom asystującym (np. czytnikom ekranu).
Podsumowując, do budowy struktury strony HTML używa się głównie <html>, <head>, <body> oraz znaczników semantycznych: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, a także ogólnych kontenerów <div> i <span> do bardziej uniwersalnych zastosowań. Spójne korzystanie z tych elementów pozwala na tworzenie przejrzystych, skalowalnych oraz przystępnych stron internetowych.
