Struktura dokumentu: DOCTYPE html head body
Napisz od podstaw poprawny dokument HTML5: deklarację DOCTYPE, element główny html, sekcję head na metadane oraz body na treść.
Struktura dokumentu: DOCTYPE html head body to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Każdy dokument HTML ma ten sam szkielet
Poprawny dokument HTML5 zawsze zaczyna się od deklaracji DOCTYPE, zawiera główny element html, a w nim sekcję head przeznaczoną na metadane oraz sekcję body z widoczną treścią. Zrozumienie tej struktury to pierwszy krok.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Deklaracja DOCTYPE
<!DOCTYPE html> nie jest tagiem HTML — to instrukcja dla przeglądarki, aby renderowała stronę w trybie standardów. Bez niej przeglądarki przechodzą do „quirks mode”, który powoduje niespójne renderowanie stron. Zawsze umieszczaj ją w pierwszym wierszu.
Element <html> i atrybut lang
Element <html> jest głównym elementem dokumentu. Dodaj atrybut lang, aby zadeklarować język strony. Czytniki ekranu używają go do wyboru właściwego silnika wymowy, a wyszukiwarki — do wyświetlania lokalizowanych wyników.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">Element <head>
Element <head> zawiera metadane — informacje o stronie, a nie jej właściwą treść. Nic wewnątrz elementu head nie jest bezpośrednio widoczne dla użytkowników, ale wpływa na sposób przetwarzania strony przez przeglądarki i wyszukiwarki.
Metatagi charset i viewport
<meta charset="UTF-8"> informuje przeglądarkę, aby dekodowała plik jako UTF-8, dzięki czemu obsługiwane są wszystkie znaki międzynarodowe. <meta name="viewport"> umożliwia stosowanie responsywnego układu na urządzeniach mobilnych.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Element <title>
Tekst elementu <title> pojawia się na karcie przeglądarki, na liście zakładek oraz w wynikach wyszukiwarek. Powinien być zwięzły (50–60 znaków), opisowy i zawierać nazwę marki na końcu.
<title>Getting Started with HTML | CoddyKit</title>Łączenie CSS i czcionek
Dołączaj zewnętrzne arkusze stylów za pomocą elementu <link> umieszczonego w head. Używaj rel="stylesheet" i właściwego atrybutu href. Google Fonts i inne usługi oferujące czcionki również są dołączane w ten sposób.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">Element <body>
Wszystko, co widoczne na stronie, znajduje się wewnątrz elementu <body>: nagłówki, akapity, obrazy, przyciski, formularze i skrypty. Element body zawiera to, co użytkownik widzi i z czym wchodzi w interakcję.
Tagi script: gdzie je umieszczać
Umieść <script src="app.js" defer></script> w elemencie <head>. Atrybut defer pobiera skrypt równolegle i wykonuje go po całkowitym przetworzeniu HTML, co jest najbezpieczniejszym wyborem domyślnym.
<head>
<script src="app.js" defer></script>
</head>Komentarze w HTML
Użyj <!-- comment -->, aby dodawać notatki do kodu HTML. Komentarze nie są wyświetlane użytkownikom, ale są widoczne w widoku źródła. Służą do wyjaśniania zamysłu, oznaczania sekcji lub tymczasowego wyłączania kodu podczas debugowania.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Walidacja: walidator W3C
Wklej kod HTML do validator.w3.org, aby sprawdzić, czy zawiera błędy. Poprawny HTML ogranicza niespójności między przeglądarkami, pomaga czytnikom ekranu prawidłowo analizować stronę i świadczy o profesjonalnym warsztacie.
Szybki test
Gdzie należy umieścić tag <meta charset="UTF-8">?
Podsumowanie: szkielet dokumentu HTML
Każdy plik HTML musi zawierać: → →
(charset, viewport, title, linki CSS) → (cała widoczna treść). Ten szkielet zapewnia spójność między przeglądarkami, dostępność i prawidłowe indeksowanie SEO.Często zadawane pytania
Czy lekcja „Struktura dokumentu: DOCTYPE html head body” jest bezpłatna?
Tak — pełny tekst „Struktura dokumentu: DOCTYPE html head body” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Struktura dokumentu: DOCTYPE html head body”?
Napisz od podstaw poprawny dokument HTML5: deklarację DOCTYPE, element główny html, sekcję head na metadane oraz body na treść. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Struktura dokumentu: DOCTYPE html head body”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Struktura dokumentu: DOCTYPE html head body
- Znaczniki semantyczne: header nav main article footer
- Tekst, obrazy, odnośniki i listy
- Formularze: input label button