Ile znaczników HTML naprawdę Pan/Pani używa? U większości osób zajmujących się tworzeniem stron arsenał ogranicza się do kilkunastu: div, p, a, img, span, nagłówki i listy. Pozostałe ponad 100 znaczników ze specyfikacji kurzy się bezczynnie, po prostu dlatego, że się o nich zapomniało lub się ich nie znało.

A szkoda. Przeglądarki nauczyły się rozumieć semantykę głębiej, niż się wydaje. Czytniki ekranu się jej trzymają. Wyszukiwarki parsują strukturę. Właściwy znacznik we właściwym miejscu daje dostępność, SEO i czytelny kod, bez ani jednej linijki JS.

Wybraliśmy 18 znaczników HTML, które warto dodać do codziennego znacznikowania. Nie są one nowe w sensie „właśnie wyszły ze szkicu", ale są nowe dla wielu programistów, ponieważ są niesłusznie pomijane. Część pochodzi z HTML5, część była w specyfikacji od zawsze. Dla każdego podajemy żywy przykład i wyjaśnienie, gdzie naprawdę pomaga.

💡 Szybki przegląd:

• Które znaczniki rozwiązują kwestie dostępności i semantyki bez JavaScript
• Gdzie przydadzą się sub/sup, dfn, var i time do znacznikowania tekstu
• Jak <q>, <blockquote> i <cite> prawidłowo formatują cytaty
• Dlaczego <video>, <picture> i <figure> grupują treści multimedialne
• Co dają del/ins, meter, dialog i menu w interfejsach

1. Semantyczne znacznikowanie tekstu, sub, sup, dfn, var, time, kbd

Pięć znaczników, które przekształcają zwykły tekst w strukturalnie zrozumiały zarówno dla maszyny, jak i dla człowieka. Żadnego JS, tylko natywny HTML.

<sub>** i **<sup>, indeks dolny i górny. Wzory chemiczne, potęgi matematyczne, przypisy. CSS może wizualnie obniżyć lub podnieść tekst za pomocą vertical-align, ale nie przekaże semantyki. A jest ona ważna: czytnik ekranu wypowie „H dwa O", a nie „H dwa O" jak zwykły tekst. Nie należy ich używać do zadań czysto dekoracyjnych, do tego służą style.

1
H<sub>2</sub>O
2
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

<dfn>, definiowany termin. Kiedy wprowadza Pan/Pani nowe pojęcie i podaje jego definicję, należy opakować termin w ten znacznik. Przeglądarka nie robi z nim nic wizualnie, ale wyszukiwarki i rozszerzenia słownikowe opierają się na <dfn>, aby zbudować glosariusz strony. Atrybut id pozwala tworzyć odnośniki zwrotne przy ponownym przywołaniu.

1
<p>
2
  <dfn id="semantic">Семантическая разметка</dfn> — HTML, который
3
  передаёт смысл содержимого, а не только его внешний вид.
4
</p>

<var>, zmienna. W dokumentacji technicznej, samouczkach, opisach formuł. Wizualnie przeglądarki domyślnie wyróżniają kursywą. Do pełnoprawnych wyrażeń matematycznych lepiej użyć MathML, ale <var> jest wygodny, gdy zmienna jest częścią zdania.

1
По теореме Пифагора, квадраты сторон
2
<var>a</var> и <var>b</var> дают квадрат гипотенузы <var>c</var>.

<time>, data lub czas. Maszyny słabo parsują „2 kwietnia" w środku akapitu. Znacznik <time> izoluje datę i poprzez atrybut datetime podaje format czytelny maszynowo. Kalendarze, wyszukiwarki, parsery wydarzeń, wszyscy będą wdzięczni.

1
GenerateJS пройдёт
2
<time datetime="2026-04-02">2 апреля 2026</time>.

<kbd>, wprowadzanie z klawiatury. Instrukcje, kombinacje klawiszy, polecenia. Wizualnie wyróżniany czcionką o stałej szerokości, semantycznie oddziela nazwy klawiszy od reszty tekstu. Można zagnieżdżać jeden w drugim dla kombinacji.

1
Закройте окно клавишей <kbd>Esc</kbd>.
2
Сохраните проект: <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.

2. Cytaty i odnośniki do źródeł, q, blockquote, cite

Trzy znaczniki, które pokrywają absolutnie wszystkie scenariusze cytowania, od wbudowanej frazy po rozbudowany fragment książkowy.

<q>, cytat wbudowany wewnątrz akapitu. Przeglądarka automatycznie otacza zawartość cudzysłowami odpowiednimi dla języka strony. Opcjonalny atrybut cite wskazuje URL źródła, użytkownik go nie widzi, ale maszyny odczytują.

1
Как сказал Джереми Кит,
2
<q cite="https://adactio.com">HTML — объединяющий язык
3
Всемирной паутины</q>.

<blockquote>, cytat blokowy. Dla rozbudowanych fragmentów: akapit z artykułu, opinia, wyciąg ze specyfikacji. Również obsługuje cite. Wizualnie przeglądarka dodaje wcięcie, a stylizować można dowolnie.

1
<blockquote cite="https://html.spec.whatwg.org/multipage/">
2
  <p>HTML — это язык разметки, используемый для создания
3
  структурированных документов для Всемирной паутины.</p>
4
</blockquote>

<cite>, tytuł cytowanego dzieła. Tylko tytuł: książki, artykułu, filmu, gry. Nie nazwisko autora, nie data, właśnie tytuł. Domyślnie przeglądarki wyświetlają kursywą. Często mylony z atrybutem cite w <q>/<blockquote>, to różne rzeczy: atrybut przechowuje URL, a znacznik <cite> pokazuje tytuł użytkownikowi.

1
<p>Почитать подробнее можно в
2
<cite>HTML Living Standard</cite>.</p>

3. Struktura dokumentu: address i dl/dt/dd

<address>, informacja kontaktowa. Nie adres pocztowy biura (do tego służy mikrodanych Schema), lecz kontakt do autora strony lub artykułu. Jeśli umieszczony wewnątrz <article>, dotyczy autora artykułu, jeśli w <body>, to właściciela całej witryny. Wyszukiwarki wykorzystują ten blok do budowania Knowledge Graph.

1
<address>
2
  <a href="mailto:[email protected]">[email protected]</a>
3
</address>

<dl>**, <dt>, **<dd>, lista definicji. Nie tylko „słownik pojęć", ale dowolna struktura „klucz, wartość": lista cech produktu, metadane, FAQ. Jeden termin (<dt>) może mieć kilka opisów (<dd>) i odwrotnie. Kolejność ma znaczenie: najpierw termin, potem jego opis.

1
<dl>
2
  <dt>Элемент</dt>
3
  <dd>Конструкция из открывающего тега, содержимого и закрывающего тега.</dd>
4
  <dt>Атрибут</dt>
5
  <dd>Пара внутри открывающего тега, задающая свойства элемента.</dd>
6
</dl>

4. Treści multimedialne, video, picture i figure/figcaption

Trzy potężne narzędzia do pracy z treściami wizualnymi i multimedialnymi. Każde pokrywa swoją warstwę zadań.

<video>, osadzone wideo bez zewnętrznych odtwarzaczy. Można podać jeden src lub kilka <source>, przeglądarka wybierze pierwszy obsługiwany format. Przydatny szczegół: atrybut autopictureinpicture automatycznie zwija wideo do pływającego okna podczas przełączania karty, a disablepictureinpicture tego zabrania. Analogicznie disableremoteplayback steruje przesyłaniem na Chromecast i Apple TV.

1
<video controls autopictureinpicture>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.mp4" type="video/mp4">
4
</video>

<picture>, obrazy adaptacyjne z pełną kontrolą. W przeciwieństwie do srcset na <img>, gdzie przeglądarka sama wybiera źródło, <picture> pozwala Panu/Pani wskazywać sztywne wyrażenia medialne. Różne formaty (WebP dla Chromium, JPEG dla reszty), różne kadrowanie pod urządzenia mobilne, ciemna wersja obrazu dla trybu dark mode, i to wszystko bez ani jednej linijki JS.

1
<picture>
2
  <source srcset="hero-dark.webp" media="(prefers-color-scheme: dark)">
3
  <source srcset="hero.webp" type="image/webp">
4
  <img src="hero.jpg" alt="Главный баннер с заголовком статьи">
5
</picture>

<figure> oraz **<figcaption>, samodzielna treść z podpisem. Ilustracja, diagram, listing kodu, tabela, wszystko, co można wyjąć z głównego toku bez utraty sensu. <figcaption> semantycznie wiąże podpis z zawartością: czytnik ekranu odczytuje je razem, a nie jako rozdzielne elementy. Jeśli treść jest tylko pośrednio związana z tekstem (na przykład cytat na panelu bocznym), lepiej użyć <aside>.

1
<figure>
2
  <img src="framework-usage.png" alt="Рост React-проектов с 2022 по 2026">
3
  <figcaption>Динамика использования JavaScript-фреймворков, 2022–2026</figcaption>
4
</figure>

5. Mapy nawigacyjne, map i area

Stary, ale nie przestarzały mechanizm. Mapy obrazów sprawiają, że poszczególne obszary obrazka stają się klikalnymi linkami. Tam, gdzie tekst jest bezsilny, na przykład interaktywny schemat metra, plan budynku czy rysunek anatomiczny, <map> z <area> działają bez JS.

1
<map name="london">
2
  <area shape="circle" coords="200,75,50" href="westminster.html" alt="Вестминстер">
3
  <area shape="rect" coords="300,120,380,180" href="city.html" alt="Сити">
4
</map>
5
<img usemap="#london" src="london-map.jpg" alt="Карта центра Лондона">

Atrybut shape przyjmuje wartości circle, rect, poly i default. Współrzędne w pikselach od lewego górnego rogu. Dla złożonych konturów, poly z listą punktów. Mimo sędziwego wieku (znacznik ma grubo ponad dwadzieścia lat) jest stabilnie wspierany przez wszystkie przeglądarki.

6. Edycja tekstu, del i ins

Gdy pokazują Państwo poprawki, zmiany w dokumencie, aktualizacje artykułu, diff legislacji, <del> i <ins> dają semantycznie poprawne przedstawienie. <del> pokazuje usunięte (przeglądarki przekreślają), <ins>, dodane (podkreślają).

Oba wspierają atrybuty cite (dlaczego zmieniono) oraz datetime (kiedy). Wyszukiwarka widzi historię zmian strony, a nie tylko przepisany tekst.

1
<p>
2
  Несмотря на негатив в прессе,
3
  <del datetime="2026-01-15">covfefe</del>
4
  <ins cite="#editorial-note">coverage</ins>.
5
</p>

Nie należy używać <del> i <ins> do czysto dekoracyjnego przekreślenia, do tego służy text-decoration: line-through. Są one właśnie o wersjonowaniu treści.

7. Pola wprowadzania nowej generacji:

Element <input> odszedł daleko od pól tekstowych. Współczesne przeglądarki wspierają dziesiątki typów, a każdy z nich niesie ze sobą wbudowaną walidację, specyficzną klawiaturę na urządzeniach mobilnych i natywne widżety, bez ani jednej linijki JavaScriptu.

Kluczowe typy, które wciąż są ignorowane w wielu projektach:

• type="color", paleta kolorów. Natywny picker, nie trzeba ciągnąć biblioteki spectrum.
• type="range", suwak między min a max. Głośność, cena, ocena, wszystko bez kodowania slidera.
• type="date", zlokalizowany kalendarz. Przeglądarka pokazuje wybór daty, format dostosowuje się do regionu użytkownika.
• type="datetime-local", data i czas bez strefy czasowej. Do rezerwacji, deadline’ów, planerów.

Atrybut pattern przyjmuje wyrażenie regularne: wartość nie przejdzie walidacji, dopóki nie będzie zgodna ze wzorcem.

1
<input type="color" value="#FF0657">
2
<input type="range" min="0" max="100" value="75">
3
<input type="date" value="2026-06-13">
4
<input name="username" pattern="[a-z]{5,10}"
5
       title="От 5 до 10 строчных латинских букв">

8. Wskaźniki liczbowe:

Nie mylić z <progress>: <meter> służy do statycznej wartości w znanym zakresie (zapełnienie dysku, ocena, rating), a <progress> do postępu realizacji zadania (ładowanie, proces krokowy).

Przeglądarka automatycznie koloruje <meter> w zależności od tego, gdzie wartość znajduje się względem low, high i optimum. Strefa zielona, wartość blisko optimum, żółta, akceptowalna, czerwona, poza normą. Logika kolorów jest konfigurowana przez CSS, ale podstawowa semantyka działa od razu.

1
<meter value="6.4" min="0" max="10" low="4" high="9" optimum="7.5">
2
  6.4 из 10
3
</meter>

9. Elementy interaktywne, dialog i menu

Dwa tagi do interakcji, które wcześniej wymagały bibliotek JS lub tworzenia od zera.

<dialog>, natywne okno modalne. Sam element jest domyślnie ukryty. Dodaje Pan/Pani atrybut open, a przeglądarka pokazuje go nad stroną, w warstwie top layer. Metoda JavaScript showModal() daje dodatkowo pseudoelement ::backdrop do przyciemnienia tła. Popup, potwierdzenie akcji, alert, bez ani jednej linii pozycjonowania CSS.

Wsparcie: Chrome, Edge, Firefox, Safari (od 2022 roku). W starszych przeglądarkach dialog jest po prostu wyświetlany jako zwykły kontener blokowy, istnieją polyfille.

1
<dialog id="confirm">
2
  <p>Удалить этот элемент?</p>
3
  <button onclick="this.closest('dialog').close()">Отмена</button>
4
  <button onclick="this.closest('dialog').close('confirmed')">Удалить</button>
5
</dialog>

<menu>, lista interaktywnych akcji. Nie nawigacja (do tego służy <nav>), lecz właśnie pasek narzędzi: pędzle w edytorze graficznym, przyciski formatowania, akcje na obiekcie. Semantyczny odpowiednik <ul>, ale dla przycisków i poleceń. Domyślnie nie ma stylów, tylko znaczenie.

Atrybut type="toolbar" (jedyny, który pozostał w specyfikacji) jawnie nadaje rolę panelu. Typ kontekstowy został usunięty ze standardu, więc <menu> służy dziś wyłącznie do widocznych zestawów akcji na ekranie.

1
<menu type="toolbar">
2
  <li><button>Круглая</button></li>
3
  <li><button>Плоская</button></li>
4
  <li><button>Веерная</button></li>
5
</menu>

Jeśli temat znaczników HTML jest dla Pana/Pani nowy, oto świetne wprowadzenie od Traversy'ego, kanał Traversy Media, jeden z najlepszych z frontendu na YouTube:

⁉️🤔 Często zadawane pytania

Po co używać tagów semantycznych, skoro wszystko można zbudować na <div> i <span>?

Czytniki ekranowe opierają się na tagach, aby budować strukturę strony dla niewidomych użytkowników, div jest dla nich niewidoczny. Wyszukiwarki wydobywają semantykę dla rozszerzonych snippetów: ocenę z <meter>, FAQ z <dl>, kontakty z <address>. Dodatkowo kod czyta się sam: <article> od razu mówi „to jest artykuł", a <div class="article"> już nie.

Które tagi z listy można już bezpiecznie stosować na produkcji?

Wszystkie osiemnaście. <dialog> uzyskał wsparcie międzyprzeglądarkowe od Safari 15.4 (2022 rok), <menu> de facto działa jako opakowanie semantyczne wszędzie. <picture> i <video> z <source> są dojrzałe od 2016 roku. <meter>, <time>, <kbd>, <dfn> pochodzą z głębokiego dziedzictwa HTML, wsparcie jest wszędzie. Jedyny niuans: <input type="date"> i type="color" mogą renderować się inaczej w różnych systemach operacyjnych, ale nie psuje to funkcjonalności.

<b>** i <i> umarły?**

Nie, ale ich rola się zmieniła. <b> służy teraz do przyciągania uwagi bez nadawania istotności (słowa kluczowe w CV), <i> do wyrażeń idiomatycznych, terminów w innym języku, nazw statków. Do wyróżniania ważnego służy <strong>, do emfazy <em>. Stylistyczny bold/kursywa to wyłącznie CSS.

Czy można używać <meter> do postępu ładowania?

Nie. <meter> służy do statycznej wartości w znanym zakresie (zapełnienie dysku, ocena, rating). Do postępu w czasie służy ściśle <progress>. Przeglądarki animują <progress> przy zmianie value, a <meter> jest statyczny. Są one mylone stale, ale semantyka jest różna i czytniki ekranowe odczytują je inaczej.

Co zrobić, jeśli przeglądarka nie obsługuje <dialog>?

Element jest po prostu wyświetlany jako kontener blokowy, nic się nie zepsuje. Proszę dodać polyfill: dialog-polyfill od zespołu Google Chrome (400 linii, bez zależności) zapewnia showModal(), close() i ::backdrop dla starszych przeglądarek.

Który tag wziąć na warsztat jako pierwszy?

{iframe} i <picture>, dwa tagi, które dają maksimum korzyści przy minimum wysiłku. {iframe} zastąpi dowolny zewnętrzny odtwarzacz wideo natywnym oknem z obrazem w obrazie. <picture> uwolni od ręcznego przełączania formatów WebP/AVIF, przeglądarka sama weźmie to, co rozumie.

Dalej rosnąco: <input> z nowoczesnymi typami (color, date, range) odetnie kilobajty widżetów JS. <dialog> usunie zależność od bibliotek modalnych. <del>/<ins> zrobi porządek w wersjonowaniu treści.

Nie trzeba wdrażać wszystkich 18 w jednym sprincie. Proszę zacząć od jednego tagu na tydzień. Po pół roku Pana/Pani znaczniki staną się semantycznie bogate, a kod samodokumentujący się. Bez ani jednej linii JavaScript tam, gdzie nie jest potrzebna.

Nie wie Pan/Pani, od czego zacząć, proszę otworzyć bieżący projekt, znaleźć najbliższy <div class="..."> bez wyraźnej semantyki i zastąpić go odpowiednim tagiem z listy. Różnica w czytelności kodu będzie widoczna od razu.