Semantyczny HTML5: semantyka a zupa divów
Zastępuj pozbawione znaczenia opakowujące elementy div elementami semantycznymi i poznaj algorytm zarysu dokumentu oraz hierarchię nagłówków.
Semantyczny HTML5: semantyka a zupa divów to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Div soup — problem
Div soup to strona zbudowana wyłącznie z elementów <div> i <span>. Do przekazywania struktury wymaga nazw klas, bez tych klas jest niezrozumiała dla czytników ekranu i nie przekazuje wyszukiwarkom żadnego znaczenia.
<!-- Div soup (avoid) -->
<div class="container">
<div class="header">
<div class="logo">...</div>
<div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>
</div>Semantyczna alternatywa
Bez znaczenia semantycznego elementy div należy zastępować elementami semantycznymi, które przekazują swoje przeznaczenie. Struktura staje się wtedy samodokumentująca i zrozumiała bez żadnego CSS.
<!-- Semantic HTML (preferred) -->
<body>
<header>
<a href="/"><img src="logo.svg" alt="Brand"></a>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>Algorytm tworzenia zarysu dokumentu
Elementy nagłówków (h1-h6) tworzą zarys dokumentu. Użytkownicy czytników ekranu nawigują za pomocą nagłówków. Technologie asystujące ogłaszają poziom nagłówka w zarysie. Należy zachować logiczną hierarchię: h1 dla tytułu strony, h2 dla głównych sekcji, h3 dla podsekcji.
<time> — daty czytelne maszynowo
Element <time> oznacza daty i godziny za pomocą czytelnego maszynowo atrybutu datetime. Wyszukiwarki rozpoznają daty wydarzeń, a czytniki ekranu mogą odczytywać sformatowane daty.
<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time><address>
Element <address> obejmuje informacje kontaktowe dotyczące najbliższego artykułu lub dokumentu. Nie musi to być adres pocztowy — może to być także adres e-mail, numer telefonu lub nazwa użytkownika w mediach społecznościowych.
<address>
<a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
<a href="https://twitter.com/coddykit">@coddykit</a>
</address><figure> i <figcaption>
<figure> obejmuje samodzielną treść, taką jak obrazy, wykresy, przykłady kodu lub filmy. <figcaption> dostarcza podpis semantycznie powiązany z elementem figure.
<figure>
<img src="chart.png" alt="Monthly active users 2025">
<figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure><blockquote> i <cite>
<blockquote> oznacza dłuższy cytat. Atrybutu cite należy używać do określenia adresu URL źródła. Element <cite> oznacza tytuł utworu, takiego jak książka, artykuł lub film.
<blockquote cite="https://developer.mozilla.org">
<p>HTML is the standard markup language for creating web pages.</p>
<footer>—<cite>MDN Web Docs</cite></footer>
</blockquote><details> i <summary>
Para <details> + <summary> tworzy natywny widżet akordeonu lub ujawniania treści bez użycia JavaScript. Przeglądarka automatycznie obsługuje otwieranie i zamykanie, interakcję z klawiaturą oraz dostępność.
<details>
<summary>What is the refund policy?</summary>
<p>We offer a 30-day money-back guarantee on all plans.</p>
</details><mark> — wyróżniony tekst
<mark> oznacza tekst wyróżniony w celu ułatwienia odniesienia — na przykład wynik wyszukiwania. Semantycznie różni się od pokolorowania tekstu na żółto za pomocą CSS.
<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p><abbr> — skróty
Skróty i akronimy należy obejmować elementem <abbr>, a ich pełną formę podawać w atrybucie title. Czytniki ekranu i przeglądarki udostępniają użytkownikom rozwinięcie po najechaniu kursorem.
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>Kiedy używać <div> i <span>
Oba elementy nadal są przydatne. <div> jest właściwym wyborem dla ogólnego blokowego kontenera bez znaczenia semantycznego — na przykład kontenera układu lub głównego elementu komponentu w React. <span> służy do tworzenia punktów zaczepienia dla stylów w tekście, również bez znaczenia semantycznego.
Szybki test
Jaki element HTML tworzy natywny zwijany widżet ujawniania treści bez konieczności używania JavaScript?
Podsumowanie: semantyczny HTML5
Div soup należy zastępować elementami semantycznymi: header, nav, main, article, section, aside i footer. Elementu time należy używać do dat, figure/figcaption do multimediów, details/summary do akordeonów, a mark do wyróżnień. Elementy div i span należy rezerwować dla kontenerów układu bez znaczenia semantycznego.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Semantyczny HTML5: semantyka a zupa divów” jest bezpłatna?
Tak — pełny tekst „Semantyczny HTML5: semantyka a zupa divów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Semantyczny HTML5: semantyka a zupa divów”?
Zastępuj pozbawione znaczenia opakowujące elementy div elementami semantycznymi i poznaj algorytm zarysu dokumentu oraz hierarchię nagłówków. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Semantyczny HTML5: semantyka a zupa divów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Elementy formularzy: typy input, select, textarea
- ARIA i dostępność: label, role, aria-*
- Semantyczny HTML5: semantyka a zupa divów
- Atrybuty walidacji formularzy