Znaczniki semantyczne na stronie internetowej
Struktura strony HTML: div, header, main, section, article, footer
1. Cel lekcji
Po tej lekcji uczeń:
- rozumie, po co w ogóle istnieje struktura strony,
- rozumie, czym jest kontener i po co się go używa,
- zna rolę: div, header, main, section, article, footer,
- potrafi zbudować poprawny „szkielet” strony,
- wie, kiedy używać div, a kiedy znacznika semantycznego.
2. Problem: strona bez struktury = bałagan
Wyobraź sobie dom, w którym:
- nie ma pokoi,
- nie ma korytarza,
- nie ma kuchni,
- wszystko jest w jednym wielkim pomieszczeniu.
Da się mieszkać? Może. Czy to ma sens? Nie.
Tak samo jest ze stroną internetową.
Struktura strony to plan mieszkania.
3. Kontener (pojemnik) – przypomnienie
Kontener to element, który:
- zawiera inne elementy,
- sam z siebie nic „nie rysuje”,
- służy do grupowania.
Najprostszym kontenerem jest:
<div>
Ale HTML5 dał nam lepsze, „mądrzejsze” kontenery.
4. Div – uniwersalny karton
<div> to:
- pudełko,
- karton,
- segregator.
Nie mówi, CO jest w środku. Mówi tylko: „tu jest jakiś blok”.
Używaj <div> gdy:
- nie pasuje żaden sensowny znacznik semantyczny,
- potrzebujesz tylko grupy technicznej pod CSS / layout.
5. Znaczniki semantyczne – kontenery z znaczeniem
One robią to samo co div (są kontenerami), ALE dodatkowo mówią:
„Co to jest za część strony?”
6. Najważniejsze elementy strukturalne
6.1 <header> – nagłówek strony lub sekcji
- logo
- tytuł strony
- menu
Może być:
- jeden na stronę,
- ale też wewnątrz article lub section.
6.2 <main> – główna treść strony
- to, po co użytkownik przyszedł,
- artykuły, treść, produkty.
Na stronie powinien być TYLKO JEDEN <main>.
6.3 <section> – sekcja tematyczna
Grupuje:
- jeden temat,
- jeden dział strony.
Zwykle ma nagłówek.
6.4 <article> – samodzielny, niezależny blok
Coś, co:
- mogłoby istnieć samo,
- np. post, artykuł, wpis, karta produktu.
6.5 <footer> – stopka
- autor
- prawa autorskie
- linki pomocnicze
Tak jak header – może być:
- dla całej strony,
- ale też dla article.
7. Jak wygląda poprawny szkielet strony?
<body>
<header>
nagłówek strony
</header>
<main>
<section>
<article>
<header>...</header>
treść
<footer>...</footer>
</article>
</section>
</main>
<footer>
stopka strony
</footer>
</body>
8. Bardzo ważna zasada
Te znaczniki NIE zmieniają wyglądu.
One:
- organizują dokument,
- pomagają robotom Google,
- pomagają czytnikom dla niewidomych,
- pomagają programistom czytać kod.
Wygląd robi CSS.
Co MUSISZ zapamiętać
- div = techniczny pojemnik
- header, main, section, article, footer = pojemniki z znaczeniem
- Struktura to SZKIELET strony
- Wygląd robi CSS, nie HTML
Ćwiczenia sprawdzające:
Zestaw ćwiczeń: Semantyka i Struktura HTML5
Zadanie 1: Teoria
Połącz znacznik HTML z jego odpowiednikiem w analogii do budowy domu/mieszkania lub funkcją, jaką pełni.
| Znacznik HTML | Opis / Funkcja |
| A. <main> | 1. Piwnica lub stopka dokumentu (prawa autorskie, kontakt). |
| B. <div> | 2. Samodzielny „dom w domu” lub news w gazecie (może istnieć niezależnie). |
| C. <header> | 3. Zwykły, szary karton do pakowania rzeczy (nie mówi, co jest w środku). |
| D. <footer> | 4. Szyld nad wejściem, przedpokój (logo, nawigacja). |
| E. <article> | 5. Główny salon – najważniejsze miejsce, gdzie dzieje się to, po co przyszedł gość. |
Zadanie 2: „Sprzątanie Bałaganu” (Refaktoryzacja kodu)
Poniższy kod to tak zwana „zupa dywowa” (div soup). Wszystko jest w znacznikach <div>, przez co przeglądarka i roboty Google nie wiedzą, co jest czym.
Twoje zadanie: Zamień odpowiednie znaczniki <div> na znaczniki semantyczne (header, main, section, article, footer), aby kod był poprawny logicznie.
Wskazówka: Nie zmieniaj treści, tylko nazwy znaczników.
HTML
<body>
<div id=”gora-strony”>
<h1>Moje Hobby</h1>
</div>
<div id=”tresc-glowna”>
<div class=”sekcja-tematyczna”>
<h2>Sport</h2>
<div class=”wpis”>
<h3>Dlaczego biegam?</h3>
<p>Bo to zdrowe…</p>
</div>
</div>
</div>
<div id=”dol-strony”>
<p>© 2026 Jan Kowalski</p>
</div>
</body>
Zadanie 3: Prawda czy Fałsz? (Weryfikacja zasad)
Na podstawie lekcji oceń, czy poniższe zdania są prawdziwe (P), czy fałszywe (F).
- Na jednej stronie internetowej mogę użyć znacznika <main> tyle razy, ile chcę.
- Znacznik <footer> może znajdować się nie tylko na samym dole strony, ale też wewnątrz <article>, jako stopka artykułu (np. z podpisem autora).
- Jeśli użyję znacznika <section> zamiast <div>, to tekst w środku automatycznie zmieni kolor na czerwony.
- <div> należy używać wtedy, gdy żaden inny znacznik semantyczny (jak article czy section) nie pasuje logicznie do treści.
- <article> służy do grupowania elementów, które nie mają ze sobą nic wspólnego i nie mogą istnieć samodzielnie.
Zadanie 4: Projektowanie Szkieletu (Praktyka)
Zaprojektuj strukturę HTML dla prostego bloga kulinarnego. Napisz kod niezbędny do stworzenie semantycznej struktury strony internetowej z wykorzystaniem znaczników HTML5 oraz przygotowanie fundamentu pod stylowanie CSS.
1. Treści do umieszczenia na stronie:
- Tytuł bloga: „Smaki Świata – Twój kulinarny przewodnik”
- Przepis 1:
- Tytuł: „Klasyczna włoska Margherita”
- Opis: „Prosty przepis na pizzę, która zachwyca smakiem świeżej bazylii i mozzarelli.”
- Przepis 2:
- Tytuł: „Puszyste pancakes z syropem”
- Opis: „Idealne śniadanie na słodko, które przygotujesz w 15 minut.”
- Stopka: „© 2026 Blog Kulinarny Smaki Świata. Wszystkie prawa zastrzeżone.”
2. Sugerowane klasy i identyfikatory (ID):
- #main-header – dla nagłówka strony.
- .recipe-section – dla sekcji zawierającej listę przepisów.
- .post-card – klasa dla każdego artykułu (article), aby ułatwić ich wspólne stylowanie (np. obramowanie, cień).
- .post-title – dla nagłówków wewnątrz artykułów.
- #main-footer – dla stopki strony.
W pliku css zastosuj podstawowe znaczniki które pozwolą zmodyfikować wygląd strony, takie jak: tło strony, wyrównanie, wielkość czcionki, rodzaj czcionki, kolor czcionki…
- Dodaj komentarze-sekcje, żeby oddzielić style nagłówka, treści i stopki.
Wskazówki:
- Pamiętajcie o semantyce – używamy main, section i article zamiast samych kontenerów div, aby roboty wyszukiwarek lepiej rozumiały strukturę strony.
- ID (#) używamy dla elementów unikalnych (występujących raz na stronie), natomiast klasy (.) dla elementów, które mogą się powtarzać (jak np. karty przepisów).
- Zwróćcie uwagę na hierarchię nagłówków (h1 -> h2 -> h3). Każdy artykuł powinien mieć swój własny podtytuł.
About the Author
