HTML semantyczny: 10 najczęstszych błędów i poprawne znaczniki

Strona może wyświetlać się bez zarzutu i mimo to być źle napisana. div na każdym kroku, pogrubienie wstawione przez b, nagłówki dobierane według rozmiaru: przeglądarka pokaże wszystko bez słowa skargi, ale czytniki ekranu, wyszukiwarki i twoi współpracownicy tracą informację, którą znaczniki miały nieść. Właśnie to nazywamy semantycznym HTML-em: używasz znacznika, który mówi, czym treść jest, a nie tylko jak ma wyglądać. Oto dziesięć najczęstszych błędów i sposób na każdy z nich.

Dlaczego semantyka ma znaczenie

• Dostępność. Czytnik ekranu proponuje przeskok wprost do nawigacji, treści głównej albo stopki. Może to zrobić tylko wtedy, gdy istnieją nav, main i footer. Przy samych div użytkownik słyszy płaską stronę.
• SEO. Wyszukiwarki opierają się na strukturze, żeby rozpoznać treść główną, nagłówki i zależności między sekcjami. Czysta hierarchia jest zrozumiała od razu; zupa z div wymaga zgadywania.
• Utrzymanie. <nav> czyta się bez komentarza; <div class="nv2"> każe otworzyć arkusz stylów. Semantyczny kod da się przeczytać sześć miesięcy później.
• Zachowania za darmo. button uruchamia się z klawiatury, a otwiera się w nowej karcie po kliknięciu rolką, label powiększa obszar klikalny pola wyboru. To wszystko trzeba dopisać ręcznie, jeśli oszukujesz przy pomocy div.

Błąd 1: div zamiast header, nav, main i footer

Struktura strony ma własne znaczniki. div z identyfikatorem header nie staje się przez to nagłówkiem strony dla przeglądarki.

Tak nie rób:

<div id="header">…</div>
<div id="menu">…</div>
<div id="content">…</div>
<div id="footer">…</div>

Zrób tak:

<header>…</header>
<nav aria-label="Navigation principale">…</nav>
<main>…</main>
<footer>…</footer>

Każdy z tych znaczników niesie domyślną rolę (banner, navigation, main, contentinfo), którą rozpoznają technologie asystujące. main musi być na stronie jeden; header i footer mogą się powtarzać wewnątrz article.

Błąd 2: podpis obrazka wrzucony do akapitu

Obrazek i jego podpis tworzą całość. Znacznik figure je wiąże, a figcaption niesie sam podpis.

Tak nie rób:

<img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
<p>Le mont Blanc, juillet 2026</p>

Zrób tak:

<figure>
  <img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
  <figcaption>Le mont Blanc, juillet 2026</figcaption>
</figure>

figure nadaje się też do bloku kodu, wykresu albo cytatu opatrzonego podpisem.

Błąd 3: b i i zamiast wyróżnienia znaczeniowego

b i i opisują wygląd. strong i em opisują intencję: dużą ważność, akcent położony na słowie. Czytnik ekranu może zmienić intonację na em, nigdy na i.

Tak nie rób:

<b>Attention</b> : ce réglage est <i>irréversible</i>.

Zrób tak:

<strong>Attention</strong> : ce réglage est <em>irréversible</em>.

b i i nie są zakazane: mają swoje ścisłe zastosowanie, czyli słowo kluczowe wyróżnione bez szczególnej wagi dla b, obcy termin albo nazwa statku dla i. Jeśli chcesz wyłącznie dekoracyjnego pogrubienia, to zadanie dla CSS: font-weight: 700.

Błąd 4: zepsuta hierarchia nagłówków

Znaczniki od h1 do h6 tworzą plan dokumentu. Wybranie h4, bo ma „właściwy rozmiar”, ten plan łamie: czytniki ekranu przechodzą od nagłówka do nagłówka, a wyszukiwarki wyprowadzają z nich strukturę.

Tak nie rób:

<h1>Nos services</h1>
<h4>Développement</h4>     <!-- saut de h1 à h4 -->
<h1>Hébergement</h1>       <!-- second h1 pour une sous-partie -->

Zrób tak:

<h1>Nos services</h1>
  <h2>Développement</h2>
    <h3>Sites vitrine</h3>
  <h2>Hébergement</h2>

Jeden h1 na stronę, żadnego pominiętego poziomu, a rozmiar ustawiasz w CSS. Jeśli nagłówek ma być wizualnie mały, to h2 { font-size: 1.1rem }, a nie h5.

Błąd 5: section i article mylone albo używane do wszystkiego

article oznacza treść samodzielną, która zachowa sens wyjęta ze strony: wpis na blogu, komentarz, kartę produktu. section grupuje treść tematyczną wewnątrz większej całości i powinna zawsze mieć nagłówek. div pozostaje właściwym wyborem dla zwykłego grupowania na potrzeby układu.

Tak nie rób:

<section>
  <section><img src="logo.svg" alt="Gekkode"></section>
  <section>Du texte sans titre</section>
</section>

Zrób tak:

<article>
  <h2>Titre du billet</h2>
  <section>
    <h3>Première partie</h3>
    …
  </section>
</article>

<div class="colonnes">…</div> <!-- pure mise en page : div -->

Błąd 6: odnośnik w roli przycisku i odwrotnie

Odnośnik (a) gdzieś prowadzi. Przycisk (button) uruchamia akcję: wysyła, otwiera menu, pokazuje okno. a href="#" z obsługą kliknięcia nie jest ani jednym, ani drugim, a klikalny div nie jest dostępny ani z klawiatury, ani dla czytników ekranu.

Tak nie rób:

<a href="#" onclick="ouvrirMenu()">Menu</a>
<div class="btn" onclick="envoyer()">Envoyer</div>

Zrób tak:

<button type="button" aria-expanded="false" aria-controls="menu">Menu</button>
<button type="submit">Envoyer</button>
<a href="https://www.gekkode.com/pl/tarifs/">Voir les tarifs</a>

Natywny button reaguje na Enter i spację, przyjmuje fokus z klawiatury i ogłasza swoją rolę. Wszystko to znika razem z div.

Błąd 7: odnośniki, które mówią „kliknij tutaj”

Tekst odnośnika musi sam z siebie zapowiadać cel: czytniki ekranu podają listę odnośników strony w oderwaniu od kontekstu, a wyszukiwarki opisują stronę docelową właśnie tekstem kotwicy.

Tak nie rób:

Pour nos tarifs, <a href="https://www.gekkode.com/pl/tarifs/">cliquez ici</a>.

Zrób tak:

Consultez <a href="https://www.gekkode.com/pl/tarifs/">nos tarifs 2026</a>.

Błąd 8: obrazki bez alt

Atrybut alt opisuje obrazek temu, kto go nie widzi: czytnikowi ekranu, użytkownikowi z niezaładowaną grafiką, wyszukiwarce. Jest obowiązkowy. Obrazek czysto dekoracyjny dostaje alt pusty, a nie żaden.

Tak nie rób:

<img src="graphique-ventes.png">
<img src="separateur.png" alt="separateur.png">

Zrób tak:

<img src="graphique-ventes.png" alt="Ventes trimestrielles 2026 : hausse de 12 % au T2">
<img src="separateur.png" alt=""> <!-- décorative : alt vide -->

Nazwa pliku nigdy nie jest opisem. Opisz to, co obrazek wnosi do treści.

Błąd 9: pola formularza bez label

Tekst postawiony obok pola nie jest z nim powiązany. Znacznik label, połączony przez for i id, zapowiada pole czytnikowi ekranu i sprawia, że kliknięcie w tekst ustawia fokus.

Tak nie rób:

Adresse e-mail <input type="email" name="email">
<input type="text" placeholder="Votre nom">

Zrób tak:

<label for="email">Adresse e-mail</label>
<input id="email" type="email" name="email" autocomplete="email">

<label for="nom">Votre nom</label>
<input id="nom" type="text" name="nom" autocomplete="name">

placeholder nie zastępuje label: znika przy wpisywaniu, a jego kontrast bywa zbyt niski. Uzupełniają go inne dobre praktyki dla formularzy HTML.

Błąd 10: style w atrybucie i udawane listy

Dwa złe nawyki, które mieszają strukturę z prezentacją. Styl wpisany w atrybucie nie pozwala zmienić wyglądu bez ruszania HTML-a; lista udawana myślnikami i znacznikami br nie jest listą dla przeglądarki, więc nie potrafi jej ani ogłosić, ani policzyć.

Tak nie rób:

<h1 style="font-size: 24px; color: #333;">Titre</h1>
<p>- Pommes<br>- Poires<br>- Cerises</p>

Zrób tak:

<h1 class="titre-page">Titre</h1>
<ul>
  <li>Pommes</li>
  <li>Poires</li>
  <li>Cerises</li>
</ul>

.titre-page {
  font-size: 1.5rem;
  color: #333;
}

Jak sprawdzić swój HTML

Trzy szybkie kontrole, po kolei:

1. Walidator W3C wskazuje źle zamknięte znaczniki, nieznane atrybuty i brakujące alt.
2. Zakładka Dostępność w narzędziach deweloperskich (Chrome, Firefox) pokazuje drzewo tak, jak widzi je czytnik ekranu: jeśli header, nav i main figurują tam jako obszary, struktura jest dobra.
3. Nawigacja klawiaturą: przejdź stronę tabulatorem. Wszystko, co klikalne, musi przyjmować fokus, w logicznej kolejności. Klikalny div tutaj polegnie.

Pełną listę znaczników struktury i treści znajdziesz w 20 znaczników HTML5, które warto znać. A gdy strona jest już poukładana, pałeczkę przejmuje CSS, choćby po to, by wyśrodkować elementy bez ruszania HTML-a.