ZAWODNIK

Tekst w HTML: nagłówki, akapity, formatowanie, encje i znaki specjalne

INF.03 · teoria
autor: redakcja · 07.09.2026 · aktualizacja: 08.09.2026
Nagłówki od h1 do h6, akapit i łamanie wiersza, cytaty, formatowanie znaczeniowe kontra wizualne (strong, b, em, i), indeksy górne i dolne oraz encje znaków specjalnych. Lekcja 3.3 kursu INF.03.

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

Przejrzyj pytania: htmlĆwicz dział: html
Hie­rar­chia treści to układ na­głów­ków i aka­pi­tów, z któ­re­go prze­glą­dar­ka, czyt­nik ekranu i wy­szu­ki­war­ka od­czy­tu­ją, co na stro­nie jest ważne i który frag­ment należy do któ­re­go. Buduje się ją dwoma ro­dza­ja­mi znacz­ni­ków: na­głów­ka­mi od <h1> do <h6> oraz aka­pi­tem <p>, a po­je­dyn­cze słowa w środku tekstu opi­su­ją znacz­ni­ki for­ma­to­wa­nia i encje. W części pi­sem­nej wra­ca­ją py­ta­nia o to, które znacz­ni­ki tworzą hie­rar­chię, ile jest po­zio­mów na­głów­ków, czym <strong> i <em> różnią się od <b> i <i> oraz jaki znak wy­świe­tli dana encja. W za­da­niu prak­tycz­nym arkusz pisze wprost, że dany napis ma być na­głów­kiem pierw­sze­go, trze­cie­go albo czwar­te­go stop­nia, a po­zo­sta­ły tekst aka­pi­tem.

Na­głów­ki od h1 do h6

Na­głó­wek (heading, tytuł frag­men­tu) to znacz­nik, który nazywa ka­wa­łek treści i mówi, jak głę­bo­ko ten ka­wa­łek leży w struk­tu­rze strony. Po­zio­mów jest do­kład­nie sześć, od <h1> do <h6>, nie ma po­zio­mu siód­me­go ani ósmego. <h1> jest naj­waż­niej­szy, <h6> naj­mniej ważny.
Poziom
Rola w hie­rar­chii
Przy­kład ze sklepu
<h1>
tytuł całej strony, jeden na stronę
Sklep kom­pu­te­ro­wy
<h2>
nazwa działu strony
Mo­ni­to­ry
<h3>
nazwa po­zy­cji w dziale
Mo­ni­tor 24
<h4> do <h6>
pod­punk­ty we­wnątrz po­zy­cji
Dane tech­nicz­ne
Obo­wią­zu­ją dwie zasady. Pierw­sza: jeden <h1> na stronę, bo strona ma jeden temat główny. Druga: nie prze­ska­ku­je się po­zio­mów, więc po <h2> idzie <h3>, a nie od razu <h5>. Strona na­sze­go sklepu wy­glą­da tak:
<h1>Sklep komputerowy</h1> <h2>Monitory</h2> <h3>Monitor 24</h3> <p>Matryca IPS, przekątna 24 cale, jedno złącze HDMI.</p> <h3>Monitor 27</h3> <p>Matryca IPS, przekątna 27 cali, dwa złącza HDMI.</p> <h2>Akcesoria</h2> <h3>Klawiatura</h3> <p>Klawiatura mechaniczna, układ polski programisty.</p>
Z samego kodu widać całą struk­tu­rę: sklep dzieli się na mo­ni­to­ry i ak­ce­so­ria, a w mo­ni­to­rach stoją dwa modele. Na­głó­wek niesie ZNACZENIE, nie roz­miar. To, że <h1> jest do­myśl­nie duży i po­gru­bio­ny, a <h6> mniej­szy od zwy­kłe­go tekstu, to tylko do­myśl­ny styl prze­glą­dar­ki. Roz­miar, kolor i krój zmie­nia się wła­ści­wo­ścia­mi CSS, opi­sa­ny­mi w dziale o sty­lach. Wybór po­zio­mu nie może więc za­le­żeć od tego, jak duży ma być napis: mały napis, który nazywa dział, zo­sta­je <h2> i do­sta­je mniej­szy roz­miar w ar­ku­szu stylów.
Pu­łap­ka: na­głów­ka nie za­stę­pu­je po­gru­bio­ny akapit. Zapis <p><b>Monitory</b></p> wy­glą­da po­dob­nie, ale dla wy­szu­ki­war­ki i czyt­ni­ka ekranu jest zwy­kłym zda­niem, nie ty­tu­łem działu.

Akapit i po­zo­sta­łe bloki tekstu

Akapit <p> (paragraph, akapit) to blok zwy­kłe­go tekstu. Prze­glą­dar­ka za­czy­na go od nowej linii i dodaje odstęp nad nim i pod nim. Ma znacz­nik otwie­ra­ją­cy i za­my­ka­ją­cy, a jego treść jest tym, co czyta użyt­kow­nik.
Białe znaki w HTML zwi­ja­ją się do jednej spacji: dzie­sięć spacji, ta­bu­la­tor i znak końca wier­sza dają w oknie prze­glą­dar­ki do­kład­nie jedną spację. Wci­śnię­cie Entera w edy­to­rze nie łamie zatem wier­sza na stro­nie. Do zła­ma­nia wier­sza służy <br> (break, prze­rwa­nie), znacz­nik pusty, bez wersji za­my­ka­ją­cej. Po­zio­mą kreskę od­dzie­la­ją­cą części tekstu rysuje <hr> (horizontal rule, linia po­zio­ma), rów­nież pusty.
Gdy tekst ma za­cho­wać spacje, ta­bu­la­to­ry i po­dzia­ły wier­szy do­kład­nie tak, jak w kodzie, używa się <pre> (preformatted, tekst pre­for­ma­to­wa­ny). Za­war­tość do­sta­je czcion­kę o stałej sze­ro­ko­ści znaku, więc <pre> nadaje się na li­sting albo wydruk kon­fi­gu­ra­cji.
Cytaty mają dwa znacz­ni­ki i to jest częste py­ta­nie. <blockquote> to cytat blo­ko­wy: za­czy­na się od nowej linii, może za­wie­rać kilka aka­pi­tów, a prze­glą­dar­ka daje mu wspól­ne wcię­cie. <q> (quote, cytat) jest cy­ta­tem w wier­szu, we­wnątrz zdania, a prze­glą­dar­ka sama do­kła­da wokół niego cu­dzy­sło­wy. Skrót opi­su­je <abbr> (abbreviation, skrót): roz­wi­nię­cie wpi­su­je się w atry­but title i po­ka­zu­je się ono w dymku po na­je­cha­niu kur­so­rem. Dane kon­tak­to­we autora strony tra­fia­ją do <address>, do­myśl­nie po­chy­lo­ne­go.
<p>Zapraszamy do sklepu.<br>Czynne od 9 do 17.</p> <hr> <p>Monitor ma złącze <abbr title="High Definition Multimedia Interface">HDMI</abbr>.</p> <blockquote>Monitor przyszedł następnego dnia, działa bez zarzutu.</blockquote> <p>Anna napisała krótko: <q>polecam</q>.</p> <address>Sklep komputerowy, ul. Krótka 3, Kraków</address>

For­ma­to­wa­nie w wier­szu: zna­cze­nie kontra wygląd

Znacz­ni­ki for­ma­to­wa­nia opi­su­ją po­je­dyn­cze słowa we­wnątrz aka­pi­tu. Dzielą się na dwie grupy: zna­cze­nio­we mówią, CZYM jest frag­ment, wi­zu­al­ne mówią tylko, JAK ma wy­glą­dać. Para <strong> i <b> wy­glą­da iden­tycz­nie (po­gru­bie­nie), lecz <strong> znaczy „to jest ważne", a <b> znaczy tylko „pogrub". Tak samo <em> (emphasis, nacisk) i <i> dają po­chy­le­nie, tyle że <em> niesie nacisk w zdaniu, a <i> sam wygląd. W HTML5 pisze się zna­cze­nio­we.
Znacz­nik
Znaczy
Do­myśl­ny wygląd
<strong>
treść ważna
po­gru­bie­nie
<b>
wy­róż­nie­nie bez zna­cze­nia
po­gru­bie­nie
<em>
nacisk w zdaniu
po­chy­le­nie
<i>
inny cha­rak­ter tekstu
po­chy­le­nie
<u>
tekst wy­róż­nio­ny ina­czej
pod­kre­śle­nie
<s>
treść nie­ak­tu­al­na
prze­kre­śle­nie
<del>
frag­ment usu­nię­ty
prze­kre­śle­nie
<ins>
frag­ment wsta­wio­ny
pod­kre­śle­nie
<mark>
frag­ment za­zna­czo­ny
żółte tło
<small>
drobny druk
mniej­sza czcion­ka
<sub>
indeks dolny
ob­ni­żo­ny, mniej­szy
<sup>
indeks górny
pod­nie­sio­ny, mniej­szy
<code>
kod kom­pu­te­ro­wy
czcion­ka o stałej sze­ro­ko­ści
<kbd>
kla­wisz do wci­śnię­cia
czcion­ka o stałej sze­ro­ko­ści
<span>
po­jem­nik bez zna­cze­nia
bez zmiany
<p><strong>Uwaga:</strong> zostały <em>dwie</em> sztuki.</p> <p>Cena: <del>990 zł</del> <ins>790 zł</ins></p> <p>Blat 1,2 m<sup>2</sup>, chłodzenie wodne H<sub>2</sub>O.</p> <p>Wciśnij <kbd>Ctrl</kbd> i <kbd>S</kbd>, aby zapisać plik <code>index.html</code>.</p> <p>Promocja <mark>tylko dziś</mark>, <small>szczegóły w regulaminie</small>.</p>
Znacz­nik <span> ni­cze­go nie zmie­nia w wy­glą­dzie. Jest po­jem­ni­kiem, do któ­re­go przy­pi­na się klasę albo iden­ty­fi­ka­tor, żeby sfor­ma­to­wać ka­wa­łek zdania w CSS. Znacz­ni­ki <font>, <center> i <big> po­cho­dzą z HTML 4, w HTML5 ich rolę prze­ję­ły wła­ści­wo­ści CSS, ale py­ta­nia o nie nadal krążą w ban­kach.

Encje i znaki spe­cjal­ne

Encja (entity, jed­nost­ka zna­ko­wa) to zapis znaku przez nazwę albo numer, za­czy­na­ją­cy się zna­kiem & i koń­czą­cy śred­ni­kiem. Po­trze­ba jej wtedy, gdy znak ma w HTML własne za­da­nie i wpi­sa­ny wprost zo­stał­by uznany za kod. Ostry nawias otwie­ra­ją­cy za­czy­na znacz­nik, więc w tek­ście za­pi­su­je się go jako &lt;, a am­per­sand za­czy­na encję, więc pisze się &amp;.
Encja
Znak
&lt;
znak mniej­szo­ści, czyli ostry nawias otwie­ra­ją­cy
&gt;
znak więk­szo­ści, czyli ostry nawias za­my­ka­ją­cy
&amp;
am­per­sand
&quot;
cu­dzy­słów prosty
&nbsp;
spacja nie­roz­dzie­la­ją­ca
&copy;
znak praw au­tor­skich
&reg;
znak za­strze­żo­ne­go znaku to­wa­ro­we­go
&euro;
symbol euro
&deg;
sto­pień
Ten sam znak można za­pi­sać nu­me­rem: &#169; w sys­te­mie dzie­sięt­nym i &#x00A9; w szes­nast­ko­wym dają to samo, co &copy;. Zapis nu­me­rycz­ny przy­da­je się przy zna­kach, które nazwy nie mają.
Pol­skich liter encje nie do­ty­czą. Gdy do­ku­ment de­kla­ru­je ko­do­wa­nie znaków przez <meta charset="UTF-8">, opi­sa­ne w lekcji Szkie­let do­ku­men­tu HTML5, litery ą, ć, ę i ż wpi­su­je się wprost z kla­wia­tu­ry. Encji wy­ma­ga­ją tylko znaki o roli skła­dnio­wej.
Pu­łap­ka: &nbsp; to spacja nie­roz­dzie­la­ją­ca, czyli taka, w której prze­glą­dar­ka nie złamie wier­sza. To nie jest „więk­szy odstęp" ani sposób na wcię­cie aka­pi­tu, choć kilka takich encji obok siebie fak­tycz­nie nie zwinie się do jednej spacji.

Blo­ko­wy kontra w wier­szu

Ele­ment blo­ko­wy (block, blo­ko­wy) za­czy­na się od nowej linii i zaj­mu­je całą do­stęp­ną sze­ro­kość: tak za­cho­wu­ją się <p>, na­głów­ki od <h1> do <h6>, <div>, <hr> i <blockquote>. Ele­ment w wier­szu (inline, li­nio­wy) stoi w środku linii tekstu i zaj­mu­je tylko tyle miej­sca, ile jego treść: <strong>, <em>, <span>, <a>, <img>. Do gru­po­wa­nia w blok służy <div> (division, po­dział), po­jem­nik bez wła­sne­go zna­cze­nia, któ­re­go od­po­wied­ni­kiem w wier­szu jest <span>. Ele­ment blo­ko­wy nie mieści się w aka­pi­cie, więc <p> w <p> ani <div> w <p> to błąd wa­li­da­cji: prze­glą­dar­ka domyka wtedy pierw­szy akapit sama i układ roz­jeż­dża się w miej­scu, któ­re­go w kodzie nie widać.

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne z tej lekcji są krót­kie i po­wta­rzal­ne. Hie­rar­chię treści wi­try­ny de­fi­niu­ją znacz­ni­ki <h1>, <h2> i <p>, a nie <div>, nie tabela z ram­ka­mi i nie akapit z po­gru­bie­niem. Na­głów­ki wy­stę­pu­ją wy­łącz­nie w za­kre­sie od <h1> do <h6>, czyli po­zio­mów jest sześć. Znacz­ni­ki <strong> i <em> od­po­wia­da­ją wi­zu­al­nie znacz­ni­kom <b> i <i>. Zapis &lt; wy­świe­tla znak mniej­szo­ści. Cytat z kil­ko­ma aka­pi­ta­mi i wspól­nym wcię­ciem to <blockquote>, cytat w środku zdania to <q>. Skrót z roz­wi­nię­ciem w dymku to <abbr> z atry­bu­tem title, a nie z alt ani name. Indeks górny daje <sup>, dolny <sub>, prze­kre­śle­nie <s>, a ory­gi­nal­ne od­stę­py i po­dzia­ły wier­szy za­cho­wu­je <pre>. W py­ta­niu o ele­ment blo­ko­wy od­po­wie­dzią jest <p>, bo <span>, <strong> i <img> stoją w wier­szu.
W za­da­niu prak­tycz­nym stop­nie na­głów­ków wy­pi­su­je arkusz: zwykle <h1> w ba­ne­rze, <h3> nad blo­ka­mi i <h4> nad po­zy­cja­mi listy. Trzeba użyć do­kład­nie tych stopni, które podano, nawet jeśli prze­ska­ku­ją poziom, bo oce­nia­na jest zgod­ność z tre­ścią po­le­ce­nia. Napisy prze­pi­su­je się co do znaku, z pol­ski­mi li­te­ra­mi. Tekst al­ter­na­tyw­ny ob­ra­zów należy do lekcji Obrazy i mul­ti­me­dia, a po­dział strony na baner, menu i stopkę do lekcji Znacz­ni­ki sekcji.

Ściąga

Ele­ment
Znaczy
Przy­kład
<h1> do <h6>
sześć po­zio­mów na­głów­ków, jeden <h1> na stronę
<h1>Sklep komputerowy</h1>
<p>
akapit tekstu
<p>Zapraszamy do sklepu.</p>
<br>
zła­ma­nie wier­sza, znacz­nik pusty
Czynne<br>od 9 do 17
<hr>
po­zio­ma linia od­dzie­la­ją­ca
<hr>
<pre>
za­cho­wu­je spacje i po­dzia­ły wier­szy
<pre> dwie spacje</pre>
<blockquote>
cytat blo­ko­wy z wcię­ciem
<blockquote>Polecam.</blockquote>
<q>
cytat w wier­szu, cu­dzy­sło­wy od prze­glą­dar­ki
napisała <q>polecam</q>
<abbr>
skrót z roz­wi­nię­ciem w atry­bu­cie title
<abbr title="...">HDMI</abbr>
<strong>, <em>
treść ważna, nacisk w zdaniu
<strong>Uwaga:</strong>
<b>, <i>
ten sam wygląd bez zna­cze­nia
<b>tekst</b>
<del>, <ins>
frag­ment usu­nię­ty, frag­ment wsta­wio­ny
<del>990 zł</del>
<sub>, <sup>
indeks dolny, indeks górny
m<sup>2</sup>
<mark>, <small>
za­zna­cze­nie, drobny druk
<mark>tylko dziś</mark>
<code>, <kbd>
kod kom­pu­te­ro­wy, kla­wisz
<kbd>Ctrl</kbd>
<span>, <div>
po­jem­nik w wier­szu, po­jem­nik blo­ko­wy
<span class="cena">99 zł</span>
&lt;, &gt;, &amp;
znaki o roli skła­dnio­wej
&lt; daje znak mniej­szo­ści
&nbsp;
spacja nie­roz­dzie­la­ją­ca
10&nbsp;zł
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Szkielet dokumentu HTML5: doctype, head, meta, title, bodynastępna: Znaczniki sekcji: header, nav, main, section, article, aside, footerspis 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ą.