ZAWODNIK

Szkielet dokumentu HTML5: doctype, head, meta, title, body

INF.03 · teoria
autor: redakcja · 07.09.2026 · aktualizacja: 08.09.2026
Stały układ znaczników, od którego zaczyna się każdy plik HTML: deklaracja typu dokumentu, element html z atrybutem lang, sekcja head z kodowaniem i tytułem oraz body z widoczną treścią. Lekcja 3.2 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: htmlĆwicz dział: html
Szkie­let do­ku­men­tu to stały układ znacz­ni­ków, od któ­re­go za­czy­na się każdy plik HTML: de­kla­ra­cja typu do­ku­men­tu, ele­ment html, a w nim head z in­for­ma­cja­mi dla prze­glą­dar­ki i body z tre­ścią wi­docz­ną w oknie. W części pi­sem­nej wra­ca­ją z niego dwa py­ta­nia: który znacz­nik należy do sekcji head, a który do body, oraz co ozna­cza wpis <!DOCTYPE html>. W za­da­niu prak­tycz­nym ten sam szkie­let daje cztery punkty w pierw­szej mi­nu­cie pracy, bo arkusz wymaga strony w HTML5, z ko­do­wa­niem pol­skich znaków, z za­de­kla­ro­wa­nym ję­zy­kiem i z ty­tu­łem wi­docz­nym na karcie prze­glą­dar­ki.

Znacz­nik, ele­ment, atry­but

Znacz­nik (tag) to nazwa w na­wia­sach ostrych, która mówi prze­glą­dar­ce, czym jest dany frag­ment do­ku­men­tu. Ele­ment to znacz­nik otwie­ra­ją­cy, treść i znacz­nik za­my­ka­ją­cy razem.
<p class="uwaga">Monitor 27 jest chwilowo niedostępny.</p>
Tu <p> to znacz­nik otwie­ra­ją­cy aka­pi­tu, </p> to znacz­nik za­my­ka­ją­cy, po­zna­wal­ny po uko­śni­ku przed nazwą, a zdanie między nimi to treść ele­men­tu. Zapis class="uwaga" to atry­but: class jest nazwą atry­bu­tu, uwaga jego war­to­ścią. Atry­bu­ty stoją wy­łącz­nie w znacz­ni­ku otwie­ra­ją­cym, w po­sta­ci nazwa, znak rów­no­ści, war­tość w cu­dzy­sło­wie, a ko­lej­nych atry­bu­tów tego samego ele­men­tu nie od­dzie­la prze­ci­nek, tylko spacja.
Część ele­men­tów nie ma treści, więc nie ma też znacz­ni­ka za­my­ka­ją­ce­go. Nazywa się je ele­men­ta­mi pu­sty­mi: <br> (ła­ma­nie wier­sza), <hr> (linia po­zio­ma), <img> (obraz), <meta> (in­for­ma­cja o do­ku­men­cie), <link> (do­łą­czo­ny plik). W HTML5 pisze się je bez uko­śni­ka na końcu; zapis <br /> po­cho­dzi z XHTML, prze­glą­dar­ka go przyj­mu­je, ale wa­li­da­tor HTML5 go nie wymaga.
No­tat­ka dla siebie i dla kolegi z ze­spo­łu to ko­men­tarz <!-- tu zaczyna się stopka -->. Prze­glą­dar­ka go nie wy­świe­tla, ale każdy widzi go w kodzie źró­dło­wym strony, więc nie chowa się w nim haseł.
HTML nie roz­róż­nia wiel­ko­ści liter w na­zwach znacz­ni­ków, czyli <P> działa tak samo jak <p>, ale w HTML5 pisze się je małymi li­te­ra­mi i tylko taki zapis jest w ar­ku­szach. War­to­ści atry­bu­tów to inna sprawa: id="menu" i id="Menu" to dwa różne iden­ty­fi­ka­to­ry.
Ele­men­ty wolno za­gnież­dżać, ale nie wolno ich krzy­żo­wać. Po­praw­ny zapis to <p>To jest <strong>ważne</strong> zdanie.</p>, bo ele­ment otwar­ty jako ostat­ni zamyka się jako pierw­szy.
Pu­łap­ka: zapis <p><strong>tekst</p></strong> wa­li­da­tor zgła­sza jako błąd, choć prze­glą­dar­ka zwykle go na­pra­wia i strona wy­glą­da dobrze. Punkty na eg­za­mi­nie idą za kod, nie za wygląd.

De­kla­ra­cja typu do­ku­men­tu i znacz­nik html

<!DOCTYPE html> to de­kla­ra­cja typu do­ku­men­tu: pierw­szy wiersz pliku, który mówi prze­glą­dar­ce, że dalej idzie HTML w wersji 5. Nie jest znacz­ni­kiem, nie ma znacz­ni­ka za­my­ka­ją­ce­go i nie wy­świe­tla ni­cze­go. Stoi przed wszyst­kim innym, także przed ko­men­ta­rza­mi.
Sens tej de­kla­ra­cji jest prak­tycz­ny: z nią prze­glą­dar­ka włącza tryb stan­dar­dów i liczy wy­mia­ry ele­men­tów zgod­nie z obo­wią­zu­ją­cą spe­cy­fi­ka­cją, bez niej prze­cho­dzi w tryb zgod­no­ści ze sta­ry­mi stro­na­mi (quirks mode), w którym te same style dają inny układ. De­kla­ra­cje star­szych stan­dar­dów były długie, bo wska­zy­wa­ły plik z de­fi­ni­cją do­ku­men­tu, i w takiej po­sta­ci tra­fia­ją do pytań:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Pierw­sza to HTML 4.01, druga XHTML 1.0. Krótki wpis bez słowa PUBLIC to zawsze HTML5.
Zaraz pod de­kla­ra­cją stoi <html lang="pl">, ele­ment ko­rze­nio­wy, czyli taki, który obej­mu­je cały do­ku­ment i zamyka się do­pie­ro w ostat­nim wier­szu pliku. Atry­but lang de­kla­ru­je język treści. Ko­rzy­sta z niego czyt­nik ekranu, żeby czytać stronę polską wymową, wy­szu­ki­war­ka, żeby po­ka­zać ją pol­skim użyt­kow­ni­kom, i prze­glą­dar­ka, żeby za­pro­po­no­wać tłu­ma­cze­nie albo spraw­dzić pi­sow­nię w for­mu­la­rzu. Arkusz CKE wy­mie­nia go wprost jako osobne wy­ma­ga­nie.

Sekcja head: co prze­glą­dar­ka wie, a czego nie widać

<head> (na­głó­wek do­ku­men­tu) to część do­ku­men­tu z in­for­ma­cja­mi o stro­nie, któ­rych prze­glą­dar­ka nie rysuje w oknie. Jedyny ślad, jaki po nich zo­sta­je na ekra­nie, to tekst tytułu na karcie.
  • ›
    <meta charset="UTF-8"> de­kla­ru­je ko­do­wa­nie znaków i ma być PIERWSZYM dziec­kiem head, bo prze­glą­dar­ka musi wie­dzieć, jak czytać bajty, zanim doj­dzie do pierw­szej pol­skiej litery. Przy złym ko­do­wa­niu za­miast „ą" i „ś" po­ja­wia­ją się krzaki.
  • ›
    <title>Sklep komputerowy</title> to tytuł do­ku­men­tu: widać go na karcie prze­glą­dar­ki, w za­kład­kach i jako na­głó­wek wyniku w Google. Jest je­dy­nym obo­wiąz­ko­wym ele­men­tem sekcji head, więc jego brak wa­li­da­tor zgła­sza jako błąd, a nie ostrze­że­nie.
  • ›
    <meta name="viewport" content="width=device-width, initial-scale=1"> usta­wia sze­ro­kość widoku na sze­ro­kość ekranu urzą­dze­nia. Bez tego wpisu te­le­fon po­ka­zu­je stronę po­mniej­szo­ną, tak jakby ekran miał około 980 pik­se­li.
  • ›
    <meta name="description" content="Klawiatury, myszy i monitory"> to stresz­cze­nie strony, które wy­szu­ki­war­ka wy­świe­tla pod od­no­śni­kiem, a <meta name="author" content="Jan Kowalski"> podaje autora. Oba są w sekcji head, oba są ele­men­ta­mi pu­sty­mi.
  • ›
    <link rel="stylesheet" href="styl.css"> do­łą­cza ze­wnętrz­ny arkusz stylów: rel mówi, czym jest wska­za­ny plik, href gdzie on leży. Ten sam znacz­nik z rel="icon" podaje ikonę wy­świe­tla­ną na karcie.
  • ›
    <style> za­wie­ra we­wnętrz­ny arkusz stylów, czyli reguły CSS wpi­sa­ne wprost w do­ku­ment, i jego miej­scem jest wła­śnie head. <script> z kodem JavaScript za­dzia­ła i tu, i w body, ale zwykle stawia się go na końcu body, żeby strona zdą­ży­ła się na­ry­so­wać, zanim skrypt za­cznie szukać w niej ele­men­tów.
Do sekcji head nie należy nic, co ma być wi­docz­ne. Na­głó­wek <h2>, akapit <p> czy obraz <img> wpi­sa­ny między <head> a </head> to błąd struk­tu­ry, choć plik się otwo­rzy.
Pu­łap­ka: <meta charset="UTF-8"> od­po­wia­da za pol­skie znaki, lang="pl" za de­kla­ra­cję języka treści. To dwie różne rzeczy i arkusz punk­tu­je je osobno.

Sekcja body i gotowy szkie­let

<body> (treść do­ku­men­tu) to część wi­docz­na: teksty, na­głów­ki, obrazy, tabele, od­no­śni­ki i for­mu­la­rze. Wszyst­ko, co użyt­kow­nik ma zo­ba­czyć, stoi między <body> a </body>. Po­ni­żej cały szkie­let strony sklepu, plik index.html. To jest wzór do prze­pi­sa­nia z pa­mię­ci na eg­za­mi­nie.
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Sklep komputerowy</title> <link rel="stylesheet" href="styl.css"> </head> <body> <header>Sklep komputerowy</header> <main> <h1>Nasze produkty</h1> <p>Klawiatury, myszy i monitory w dobrej cenie.</p> </main> <footer>Kontakt: sklep@example.com</footer> </body> </html>
W prze­glą­dar­ce ten plik daje białą stronę z czte­re­ma rze­cza­mi jedna pod drugą: na­pi­sem „Sklep kom­pu­te­ro­wy" zwykłą czcion­ką, dużym po­gru­bio­nym na­pi­sem „Nasze pro­duk­ty", aka­pi­tem o kla­wia­tu­rach i wier­szem z ad­re­sem na dole. Na karcie wid­nie­je „Sklep kom­pu­te­ro­wy", choć w treści strony tego tytułu z <title> nie ma. Żad­nych ramek, ko­lo­rów ani dwóch kolumn na razie nie będzie, bo wygląd przyj­dzie do­pie­ro z ar­ku­sza styl.css.
Trzy ele­men­ty w body to znacz­ni­ki sekcji: <header> (na­głó­wek strony) trzyma baner na górze, <main> (treść główna) wła­ści­wą za­war­tość, a <footer> (stopka) dane na dole. Dzielą stronę na na­zwa­ne bloki, dzięki czemu prze­glą­dar­ka i wy­szu­ki­war­ka wiedzą, co jest czym. Pełny układ z ry­sun­ku w ar­ku­szu, razem z pa­skiem menu i dwoma blo­ka­mi obok siebie, omawia lekcja o znacz­ni­kach sekcji.

Drzewo do­ku­men­tu i DOM

Do­ku­ment HTML jest drze­wem: ele­ment za­war­ty w innym jest jego dziec­kiem, ele­ment za­wie­ra­ją­cy jest ro­dzi­cem, a ele­men­ty mające tego samego ro­dzi­ca są ro­dzeń­stwem. W szkie­le­cie ze sklepu ko­rze­niem jest html, jego dwoje dzieci to head i body, a te dwa są wzglę­dem siebie ro­dzeń­stwem. Dzieć­mi body są header, main i footer. Na­głó­wek h1 i akapit p też są ro­dzeń­stwem, ale ich ro­dzi­cem jest main, a nie body.
Drzewo dokumentu: element html z atrybutem lang, pod nim head z kodowaniem, tytułem i arkuszem stylów oraz body z sekcjami header, main i footer
Prze­glą­dar­ka nie trzyma strony jako tekstu pliku. Po wczy­ta­niu buduje z niej DOM (Document Object Model, obiek­to­wy model do­ku­men­tu), czyli do­kład­nie to drzewo w pa­mię­ci kom­pu­te­ra. Po nim chodzą potem dwa inne języki. CSS trafia w ele­ment przez jego miej­sce w drze­wie, więc se­lek­tor po­tom­ka main p opi­su­je akapit leżący we­wnątrz main, a nie każdy akapit na stro­nie. JavaScript wyj­mu­je z drzewa po­je­dyn­czy ele­ment metodą document.getElementById("cena") i pod­mie­nia jego treść.
Dla­te­go po­praw­ne za­gnież­dża­nie nie jest ko­sme­ty­ką. Skrzy­żo­wa­ne albo nie­do­mknię­te znacz­ni­ki dają drzewo inne niż to, które widać w kodzie, a wtedy reguła CSS prze­sta­je tra­fiać w ele­ment i skrypt zwraca coś innego, niż autor za­kła­dał.

Na eg­za­mi­nie

Py­ta­nie pi­sem­ne naj­czę­ściej spraw­dza po­dział na head i body. Wersja pierw­sza podaje cztery znacz­ni­ki i pyta, który ma za­sto­so­wa­nie w sekcji body: trzy od­po­wie­dzi są z head, jedna z body. Wersja druga od­wra­ca po­le­ce­nie i pyta, któ­re­go znacz­ni­ka nie należy umiesz­czać w na­głów­ku do­ku­men­tu. Metoda jest krótka: za­pa­mię­taj listę miesz­kań­ców head, czyli meta, title, link, style, script i base, a wszyst­ko poza nią jest z body.
Reszta pytań kręci się wokół czte­rech spraw.
  • 1.
    De­kla­ra­cja <!DOCTYPE html> znaczy „do­ku­ment w HTML5". Mylące od­po­wie­dzi mówią o wersji 4, o obo­wiąz­ko­wych znacz­ni­kach za­my­ka­ją­cych albo o pi­sa­niu znacz­ni­ków wiel­ki­mi li­te­ra­mi.
  • 2.
    Ze­wnętrz­ny arkusz stylów do­łą­cza <link rel="stylesheet" href="styl.css">. Wa­rian­ty z <style>, <meta>, <a> albo z atry­bu­tem src za­miast href są błędne.
  • 3.
    We­wnętrz­ny arkusz stylów, czyli znacz­nik <style>, umiesz­cza się w części na­głów­ko­wej strony, a nie w ciele i nie przy znacz­ni­ku, któ­re­go do­ty­czy.
  • 4.
    Wy­ma­ga­nym ele­men­tem sekcji head jest title. Ko­mu­ni­kat wa­li­da­to­ra o bra­ku­ją­cym obo­wiąz­ko­wym dziec­ku ele­men­tu head do­ty­czy wła­śnie tytułu, a tekst z <title> wy­świe­tla się na karcie prze­glą­dar­ki, nie na ba­ne­rze strony.
W za­da­niu prak­tycz­nym szkie­let z tej lekcji prze­pi­su­je się jako pierw­szy, zanim po­wsta­nie ja­ka­kol­wiek treść, i spraw­dza po kolei cztery wy­ma­ga­nia ar­ku­sza: <!DOCTYPE html> w pierw­szym wier­szu, <meta charset="UTF-8"> jako pierw­sze dziec­ko head, lang="pl" w znacz­ni­ku <html> i tytuł strony w <title>. Wiersz z <link> do pliku styl.css do­pi­su­je się od razu, nawet zanim ten plik po­wsta­nie, bo do­łą­cze­nie ze­wnętrz­ne­go ar­ku­sza jest osobno punk­to­wa­ne.
Pu­łap­ka: sama de­kla­ra­cja charset nie zmieni pliku za­pi­sa­ne­go w innym ko­do­wa­niu. Plik index.html trzeba za­pi­sać w edy­to­rze jako UTF-8, ina­czej pol­skie litery za­mie­nią się w krzaki mimo po­praw­ne­go wpisu w head.

Ściąga

Zapis
Znaczy
<!DOCTYPE html>
pierw­szy wiersz pliku, do­ku­ment w HTML5
<html lang="pl">
ele­ment ko­rze­nio­wy, język treści polski
<head>
in­for­ma­cje o do­ku­men­cie, nie­wi­docz­ne w oknie strony
<meta charset="UTF-8">
ko­do­wa­nie znaków, pierw­sze dziec­ko head
<title>
tytuł na karcie prze­glą­dar­ki, wy­ma­ga­ny przez wa­li­da­tor
<meta name="viewport" content="width=device-width, initial-scale=1">
do­pa­so­wa­nie sze­ro­ko­ści widoku do ekranu te­le­fo­nu
<meta name="description" content="...">
stresz­cze­nie strony dla wy­szu­ki­war­ki
<link rel="stylesheet" href="styl.css">
do­łą­cze­nie ze­wnętrz­ne­go ar­ku­sza stylów
<style>
we­wnętrz­ny arkusz stylów, umiesz­cza­ny w head
<script>
skrypt, zwykle na końcu body
<body>
cała treść wi­docz­na na stro­nie
<!-- notatka -->
ko­men­tarz, nie wy­świe­tla się w oknie
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Jak działa strona WWW: klient, serwer, HTTP, URL i standardynastępna: Tekst w HTML: nagłówki, akapity, formatowanie, encje i znaki specjalnespis działu: HTML

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (39)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.