Struktura dokumentu HTML5 (DOCTYPE, html, head, body)
Każda poprawna strona internetowa w HTML5 ma określoną strukturę, którą przeglądarka musi rozpoznać, aby prawidłowo wyświetlić treść. Nawet najprostsza strona opiera się na kilku podstawowych elementach: <!DOCTYPE>, <html>, <head> i <body>.
Poniżej masz praktyczne i proste wyjaśnienie, co oznacza każdy z tych elementów i do czego służy.
Podstawowy szkielet dokumentu HTML5
Każdy dokument HTML5 wygląda w uproszczeniu tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Tytuł strony</title>
</head>
<body>
<h1>Witaj na stronie</h1>
<p>To jest treść strony.</p>
</body>
</html>
To jest minimalna poprawna struktura HTML5.
DOCTYPE – informacja dla przeglądarki
<!DOCTYPE html> to deklaracja, która informuje przeglądarkę, że dokument jest napisany w standardzie HTML5.
Dlaczego to ważne:
- zapobiega błędom renderowania,
- wymusza nowoczesny tryb interpretacji strony,
- zapewnia zgodność między przeglądarkami.
DOCTYPE nie jest tagiem HTML, tylko instrukcją dla przeglądarki i zawsze znajduje się na samym początku pliku.
html – główny kontener strony
Znacznik <html> obejmuje całą zawartość dokumentu. Wszystko, co widzi i interpretuje przeglądarka, musi znajdować się wewnątrz tego tagu.
Najczęściej zawiera atrybut lang, który określa język strony:
<html lang="pl">
Jest to ważne dla:
- SEO,
- czytników ekranu,
- dostępności strony.
head – informacje o stronie
Sekcja <head> zawiera informacje techniczne o stronie, które nie są bezpośrednio widoczne dla użytkownika.
W <head> znajdują się m.in.:
- tytuł strony (
<title>), - kodowanie znaków (
<meta charset>), - opisy SEO (
meta description), - linki do plików CSS,
- inne metadane.
Przykład:
<head>
<meta charset="UTF-8">
<title>Moja pierwsza strona</title>
</head>
Treści z <head> nie wyświetlają się na stronie, ale mają ogromny wpływ na działanie i pozycjonowanie.
body – widoczna treść strony
<body> to najważniejsza część dokumentu z punktu widzenia użytkownika. To tutaj znajduje się cała widoczna treść strony.
W <body> umieszczasz:
- nagłówki,
- teksty,
- obrazy,
- przyciski,
- formularze,
- sekcje strony.
Przykład:
<body>
<h1>Strona główna</h1>
<p>To jest przykładowy tekst.</p>
</body>
Wszystko, co ma się pojawić na ekranie, musi znaleźć się właśnie tutaj.
Jak to wszystko działa razem?
Można to porównać do książki:
- DOCTYPE – informacja, w jakim języku jest książka,
- html – okładka obejmująca całość,
- head – spis treści i informacje wydawnicze,
- body – właściwa treść książki.
Każdy element ma swoją rolę i nie można ich pomijać w poprawnym dokumencie HTML5.
Najczęstsze błędy początkujących
Na początku nauki HTML często pojawiają się te same problemy:
- brak DOCTYPE,
- treść umieszczona poza
<body>, - brak
<meta charset="UTF-8">, - nieprawidłowe zagnieżdżenie znaczników.
Trzymanie się podstawowej struktury eliminuje większość tych błędów.
Podsumowanie
Struktura dokumentu HTML5 jest prosta, ale kluczowa:
<!DOCTYPE html>określa standard,<html>zawiera cały dokument,<head>przechowuje informacje techniczne,<body>zawiera widoczną treść strony.
Zrozumienie tej struktury to pierwszy i obowiązkowy krok w nauce tworzenia stron internetowych.