Struktura witryny – dostępne rodzaje bloków, semantyka

W poprzednich lekcjach z działu HTML nauczyliśmy się tworzyć przeróżne, fundamentalne elementy HTML: nagłówki, akapity, obrazy, cytaty, tabele, listy, formularze… Lecz jak połączyć to wszystko w spójną, zrozumiałą strukturę? W tym właśnie celu powstały znaczniki strukturalne – zarówno klasyczne jak <div> i <span> oraz nowsze, wprowadzone w standardzie HTML 5 tzw. tagi semantyczne: <main>, <header>, <nav>, <article>, <section>, <aside> oraz <footer>. Semantyka to inaczej nauka o znaczeniu, która zajmuje się badaniem relacji między znakami i rzeczywistością. W HTML 5 ten termin oznacza znaczniki, które niosą znaczenie (czyli np. mówią: “to jest nagłówek”, “to jest menu nawigacyjne”, “to jest stopka”).

W starszych wersjach HTML wszystkie pojemniki realizowaliśmy przy pomocy wszechobecnego div. A zatem przeglądarka nie miała możliwości wiedzieć, który div to nagłówek, który to artykuł, gdzie jest treść poboczna, a który pojemnik to stopka? Całość była jak jeden wielki karton przeprowadzkowy, do którego wrzucono wiele przeróżnych obiektów! Natomiast obecnie, możemy już tworzyć opisane “etykietami” pudełka, dzięki którym “odpakowanie” zawartości (czyli w praktyce zrozumienie struktury witryny) okaże się łatwiejsze dla przeglądarek, robotów indeksujących i czytników ekranowych.

Co daje nam semantyka?

• Większa czytelność kodu – dla nas, dla innych programistów, czytników ekranowych oraz… dla egzaminatora CKE 🙂 Widzimy od razu jakie jest przeznaczenie danego pojemnika strukturalnego (czy to jest menu nawigacyjne, treść poboczna z reklamą, a może stopka?).
• Lepsze pozycjonowanie (SEO) – roboty Google lepiej rozumieją strukturę strony, co ma pozytywny wpływ na pozycję strony w rezultatach wyszukiwania (zwłaszcza w porównaniu do opublikowania tej samej witryny, lecz wykonanej bez semantyki). Zyskujemy naprawdę dużo w kontekście SEO – warto więc zadbać o semantykę!
• Dobra dostępność, w tym współpraca z czytnikami ekranów – osoby słabowidzące, korzystające z technologii asystujących otrzymują jasny komunikat: “to jest artykuł“, “to jest nawigacja“, “to jest treść główna podstrony“.
• Lepsze debugowanie i stylizowanie w CSS – możemy łatwiej tworzyć selektory w arkuszach stylów – na przykład: section h2 {...} albo footer p {...}.

Przykład kodu bez semantyki (słaba implementacja):

<div id="naglowek">Logo i menu</div>
<div id="srodek">Tutaj tekst artykułu</div>
<div id="bok">Reklamy i linki</div>
<div id="stopka">Kontakt i copyright</div>

To samo, lecz z semantyką (dobre podejście):

<header>Logo i menu</header>
<main>
    <article>Tutaj tekst artykułu</article>
    <aside>Reklamy i linki</aside>
</main>
<footer>Kontakt i copyright</footer>

Semantyka to nie fanaberia – to wymóg! Na egzaminie zawodowym INF.03 bardzo często w poleceniu znajdziemy fragment w stylu: “Użyj znaczników semantycznych”, “Stwórz menu główne z użyciem tagów HTML 5” albo moje ulubione (i w sumie dziwnie powiedziane!): “Zbuduj strukturę z użyciem znaczników sekcji”. Tak naprawdę chodzi tutaj o znaczniki semantyczne – do dziś nie wiem czemu CKE używa frazy “znaczników sekcji”. Natomiast – co najważniejsze! – jeśli zignorujemy te wymagania i zamiast semantyki zastosujemy same <div>, to na pewno stracimy punkty! – mimo, iż wizualnie strona może wyglądać poprawnie.

Podsumujmy zatem:

• Semantyka to nadanie treści odpowiedniego znaczenia, a nie tylko wyglądu w przeglądarce.
• Znaczniki takie jak <main>, <article>, <section>, <header>, <nav>, <aside> oraz <footer> pomagają nam tworzyć logiczne i zrozumiałe strony.
• Stosując semantyczny HTML pomagamy sobie, przeglądarce, wyszukiwarce i użytkownikom – lepiej dbamy o dostępność strony.
• Na egzaminie INF.03 semantyka to nie opcja – to obowiązek!

A zatem pora najwyższa na opisanie wszystkich znaczników, które spotykamy w strukturze HTML – zróbmy solidną powtórkę! Jeżeli semantyka jest dla Ciebie totalnie nowym albo zwyczajnie trudniejszym tematem, to gorąco polecam także obejrzeć tutorial video: Nowe znaczniki semantyczne w HTML5 – tam zobaczymy zrealizowanie konkretnego projektu witryny od zera, wraz z poprawną semantyką. A my przejdźmy już do przeglądu tagów!

Znacznik <div>

To najbardziej klasyczny znacznik do grupowania elementów. Używamy go, gdy chcemy zebrać kilka innych znaczników w jeden kontener – np. wszystkie pola formularza, całą kolumnę na stronie, albo grupę artykułów. Znacznik <div> nie niesie sam z siebie żadnej semantyki – nie mówi nic o tym, co zawiera – to tylko “przezroczyste pudełko” do rozmieszczania innych elementów:

<div class="logowanie">
    <label> Login: <input type="text" id="login"> </label>
    <label> Hasło: <input type="password" id="pasdd"> </label>
</div>

Tag <div> definiuje tzw. element blokowy (ang. block-level element), czyli taki, który:

• Rozciąga się na całą szerokość dostępnego miejsca, czyli całego rodzica – np. <body>.
• Zaczyna się w nowej linii i kończy się w nowej linii – czyli nie może “stać obok” innego bloku – układają się one same z siebie jeden pod drugim.
• W praktyce <div> działa trochę jak niewidzialne pudełko, które grupuje inne elementy – teksty, formularze, obrazy, przyciski – i porządkuje ich układ wizualnie na stronie. Jednak w żaden sposób nie informuje przeglądarki, czytnika ekranowego czy robota indeksującego co oznacza zawartość w jego środku.

Znacznik <span>

To odpowiednik div, ale nie jest elementem blokowym tylko liniowym (ang. inline). Czyli jest to kontener, który służy do zaznaczenia (objęcia) elementu w jednej linii, np. jednego wyrazu, obrazu, liczby, ikony etc. W odróżnieniu od elementu blokowego, element liniowy:

• Nie rozciąga się na całą szerokość, tylko obejmuje dokładnie to, co ma w środku (jest “opakowaniem” dla treści – ang. wrapper).
• Nie wprowadza przerwy ani skoku w układzie strony – elementy liniowe nie układają się blokowo (jeden pod drugim) tylko klasycznie obok siebie (jak tekst).

Przykład zastosowania do szybkiego ostylowania treści:

<p>Promocja: <span style="color: green; font-weight: bold;">-50%</span> tylko dziś!</p>

Natomiast podobnie jak <div>, tak samo znacznik <span> nie niesie żadnego znaczenia semantycznego – nie mówi przeglądarce ani algorytmom indeksującym, że coś jest tytułem, cytatem, nazwiskiem, itp. To po prostu neutralny pojemnik, no tyle że w odróżnieniu od bloków zachowuje się inline.

W praktyce, na egzaminie INF.03 pamiętajmy:

• Tag <span> często posłuży do stylizowania fragmentów tekstu w linii,
• Wstawienie spana nie zmieni układu strony (nie robi “entera”, czyli nie zachowa się blokowo),
• Jest często używany w formularzach, np. przy walidacji danych w skryptach (dodanie kolorowego komunikatu),
• Nie jest semantyczny – więc lepiej używać go tylko tam, gdzie chcemy coś pokolorować lub zmienić styl lokalnie.

Znacznik <main>

Znacznik <main> informuje przeglądarkę, czytnik ekranowy oraz robota indeksującego iż to, co znajduje się w jego wnętrzu, stanowi najważniejszy obszar dokumentu HTML – czyli tę część, która jest unikalna dla danej podstrony i której nie powtarzamy np. w nagłówku czy stopce (w których często znajdują się informacje nawigacyjne albo kontaktowe). Tag <main> powinien więc opakowywać “mięso” zawartości – ten content, po który faktycznie wchodzimy w dany serwis – tę realną treść, którą spodziewamy się ujrzeć po kliknięciu na witrynę w rezultatach wyszukiwania Google.

Ważne informacje praktyczne na temat używania tagu <main>:

• Powinien występować tylko raz na stronie (podobnie jak to było z nagłówkiem <h1>),
• Nie umieszczajmy w nim nawigacji, logo serwisu, informacji kontaktowych – to ma być unikalna zawartość podstrony, a nie informacje poboczne!
• Zazwyczaj znajduje się pod nagłówkiem i przed stopką – to “środek” witryny.
• Często stosowaną kombinacją bywa <main> i od razu w środku niego <article> – w końcu często to artykuł stanowi główną treść podstrony.

Zobaczmy przykładowe umiejscowienie tego tagu – jeden raz, pod częścią nagłówkową, a ponad stopką:

<body>

    <header> ... Logo, nawigacja ... </header>
    
    <main>
            
        <article>
                
            <header> ... Nagłówek artykułu ... </header>
            
            <p> ... Unikalna treść artykułu ... </p>

            <footer> ... Stopka wpisu i np. sekcja komentarzy ... </footer> 
                
        </article>
        
    </main>
    
    <footer> ... Informacje kontaktowe ... </footer>

</body>

Reasumując: <main> to główna treść strony – coś, co jest unikalne i najważniejsze. Używamy go tylko raz na stronie! Nie powinien zawierać rzeczy pobocznych i występujących na każdej podstronie (menu, informacje kontaktowe ze stopki etc.). Znakomicie współgra z innymi znacznikami semantycznymi, zwłaszcza z <article>. Na egzaminie INF.03 jego użycie to dobra praktyka i często obowiązek!

Znacznik <header>

To nagłówek danej sekcji podstrony albo też całej witryny. Co ważne – możemy go stosować wielokrotnie – zarówno w głównym layoucie, jak i np. w artykułach, sekcjach, a nawet w aside’ach (kontenerach z treścią poboczną, w tej lekcji także je wkrótce omówimy). Nagłówek często może zawierać:

• nagłówki albo krótki opis wstępny (ang. lead) artykułu,

• logo, menu nawigacyjne główne lub poboczne – w dodatkowym tagu <nav>

Zobaczmy umiejscowienie przykładowych nagłówków:

<body>

    <header> ... Logo, menu główne w <nav> ... </header>
    
    <main>
            
        <article>
                
            <header> 

                 ... Tytuł <h1>, autor, data publikacji oraz lead artykułu  ... 

            </header>
            
            <p> ... Unikalna treść artykułu ... </p>

            <footer> ... Stopka wpisu i np. sekcja komentarzy ... </footer> 
        </article>
        
    </main>
    
    <footer> ... Informacje kontaktowe ... </footer>

</body>

Pierwszy nagłówek <header> jako znajdujący się wewnątrz  <body> zostanie zinterpretowany jako część nagłówkowa dla całej strony, zaś drugi  <header> – znajdujący się w <article> zawierać będzie metadane – tytuł, data publikacji, autor tekstu, akapit wstępny (lead) artykułu – pełni rolę nagłówka lokalnego, wprowadzającego do konkretnego wpisu.

Czego raczej nie umieszczać w <header> ? Zaleca się nie umieszczać w nim stopki, reklam ani pobocznych treści. W końcu nagłówek powinien zawierać elementy wprowadzające do treści, nie treść właściwą czy końcową (podsumowującą).

Znacznik <nav>

Używamy go do otoczenia całego bloku linków prowadzących do innych sekcji strony lub zupełnie innych podstron – jest to więc kontener przeznaczony na menu nawigacyjne. Obecność tego tagu ułatwia organizację nawigacji i pozwala przeglądarce zrozumieć, że w tym kontenerze chodzi o wypisanie opcji “podlinkowanych”:

<nav>
    <ul>
        <li><a href="index.html">Start</a></li>
        <li><a href="blog.html">Blog</a></li>
    </ul>
</nav>

Znacznik ten nie zmienia wyglądu strony (nie dodaje stylu), ale ma ogromne znaczenie semantyczne. Dzięki niemu przeglądarka, roboty indeksujące oraz czytniki ekranów wiedzą, że dany fragment strony to menu – miejsce do zmapowania możliwości “poruszania się” po witrynie. Oczywiście znacznik <ul> oznacza listę nieuporządkowaną, a <li> – poszczególne elementy (itemy) tej listy – a są nimi linki <a>. Współcześnie menu realizujemy zawsze jako listy!

Czy <nav> musi być tylko jeden na podstronę? Absolutnie nie! Możemy wstawić kilka znaczników <nav> na stronie. Na przykład jeden globalny (na górze), a drugi lokalny – np. wewnątrz artykułu lub w bocznej kolumnie, zawierający odnośniki tylko do podsekcji danego artykułu lub kategorii tematycznej.

Gdzie można umieścić <nav>? Podajmy kilka przykładów:

• Bezpośrednio w <body> – jeśli chcemy stworzyć samodzielne menu w postaci np. belki nawigacyjnej.
• Wewnątrz <header> – jako część nagłówkowa – zależnie od tego, gdzie znajduje się nagłówek – np. nagłówek artykułu.
• Wewnątrz <aside> – jako lokalna nawigacja np. po działach bloga albo wewnątrz jednej z kategorii tematycznych.

W praktyce wszystko zależy od naszych intencji, natomiast przestrzegajmy dwóch prostych zasad: opcje nawigacyjne zawsze zamykajmy w <nav>, a ponadto realizujmy poszczególne linki jako itemy listy nieuporządkowanej (w razie potrzeby stylizując ją odpowiednio, usuwając punktor i układając elementy obok siebie – w linii).

Znacznik <article>

Ten znacznik służy w HTML 5 do oznaczania samodzielnych, niezależnych bloków treści, które mogą funkcjonować autonomicznie – czyli zarówno w kontekście naszej strony, ale i poza nią (po udostępnieniu, skopiowaniu czy konwersji do PDF). Jak to rozumieć w praktyce? Jeśli stworzymy wpis na blogu, artykuł w serwisie informacyjnym, komentarz użytkownika, recenzję produktu, wiadomość czy post – to każda taka jednostka treści powinna zostać opakowana właśnie w znacznik <article>, bo jest autonomiczną “jednostką” treści.

Blok <article> zawiera zwykle metadane: własny nagłówek, datę publikacji, autora treści, a często też przyciski udostępniania w social-mediach oraz stopkę z komentarzami. Rozważmy strukturę przykładowego bloga:

<main>		
    <article>
        <header>
            <h1> ... Tytuł wpisu ... </h1>
            <p> ... Metadane - data, autor, kategoria wpisu ... </p>
        </header>
                            
        <section> ... Kilka sekcji artykułu ... </section>
        <section> ... Kilka sekcji artykułu ... </section>
        
        <section>
            <header>
                <h2> ... Sekcja komentarzy ... </h2>
            </header>
    
            <article>
                <header>
                    ... Metadane komentarza - kto i kiedy go zapostował ...
                </header>
                <p> ... Treść komentarza ... </p>          
            </article>
            <article> ... Kolejny komentarz ... </article>
        </section>
    </article>
</main>

Znacznik  <article> umieszczony bezpośrednio w <main>  posłużył do oznaczenia treści dużego artykułu, zbudowanego z kilku sekcji (rozdziałów). A ponadto, także każdy komentarz użytkownika jest samodzielną “jednostką” zawartości i jako autonomiczna treść (bo inny jest autor, data, kontekst, styl wypowiedzi) także każdy komentarz to <article> (lokalnie w sekcji komentarzy naszego “dużego” wpisu).

Zapamiętajmy, iż <article> jest zatem – można powiedzieć: semantycznym odpowiednikiem znacznika <main> – niesie konkretne znaczenie! Przeglądarka, czytnik ekranu czy robot indeksujący Google, wiedzą, że zawartość znacznika <article> to treść, która może być niezależna, autonomiczna i zrozumiała sama w sobie – stanowi pewną całość (“jednostkę”) treści.

Znacznik <section>

Służy do oznaczania logicznie wydzielonych sekcji treści w dokumencie. Jest to więc coś w rodzaju rozdziału w książce czy fragmentu artykułu w gazecie. Jest to wydzielona część mająca swoją tematykę – często zawierać będzie własny nagłówek, a czasem także dodatkowe podsekcje lub wprowadzenie (ang. lead).

Używajmy <section> wszędzie tam, gdy chcemy uporządkować zawartość w spójne, sensowne “bloki tematyczne”. Co ważne – taki znacznik również niesie znaczenie semantyczne: przeglądarka, czytniki ekranów i roboty indeksujące Google wiedzą, że dana sekcja strony to rozdział/blok/segment mający konkretny temat lub spełniający zadaną funkcję. Zobaczmy przykład:

<article>
    <header>
        <h1>Misja firmy WebTech</h1>
        <p> ... </p>
    </header>

    <section>
        <h2>Zespół programistów</h2>
        <p> ... </p>
    </section>

    <section>
        <h2>Technologie</h2>
        <p> ... </p>
    </section>

    <section>
        <h2>Nasze realizacje</h2>
        <p> ... </p>
    </section>

    <footer>
        <h2>Kontakt z nami</h2>
        <p> ... </p>
    </footer>
</article>

Tag <article> otacza cały autonomiczny tekst o firmie – to ewidentnie “samodzielna jednostka treści” podzielona na rozdziały. Każda sekcja odpowiada za inny aspekt informacji (misja, zespół, technologie, porfolio…). Dzięki takiej strukturze, kod jest czytelny, semantyczny i egzaminacyjnie poprawny!

Częste pytanie jakie pojawia nam się teraz w głowach to: Jak zatem odróżnić treść w  <section> od zawartości <article>? Odpowiedź jest prosta – artykuł to coś, co może funkcjonować samodzielnie poza stroną – np. wpis blogowy, recenzja produktu czy wiadomość. Sekcja natomiast to zawsze część większej całości, czyli np. działy strony głównej albo artykułu.

Na egzaminie INF.03 użycie znacznika  <section> może być wymagane, jeśli w treści arkusza pojawi się sformułowanie “wydziel sekcję strony“, “stwórz fragment zawierający…” lub “użyj znaczników sekcji“.

Znacznik <aside>

To po prostu wszelka zawartość poboczna – elementy w <aside> to często reklamy, źródła w postaci dodatkowych cytatów czy linków, przypisy albo ciekawostki tematyczne. Najczęściej <aside> jest bocznym panelem (szpaltą, kolumną, blokiem), ale jeśli treści wewnątrz dotyczą stricte artykułu (przypisy, cytaty, linki źródłowe) to <aside> może być umieszczony nawet wewnątrz  <article> – wszystko zależy od naszych intencji.

Rozważmy konkretny przykład – podstrona zawiera artykuł o języku JavaScript i tag <article> zawiera główną treść. Natomiast w <aside> znalazła się treść dodatkowa: link do tutoriala video, cytat z oficjalnej dokumentacji oraz reklamę książki o JS:

<article>

    <header>
        <h1> ... Tytuł lekcji na temat JavaScript ... </h1>
    </header>
    
    <section>... Sekcja artykułu ...</section>
    <section>... Sekcja artykułu ...</section>
    <section>... Sekcja artykułu ...</section>

    <aside>
    
        <h2>... Dodatkowe materiały ... </h2>
        
        <a href="#"> ... Tutorial video ... </a>
        
        <blockquote>
            ... Dodatkowe cytaty z dokumentacji ...
        </blockquote>
        
        <a href="#">
            <img src="#" alt=""> 
            ... Baner z reklamą książki o JS ... 
        </a>
        
    </aside>
    
    <footer> ... Stopka artykułu... </footer>
    
</article>

Przeglądarka i czytniki ekranów rozpoznają <aside> jako mniej istotną część strony, co pomaga w nawigacji i tworzeniu dostępnych treści oraz ma ogromne znaczenie w kontekście SEO.

Znacznik <footer>

To stopka całej strony albo tylko np. sekcji – zwykle zawiera informacje kontaktowe, linki do regulaminu, dane firmy etc. Tak samo jak <header>, może występować wielokrotnie – np. na końcu artykułu, sekcji komentarzy wpisu albo też całej strony:

<footer>
    <p>2025 © Wszelkie prawa zastrzeżone. Zdaj informatyka - kursy online z kwalifikacji INF.02 i INF.03 ...</p>
</footer>

Podsumowanie – co warto zapamiętać?

• Znaczniki semantyczne w HTML5 informują o znaczeniu zawartości bloku – przeglądarka oraz czytniki ekranowe wiedzą, co zawiera dana część strony (np. nagłówek, artykuł, stopka) – jest to taka logiczna “etykieta” kontenera.
• Stosowanie <div> (zachowanie blokowe) oraz <span> (element inline) nie przekazuje informacji o strukturze dokumentu – to tylko przezroczyste kontenery bez semantyki.
• W HTML5 mamy do dyspozycji znaczniki semantyczne: <main>, <header>, <nav>, <section>, <article>, <aside> oraz <footer>.
• Użycie semantycznych znaczników poprawia:
  • czytelność kodu dla programistów (i egzaminatora…),
  • dostępność dla osób z niepełnosprawnościami,
  • współpracę z robotami indeksującymi Google (lepsze SEO),
  • łatwość debugowania i tworzenia reguł CSS.
• <main> zawiera główną treść strony i występuje tylko raz.
• <header> definiuje nagłówek strony lub sekcji – może zawierać np. tytuł, autora, menu.
• <nav> służy do umieszczania menu nawigacyjnego – z reguły jako lista linków.
• <article> otacza autonomiczną jednostkę treści – np. wpis blogowy, komentarz, recenzję.
• <section> służy do podziału artykułu lub strony na logiczne sekcje tematyczne.
• <aside> zawiera treści poboczne – np. reklamy, przypisy, cytaty, linki powiązane.
• <footer> to stopka – zawiera informacje kontaktowe, autorów, prawa autorskie, linki.
• Semantyka w HTML 5 to obowiązkowy element profesjonalnego kodowania! Uczmy się jej od początku i stosujmy z pietyzmem w każdym nowym projekcie!

W zadaniach egzaminacyjnych INF.03 bardzo często mamy za zadanie utworzyć stronę z wyraźnie określoną semantycznie strukturą. Jeśli zamiast znaczników semantycznych użyjemy divów i spanów, to mimo że strona będzie działać i nawet dobrze wyglądać wizualnie, to nie spełni wymagań zadania i stracimy sporo punktów!