HTML ma ponad sto znaczników, ale prawda warsztatowa jest taka, że w codziennej pracy używa się może jednej czwartej z nich. Ta ściąga nie jest słownikiem od A do Z – jest mapą tego, co naprawdę potrzebne, z przykładami i pułapkami przy każdej grupie. Jeśli dopiero zaczynasz i chcesz najpierw zrozumieć, czym HTML w ogóle jest i jak współpracuje z CSS, zacznij od podstaw w tekście HTML – co to jest i jak działa, a tu wróć po konkrety.
Jak czytać znacznik
Większość znaczników działa parami: <p> otwiera akapit, </p> go zamyka, a treść siedzi w środku. Część elementów nie ma nic „w środku”, więc nie ma też zamknięcia – to elementy puste (void): <br>, <hr>, <img>, <input>, <meta>.
Znaczniki przyjmują atrybuty, czyli pary nazwa=”wartość” w tagu otwierającym: <a href="https://example.pl">link</a>. Kilka atrybutów działa wszędzie (globalne): id, class, style, title, lang i rodzina data-* do własnych danych.
I jeszcze komentarz, bo każdy go kiedyś szuka: <!-- tekst niewidoczny na stronie -->.
Szkielet każdej strony
Pięć znaczników, bez których dokument nie istnieje: <!DOCTYPE html> deklaruje typ dokumentu, <html> obejmuje całość, <head> trzyma metadane (niewidoczne), <body> – treść widoczną. W <head> mieszkają: <title> (tytuł karty przeglądarki i wyniku Google), <meta> (kodowanie, viewport, description), <link> (arkusze CSS) i <script> (JavaScript).
Z perspektywy SEO <title> to najważniejszy pojedynczy znacznik całego dokumentu – jego długość i konstrukcję rozbieramy osobno w tekście o znaczniku title.
Tekst: nagłówki, akapity i wyróżnienia
Nagłówki <h1>–<h6> budują hierarchię treści jak rozdziały w książce. Zasady są dwie: jeden <h1> na stronę i nieprzeskakiwanie poziomów (po h2 idzie h3, nie h5). Hierarchia nagłówków to jednocześnie szkielet SEO strony – dlaczego, tłumaczymy w artykule o strukturze nagłówków H1-H3.
Akapit to <p>, łamanie linii bez nowego akapitu – <br>, pozioma linia – <hr>. Cytat blokowy: <blockquote>. Kod: <code> w linii, <pre> dla bloków z zachowaniem spacji.
Przy wyróżnieniach kryje się niuans, który odróżnia front-endowca od amatora. <strong> i <em> niosą znaczenie (ważność, akcent) – czytniki ekranu zmieniają na nich intonację. <b> i <i> to czysta typografia bez semantyki. Wyglądają identycznie, znaczą co innego. Do kompletu: <mark> (zakreślacz), <small> (drobny druk), <sup>/<sub> (indeksy, m² i H₂O), <span> – fragment bez żadnego znaczenia, hak na styl CSS.
Listy
Trzy rodzaje: <ul> (punktowana), <ol> (numerowana) – obie z pozycjami <li> – oraz rzadziej spotykana lista definicji <dl> z parami <dt> (termin) i <dd> (opis).
Lista numerowana ma więcej możliwości, niż się wydaje: atrybutami start, reversed i type zmienisz początek numeracji, kierunek i styl znaków – wszystkie warianty z przykładami zebraliśmy w tekście o listach numerowanych HTML.
Linki i media
Link to <a href="adres">tekst</a>. Dwa atrybuty robocze: target="_blank" otwiera w nowej karcie (dodaj rel="noopener"), a href przyjmuje też protokoły specjalne – tel: dzwoni, a mailto: otwiera klienta poczty z możliwością ustawienia tematu i treści, co opisujemy w poradniku o linkach mailto.
Obrazek: <img src="plik.webp" alt="opis obrazka">. Atrybut alt nie jest ozdobnikiem – to opis dla czytników ekranu i wyszukiwarek, jeden z najprostszych do zaniedbania elementów dostępności i SEO. Wokół obrazka warto znać jeszcze: <figure> z podpisem <figcaption>, responsywne <picture> oraz <video>, <audio> i <iframe> (osadzanie map i YouTube).
Tabele i formularze
Tabela danych: <table>, w niej <thead> i <tbody>, wiersze <tr>, komórki nagłówkowe <th> i zwykłe <td>, opcjonalny tytuł <caption>. Tabele służą do danych tabelarycznych – czasy budowania layoutu tabelami skończyły się dwie dekady temu.
Formularz zaczyna <form>, a wypełniają go: <input> z atrybutem type (text, email, password, checkbox, radio, number, date – każdy typ zmienia zachowanie pola i klawiaturę na mobile), wieloliniowy <textarea>, lista <select> z <option> oraz <button>. Każde pole powinno mieć <label for="id-pola"> – etykieta powiązana z polem to klikalna większa powierzchnia i podstawa dostępności.
Znaczniki semantyczne HTML5: koniec div-ozy
Zamiast strony zbudowanej z samych <div>, HTML5 dał elementy mówiące, CZYM jest dany blok: <header> (nagłówek strony lub sekcji), <nav> (nawigacja), <main> (główna treść – jeden na stronę), <article> (samodzielna treść, np. wpis), <section> (sekcja tematyczna), <aside> (treść poboczna), <footer> (stopka).
Do tego dwa niedoceniane: <details> z <summary> dają rozwijane sekcje (akordeon FAQ) bez linijki JavaScriptu – sekcja pytań na końcu tego artykułu działa dokładnie na nich – oraz <time datetime="2026-06-13"> dla dat zrozumiałych maszynowo.
<div> i <span> nie są złe – są neutralne. Sięgaj po nie wtedy, gdy żaden element semantyczny nie pasuje, nie odwrotnie. Wyszukiwarki i czytniki ekranu czytają strukturę, nie wygląd.
Ściąga: 15 znaczników, które robią 90% roboty
| Znacznik | Rola | Minimalny przykład |
|---|---|---|
<h1>-<h6> |
nagłówki | <h2>Cennik</h2> |
<p> |
akapit | <p>Treść.</p> |
<a> |
link | <a href="/blog/">Blog</a> |
<img> |
obrazek | <img src="kot.webp" alt="Rudy kot"> |
<ul> <ol> <li> |
listy | <ul><li>Punkt</li></ul> |
<strong> <em> |
wyróżnienia z semantyką | <strong>ważne</strong> |
<table> <tr> <td> |
tabela danych | <tr><td>100 zł</td></tr> |
<form> <input> <button> |
formularz | <input type="email"> |
<header> <main> <footer> |
szkielet semantyczny | <main>...</main> |
<nav> <article> <section> |
struktura treści | <article>wpis</article> |
<div> <span> |
kontenery bez semantyki | <div class="box"> |
<br> <hr> |
łamanie linii, separator | tekst<br>dalej |
<details> <summary> |
akordeon bez JS | <details><summary>FAQ</summary></details> |
<blockquote> <code> |
cytat, kod | <code>npm install</code> |
<title> <meta> |
metadane w head | <title>Strona</title> |
Czego już nie używać
Stare poradniki wciąż straszą znacznikami, które wycofano dekady temu: <center>, <font>, <big>, <marquee>, ramki <frame>. Przeglądarki je tolerują dla zgodności wstecznej, ale całą prezentację – wyśrodkowanie, kroje, kolory – przejęło CSS. Jak operować kolorami po stronie stylów, pokazujemy w przewodniku po kolorach HTML i kodach HEX/RGB/HSL.
Ciekawostka porządkująca: nie będzie żadnego „HTML6″. Od 2019 roku standard rozwija WHATWG jako HTML Living Standard – jeden, ciągle aktualizowany dokument zamiast numerowanych wersji. To, czego się tu nauczysz, nie zdezaktualizuje się z dnia na dzień.
Najczęściej zadawane pytania
Co to są znaczniki HTML?
To instrukcje zapisane w nawiasach ostrych, np. <p> czy <img>, które mówią przeglądarce, czym jest dany fragment treści: akapitem, nagłówkiem, linkiem, obrazkiem.
Większość działa parami (otwierający + zamykający), a elementy puste jak <br> czy <img> nie mają zamknięcia.
Ile jest znaczników HTML?
Aktualny standard definiuje ich ponad sto, ale do zbudowania kompletnej, poprawnej strony wystarcza 20-30 najczęściej używanych.
Resztę poznaje się przy konkretnych potrzebach – nikt nie zna całej listy na pamięć i nie musi.
Czym różni się strong od b oraz em od i?
Wyglądem niczym, znaczeniem wszystkim. <strong> i <em> niosą semantykę (ważność, akcent) – rozumieją ją czytniki ekranu i roboty. <b> oraz <i> to czysta typografia.
Zasada praktyczna: wyróżniasz, bo treść jest ważna → strong/em; wyróżniasz, bo tak wygląda lepiej → b/i albo CSS.
Które znaczniki HTML są najważniejsze dla SEO?
Czwórka na podium: <title> (tytuł w wynikach Google), nagłówki <h1>-<h6> (hierarchia treści), alt przy obrazkach oraz <meta name="description">.
Do tego elementy semantyczne (main, article, nav) – pomagają robotom zrozumieć, co na stronie jest treścią główną, a co otoczką.
Co to są znaczniki semantyczne?
Elementy HTML5, które opisują rolę bloku treści: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Zastępują anonimowe <div> tam, gdzie blok ma konkretne znaczenie.
Korzystają na tym czytniki ekranu, roboty wyszukiwarek i każdy, kto czyta kod po Tobie.
Czy znaczniki center i font nadal działają?
Przeglądarki wciąż je renderują dla zgodności ze starymi stronami, ale są wycofane ze standardu i nie należy ich używać w nowym kodzie.
Wyśrodkowanie, kroje i kolory obsługuje CSS – to czystszy podział: HTML opisuje strukturę, CSS wygląd.
