ZAWODNIK

Znaczniki sekcji: header, nav, main, section, article, aside, footer

INF.03 · teoria
autor: redakcja · 07.09.2026 · aktualizacja: 08.09.2026
Siedem znaczników sekcji HTML5: co znaczy każdy z nich, ile razy może wystąpić, czym różni się od znacznika div i jak z rysunku układu w arkuszu CKE zbudować strukturę strony. Lekcja 3.4 kursu INF.03.

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

Przejrzyj pytania: htmlĆwicz dział: html
Znacz­ni­ki sekcji to ele­men­ty HTML5, które dzielą stronę na na­zwa­ne części: baner, menu, treść główną, panel boczny i stopkę. Nazwa znacz­ni­ka mówi, CZYM jest blok, więc struk­tu­rę strony widać w samym kodzie, a nie do­pie­ro na ekra­nie po włą­cze­niu stylów. W części pi­sem­nej wra­ca­ją py­ta­nia „które znacz­ni­ki służą do bu­do­wa­nia struk­tu­ry strony" i „dla której wersji języka cha­rak­te­ry­stycz­ne są <header>, <article>, <section> i <footer>". W części prak­tycz­nej arkusz daje RYSUNEK układu i każe zbu­do­wać z niego bloki „za pomocą znacz­ni­ków sekcji": to osobno oce­nia­ny re­zul­tat, więc <div> po­sta­wio­ny tam, gdzie miał być <nav>, kosz­tu­je punkt.

Siedem znacz­ni­ków sekcji

Znacz­nik sekcji to ele­ment blo­ko­wy, który sam z siebie nie zmie­nia wy­glą­du tekstu, tylko nazywa frag­ment strony. Prze­glą­dar­ka wy­świe­tli za­war­tość <section> do­kład­nie tak samo jak za­war­tość <div>, bo róż­ni­ca leży w zna­cze­niu, nie w wy­glą­dzie. Znacz­ni­ków jest siedem i wszyst­kie stoją we­wnątrz <body>, czyli w tej części do­ku­men­tu, którą opi­su­je lekcja o szkie­le­cie do­ku­men­tu.
Znacz­nik
Znaczy
Typowa za­war­tość
<header>
na­głó­wek strony albo bloku
baner z ty­tu­łem wi­try­ny i logo
<nav>
na­wi­ga­cja
menu, czyli zestaw od­no­śni­ków do pod­stron
<main>
treść główna
to, po co użyt­kow­nik wszedł na tę pod­stro­nę
<section>
sekcja te­ma­tycz­na
wy­dzie­lo­na część treści z wła­snym na­głów­kiem
<article>
sa­mo­dziel­na całość
opis pro­duk­tu, wpis, ko­men­tarz, wia­do­mość
<aside>
treść po­bocz­na
panel boczny, re­kla­ma, lista po­le­ca­nych
<footer>
stopka
kon­takt, adres, prawa au­tor­skie, mapa wi­try­ny
Liczba wy­stą­pień nie jest dla wszyst­kich taka sama. <main> może wy­stą­pić na stro­nie tylko RAZ i nie wolno go włożyć do <article>, <aside>, <header>, <footer> ani <nav>, bo treści głów­nej z de­fi­ni­cji jest jedna. Po­zo­sta­łe sześć wolno po­wta­rzać: <nav> bywa dwa razy (menu górne i menu w stopce), <section> i <article> tyle razy, ile jest bloków treści, a <header> i <footer> raz dla całej strony plus po jednym w każdym ar­ty­ku­le.
Dwa znacz­ni­ki mylą się naj­czę­ściej. Spraw­dzian jest taki: jeśli blok ma sens wyjęty ze strony i wkle­jo­ny gdzie in­dziej, na przy­kład w wy­ni­kach wy­szu­ki­wa­nia albo w czyt­ni­ku wia­do­mo­ści, to <article>. Jeśli jest ka­wał­kiem więk­szej ca­ło­ści i bez niej traci sens, to <section>. W skle­pie <section> gru­pu­je pro­mo­cje, a każdy po­je­dyn­czy pro­dukt w środku to <article>, bo opis Mo­ni­to­ra 24 czyta się osobno.

Kiedy <div>, a kiedy znacz­nik sekcji

<div> (division, po­dział) to po­jem­nik bez zna­cze­nia: gru­pu­je ele­men­ty, żeby dało się je razem osty­lo­wać albo prze­su­nąć, ale nie mówi o nich nic. Przed HTML5 nie było czym po­wie­dzieć, więc cała strona skła­da­ła się z <div id="header">, <div id="menu"> i <div id="stopka">, a jesz­cze wcze­śniej z tabel i ramek <frame>. Ramki i ukła­da­nie strony na ta­be­lach są dziś prze­sta­rza­łe, ukła­dem zaj­mu­je się CSS. HTML5 dał siedem go­to­wych nazw, więc <div> zo­sta­je tam, gdzie żadna z nich nie pasuje: opa­ko­wa­nie ogra­ni­cza­ją­ce sze­ro­kość treści, siatka na dwie ko­lum­ny, kon­te­ner dla skryp­tu.
Se­man­ty­ka, czyli na­zy­wa­nie bloków zgod­nie z ich rolą, ma trzy prak­tycz­ne skutki. Czyt­nik ekranu po­tra­fi prze­sko­czyć od razu do <main> albo wy­mie­nić wszyst­kie <nav> na stro­nie, więc osoba nie­wi­do­ma nie słucha menu przy każdej pod­stro­nie. Wy­szu­ki­war­ka od­róż­nia treść wła­ści­wą od panelu z re­kla­ma­mi, co ma zna­cze­nie przy po­zy­cjo­no­wa­niu. Trzeci skutek jest naj­bar­dziej co­dzien­ny: w kodzie z na­zwa­mi widać struk­tu­rę bez czy­ta­nia klas, a w kodzie z samych <div> trzeba jej się do­my­ślać.
Pu­łap­ka: <div> i <section> wy­glą­da­ją na stro­nie iden­tycz­nie, dopóki nie ma CSS. Wygląd nie jest do­wo­dem, że kod jest po­praw­ny, a punkt idzie za nazwę znacz­ni­ka.

Układ strony sklepu z ry­sun­ku

Arkusz prak­tycz­ny nie opi­su­je układu sło­wa­mi, tylko rysuje go pro­sto­ką­ta­mi z pod­pi­sa­mi. Nasz sklep kom­pu­te­ro­wy ma układ typowy dla takich ry­sun­ków.
Układ sekcji strony sklepu: baner header, pod nim menu nav, niżej panel boczny aside obok bloku main z dwoma artykułami, na dole stopka footer
Ry­su­nek mówi trzy rzeczy: jakie bloki są, w jakiej ko­lej­no­ści idą od góry i które stoją obok siebie. HTML za­pi­su­je dwie pierw­sze. Tego, że panel boczny jest po lewej, a treść po prawej, w HTML nie ma wcale: ko­lej­ność znacz­ni­ków to ko­lej­ność czy­ta­nia, a usta­wie­nie dwóch bloków obok siebie robi CSS, wła­ści­wo­ścia­mi układu z osob­ne­go działu kursu. Dla­te­go <aside> i <main> stoją w kodzie jeden pod drugim, a na ekra­nie i tak wy­lą­du­ją w dwóch ko­lum­nach.
<body> <header><h1>Sklep komputerowy</h1></header> <nav> <a href="produkty.html">Produkty</a> <a href="kontakt.html">Kontakt</a> </nav> <aside><p>Wysyłka w 24 godziny.</p></aside> <main> <section id="promocje"> <h2>Promocje</h2> <article><h3>Monitor 24</h3></article> </section> </main> <footer><address>ul. Kolejowa 5</address></footer> </body>
Baner to <header> z na­głów­kiem <h1>, czyli z nazwą wi­try­ny; hie­rar­chię na­głów­ków opi­su­je lekcja o tek­ście i na­głów­kach. Menu to <nav> z od­no­śni­ka­mi, a gdy arkusz wymaga menu jako listy punk­to­wa­nej, od­no­śni­ki wkłada się do <ul> i <li>, co po­ka­zu­je lekcja o li­stach, ta­be­lach i od­no­śni­kach. Panel boczny to <aside> z krót­kim tek­stem. Blok główny to <main>, a w nim <section> z na­głów­kiem i ar­ty­ku­ła­mi pro­duk­tów. Stopka to <footer>, a dane kon­tak­to­we w środku ozna­cza <address>, znacz­nik prze­zna­czo­ny wła­śnie do adresu i kon­tak­tu, nie do do­wol­ne­go tekstu na dole strony.

Za­gnież­dża­nie, id i class

Znacz­ni­ki sekcji za­gnież­dża­ją się w sobie i to jest nor­mal­ny sposób ich uży­wa­nia. <section> leży w <main>, <article> leży w <section>, a we­wnątrz <article> może stać własny <header> z ty­tu­łem i datą oraz własny <footer> z au­to­rem. Nie ma w tym sprzecz­no­ści: te dwa znacz­ni­ki opi­su­ją górę i dół naj­bliż­sze­go bloku, nie­ko­niecz­nie całej strony. Zasada, o której łatwo za­po­mnieć: każda sekcja po­win­na za­czy­nać się na­głów­kiem, żeby wia­do­mo było, co gru­pu­je. W bloku wyżej <section> ma <h2>, a <article> ma <h3>.
Bloki trzeba jesz­cze umieć wska­zać z ze­wnątrz i do tego służą dwa atry­bu­ty. id (iden­ty­fi­ka­tor) to nazwa uni­kal­na: jedna war­tość może wy­stą­pić na stro­nie tylko raz, więc id="promocje" z bloku wyżej nie po­wtó­rzy się w żadnym innym ele­men­cie. class (klasa) to nazwa zbior­cza: tę samą klasę wolno dać dzie­się­ciu ele­men­tom i wszyst­kie do­sta­ną ten sam styl. Jeden ele­ment może mieć obie rzeczy naraz i kilka klas roz­dzie­lo­nych spacją.
Po co to jest, widać w trzech miej­scach. CSS wy­bie­ra ele­ment po id za­pi­sem z krzy­ży­kiem, a po klasie za­pi­sem z kropką. JavaScript sięga po ele­ment metodą, która szuka po iden­ty­fi­ka­to­rze. Trze­cie za­sto­so­wa­nie zo­sta­je w samym HTML: od­no­śnik href="#promocje" prze­wi­ja stronę do ele­men­tu o tym id, więc menu może pro­wa­dzić do bloku na tej samej stro­nie, a nie do osob­ne­go pliku.

Pro­jekt układu: od ry­sun­ku do znacz­ni­ków

Pod­sta­wa pro­gra­mo­wa wymaga za­pro­jek­to­wa­nia układu sekcji i zbu­do­wa­nia struk­tu­ry zgod­nej z pro­jek­tem, więc eg­za­min spraw­dza dwie umie­jęt­no­ści naraz: od­czy­ta­nie pro­jek­tu i za­pi­sa­nie go w kodzie. Ko­lej­ność pracy jest zawsze ta sama i nie za­czy­na się od pi­sa­nia znacz­ni­ków.
  • 1.
    Nazwij bloki. Przy każdym pro­sto­ką­cie z ry­sun­ku dopisz sobie znacz­nik: baner to <header>, pasek od­no­śni­ków to <nav>, panel przy kra­wę­dzi to <aside>, blok z tre­ścią to <main>, pasek na dole to <footer>.
  • 2.
    Ustal ko­lej­ność od góry do dołu, czy­ta­jąc ry­su­nek wier­sza­mi. To będzie ko­lej­ność znacz­ni­ków w pliku.
  • 3.
    Za­znacz, które bloki stoją w jednym wier­szu obok siebie. Te idą w kodzie jeden po drugim, a roz­sta­wi je CSS.
  • 4.
    Sprawdź za­war­tość każ­de­go bloku: na­głó­wek, liczba ar­ty­ku­łów, obraz, lista. Do­pie­ro teraz pisz kod.
Układy, które wra­ca­ją w ar­ku­szach, są trzy. Jedna ko­lum­na: baner, menu, treść i stopka jeden pod drugim. Dwie ko­lum­ny: to samo, ale w środku panel boczny i blok główny obok siebie, przy czym panel bywa raz po lewej, raz po prawej stro­nie. Trzy ko­lum­ny: dwa panele boczne po obu stro­nach bloku głów­ne­go, czyli dwa razy <aside>. Nazwy z ar­ku­sza brzmią po polsku: „baner", „panel lewy", „panel prawy", „blok główny", „stopka", i to ty prze­kła­dasz je na znacz­ni­ki. Sam blok główny bywa po­dzie­lo­ny na dwa mniej­sze bloki jeden nad drugim i wtedy każdy z nich do­sta­je własny <section> albo <article>.

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne o sekcje mają kilka sta­łych kształ­tów. Pierw­szy to wska­za­nie grupy, która NIE buduje struk­tu­ry strony: między <header> i <footer>, <section> oraz <div> a ze­sta­wem <i>, <b>, <u> błędna jest ta ostat­nia trójka, bo te znacz­ni­ki zmie­nia­ją wygląd tekstu w aka­pi­cie, a nie dzielą strony na bloki. Drugi kształt to po­je­dyn­czy znacz­nik do wska­za­nia: który z <em>, <aside>, <input>, <mark> może po­słu­żyć do budowy struk­tu­ry, czyli <aside>. Trzeci to przy­pi­sa­nie wersji języka: <header>, <article>, <section> i <footer> są cha­rak­te­ry­stycz­ne dla HTML5, a nie dla XHTML 1.1 ani HTML 4.01, bo w star­szych wer­sjach ich po prostu nie było. Czwar­ty to <div> jako od­po­wiedź na py­ta­nie o gru­po­wa­nie ob­sza­rów na po­zio­mie bloków, bez zna­cze­nia se­man­tycz­ne­go. Wraca też ry­su­nek pro­jek­tu z pod­pi­sa­ny­mi sek­cja­mi i po­le­ce­nie w ro­dza­ju „sekcja B po­win­na być za­war­ta w znacz­ni­ku", gdzie od­po­wiedź od­czy­tu­je się z po­ło­że­nia bloku: pasek pod ba­ne­rem to menu, czyli <nav>.
W za­da­niu prak­tycz­nym ry­su­nek układu jest po­le­ce­niem, nie ilu­stra­cją. Zbuduj bloki do­kład­nie w tej ko­lej­no­ści, w jakiej stoją na ry­sun­ku, i użyj nazw znacz­ni­ków, o któ­rych mówi treść za­da­nia. Jeśli arkusz pisze „za pomocą znacz­ni­ków sekcji", to za­mia­na <section> na <div> ozna­cza utratę punktu za ten re­zul­tat, choć strona będzie wy­glą­dać iden­tycz­nie. Od­wrot­nie też: gdy za­da­nie wy­mie­nia kon­kret­ne bloki, do­kła­da­nie wła­snych sekcji ponad pro­jekt nic nie daje. Zanim przej­dziesz do stylów, sprawdź, czy <main> jest jeden, czy każda sekcja ma na­głó­wek i czy stopka jest ostat­nim blo­kiem w <body>.

Ściąga

Znacz­nik
Znaczy
Ile razy na stro­nie
<header>
baner, na­głó­wek strony albo bloku
wiele, także we­wnątrz <article>
<nav>
na­wi­ga­cja, menu z od­no­śni­ka­mi
wiele, zwykle jeden albo dwa
<main>
treść główna pod­stro­ny
do­kład­nie raz, poza innymi sek­cja­mi
<section>
te­ma­tycz­na część treści z na­głów­kiem
wiele
<article>
sa­mo­dziel­na całość, sen­sow­na poza stroną
wiele
<aside>
panel boczny, treść po­bocz­na
wiele, przy dwóch pa­ne­lach dwa razy
<footer>
stopka z kon­tak­tem i pra­wa­mi
wiele, także we­wnątrz <article>
<div>
po­jem­nik bez zna­cze­nia, do stylu i układu
wiele, gdy żadna nazwa nie pasuje
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Tekst w HTML: nagłówki, akapity, formatowanie, encje i znaki specjalnenastępna: Listy, tabele i odnośniki w HTMLspis 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ą.