Podstawowy podział kodu HTML – sekcje oraz
Kod strony internetowej w HTML dzielimy na dwie główne sekcje –
oraz . Każda z tych sekcji ma inną funkcję i zawiera charakterystyczne dla siebie elementy. Poprawna struktura tych sekcji jest podstawą przy tworzeniu nowoczesnych stron internetowych i stanowi punkt wyjścia dla dalszego rozwoju witryny.Sekcja <head> – informacje o stronie (metadane)
Sekcja <head> znajduje się na początku dokumentu HTML, bezpośrednio po otwarciu znacznika <html>. Jej głównym zadaniem jest przechowywanie informacji o stronie, które często nie są widoczne dla użytkownika bezpośrednio podczas przeglądania witryny. Takie dane nazywamy metadanymi.
Najczęściej używane elementy w <head>
<title>– tytuł strony widoczny na karcie przeglądarki oraz używany w wyszukiwarkach internetowych,<meta>– różnego rodzaju metadane, np. określenie znakowania znaków (charset) czy opis strony,<link>– dodawanie zewnętrznych arkuszy stylów CSS lub ikon dla przeglądarek i urządzeń mobilnych,<script>– dołączanie skryptów JavaScript, które mogą obsługiwać interakcje na stronie,<style>– osadzony kod CSS dla niewielkich zmian stylowania.
Przykład zastosowania sekcji <head>
<head>
<meta charset="UTF-8">
<meta name="description" content="Poradnik o strukturze HTML - krok po kroku.">
<title>Jak zbudować stronę HTML?</title>
<link rel="stylesheet" href="style.css">
<script src="skrypt.js"></script>
</head>
W powyższym przykładzie strona zawiera tytuł, opis, określenie kodowania, odwołanie do zewnętrznego pliku stylów CSS oraz skryptu JavaScript.
Sekcja <body> – właściwa zawartość strony
Sekcja <body> to wszystko to, co widzi użytkownik po załadowaniu strony w przeglądarce. To właśnie tutaj umieszczamy nagłówki, akapity tekstu, zdjęcia, filmy, tabele, linki, formularze oraz wiele innych elementów budujących wygląd i zawartość strony.
Popularne elementy wewnątrz <body>
<header>– górna część strony, np. logo, nazwa, menu główne,<nav>– sekcja nawigacyjna, umożliwiająca przemieszczanie się po stronie,<main>– centralna, najważniejsza część witryny; jej unikalna treść,<section>,<article>– uporządkowane fragmenty i samodzielne części treści (np. artykuły blogowe, sekcje tematyczne),<aside>– treści poboczne, np. panele boczne, reklamy, odnośniki do najnowszych wpisów,<footer>– dół strony: prawa autorskie, dodatkowe linki, kontakt.
Przykład rozbudowanej zawartości w <body>
<body>
<header>
<h1>Poradnik: Struktura strony HTML</h1>
<nav>
<ul>
<li><a href="#co-to-html">Co to jest HTML?</a></li>
<li><a href="#sekcje">Podział na sekcje</a></li>
<li><a href="#przyklady">Przykłady</a></li>
</ul>
</nav>
</header>
<main>
<section id="co-to-html">
<h2>Co to jest HTML?</h2>
<p>HTML to język znaczników służący do tworzenia stron internetowych.</p>
</section>
<section id="sekcje">
<h2>Podział na sekcje w HTML</h2>
<p>Kod HTML dzielimy na <strong>head</strong> i <strong>body</strong>...</p>
</section>
<section id="przyklady">
<h2>Przykłady praktyczne</h2>
<p>Zobacz przykładową strukturę strony powyżej.</p>
</section>
</main>
<footer>
<p>© 2025 Poradnik HTML. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
Podsumowanie – kluczowe informacje
- – zawiera informacje pomocnicze (niewidoczne dla użytkownika), ważne dla wyszukiwarki, przeglądarki oraz dla programistów;
- – odpowiada za faktycznie wyświetlane treści i strukturę strony. To tutaj znajduje się cała prawdziwa zawartość dla odwiedzających.
Znajomość funkcji obu sekcji pozwala świadomie projektować zarówno techniczne aspekty strony, jak i atrakcyjną, przyjazną użytkownikom zawartość. Poprawne rozplanowanie i wykorzystanie <head> oraz <body> stanowi bazę dla dalszych, bardziej zaawansowanych działań w tworzeniu stron internetowych.
