6 najbardziej niedocenianych tagów HTML

Co to jest tag semantyczny?

Trafiając na ten artykuł prawdopodobnie wiesz, czym jest tag semantyczny, ale dla przypomnienia:

Tag semantyczny to taki znacznik HTML, który informuje przeglądarkę i technologie asystujące (np. czytniki ekranu), czym dana treść jest, a nie tylko jak powinna wyglądać.

Np.:

• <div>Kontakt</div> - nie niesie znaczenia semantycznego - służy jedynie do grupowania elementów.
• <h1>Kontakt</h1> - jest już tagiem semantycznym i nadaje znaczenie treści, która się w nim znajduje (w tym wypadku wiemy, że jest to główny nagłówek strony lub sekcji).
  

1. <abbr>

Z angielskiego abbreviation. Tag ten służy do zapisywania w nim akronimów, czyli skrótów popularnych wyrażeń. Np.:

• EN: ASAP, SEO, API, ETA
• PL: NFZ, GUS, US

Takie akronimy są szczególnie popularne w USA, a w Polsce kojarzą się one głównie z instytucjami, najczęściej publicznymi.

Ale po co używać abbr?

Otóż nie każdy czytelnik musi wiedzieć co dany skrót oznacza. A my musimy ułatwić użytkownikom odnaleźć się w tym gąszczu skrótowców.

1<abbr title="As Soon As Possible">ASAP</abbr>
2<p>
3  Decyzja została wydana przez <abbr title="Główny Urząd Statystyczny">GUS</abbr>.
4</p>

Efekty użycia

• po najechaniu myszką może pojawić się rozwinięcie skrótu (tooltip),
• w niektórych przypadkach czytniki ekranu mogą odczytać pełną formę,
• poprawia to semantykę i czytelność kodu.

WCAG i dostępność

Tag <abbr> częściowo wspiera dostępność, ale nie powinien być jedyną metodą przekazywania znaczenia skrótów.

W kontekście WCAG 1.3.1 (Info and Relationships) może pomóc w poprawnym przekazaniu relacji między skrótem a jego rozwinięciem.

Należy jednak pamiętać, że wsparcie czytników ekranu dla <abbr> i atrybutu title nie jest w pełni spójne, dlatego nie można polegać wyłącznie na tym rozwiązaniu.

2. <details> i <summary>

Tagi <details> i <summary> służą do tworzenia rozwijanych sekcji treści (akordeonu) bez użycia nadużywanego w dzisiejszych czasach JavaScriptu.

• <summary> to widoczny nagłówek, który użytkownik klika
• <details> zawiera ukrytą treść, która rozwija się po kliknięciu

1<details>
2  <summary>Więcej informacji</summary>
3  <p>
4    To jest treść ukryta domyślnie i widoczna po rozwinięciu.
5  </p>
6</details>
7
8<!-- Domyślnie otwarty -->
9<details open>
10  <summary>Ważna informacja</summary>
11  <p>Widoczna od razu treść.</p>
12</details>

Do czego się używa?

• FAQ
• dodatkowe informacje
• opcjonalne opisy
• sekcje “czytaj więcej”

Dlaczego warto?

• działa bez JavaScriptu - mniej JavaScript to szybsza strona
• jest semantyczny - przeglądarki i roboty indeksujące (w tym Google) łatwiej interpretują kontekst danych. Także agenci AI są w stanie łatwiej zinterpretować treść takiej strony.
• ma dobrą domyślną dostępność (WCAG) - Normalnie musielibyśmy poświęcić sporo czasu na ustawianie poprawnych atrybutów aria lub instalować zewnętrzną bibliotekę komponentów i liczyć, że ktoś zrobił robotę poprawnie za nas.
• czytniki ekranu rozumieją stan rozwinięcia - analogicznie jak w punkcie wyżej nie trzeba siłować się z atrybutami aria

3. <time>

Tag <time> służy do oznaczania daty, godziny lub czasu trwania w sposób semantyczny, dzięki czemu przeglądarki i technologie asystujące lepiej rozumieją kontekst czasowy.

1<p>
2  Spotkanie odbędzie się
3  <time datetime="2026-06-02">2 czerwca 2026</time>.
4</p>
5
6<time datetime="2026-06-02T14:30">14:30</time>
7
8<time datetime="PT2H30M">
9  2 godziny 30 minut
10</time>

<time> nie zmienia wyglądu strony, ale dodaje precyzyjne znaczenie czasu, które może być wykorzystane przez przeglądarki, roboty oraz technologie takie jak AI.
Roboty indeksujące łatwiej interpretują treść, co ułatwia zrozumienie struktury danych przez wyszukiwarki, a agenci AI mniejszym nakładem tokenów łapią kontekst treści.

4. <mark>

Tag <mark> służy do wyróżniania fragmentu tekstu, który jest istotny w danym kontekście — najczęściej jako „podświetlenie”.
Ale zaraz, czy to nie to samo co <strong> ?
Otóż różnica jest dosyć subtelna.

• <mark>- Służy do zaznaczenia fragmentu, który jest istotny w danym momencie (np. jeśli dana strona ma wyszukiwarkę z automplete podpowiadanie wyniki mogą zawierać oznaczenie pasującej treści za pomocą tagu mark).
• <strong>- Służy do oznaczenia tekstu, który jest ważny lub kluczowy znaczeniowo.

1<!-- Np. Gdy szukam "Jeansy" w przeglądarce -->
2<p>
3  <mark>Jeansy</mark> męskie dopasowane granatowe
4</p>
5
6<p>
7  <strong>Uwaga:</strong> Nie zamykaj przeglądarki podczas instalacji.
8</p>

5. <kbd>

Tag <kbd> służy do oznaczania wejścia z klawiatury lub skrótów klawiszowych. Dzięki temu jasno pokazuje, że dany fragment to akcja użytkownika, a nie zwykły tekst.
Częściej są one spotykane w aplikacjach webowych związanych z programistami przyzwyczajonymi do używania klawiatury. Podczas, gdy druga strona Internetu polega głównie na poruszaniu myszką i dotyku.

1<p>
2  Aby zapisać plik, naciśnij <kbd>Ctrl</kbd> + <kbd>S</kbd>.
3</p>

Do czego się używa?

• skróty klawiaturowe (Ctrl, Alt, Cmd)
• instrukcje obsługi (tutoriale)
• dokumentacja i UX guide

<kbd> to prosty, ale bardzo przydatny tag do oznaczania interakcji użytkownika z klawiaturą, który poprawia czytelność i semantykę instrukcji.

6. <address>

Tag <address> służy do oznaczania danych kontaktowych osoby, firmy lub autora. Ma znaczenie semantyczne - informuje, że zawartość dotyczy kontaktu, a nie zwykłego tekstu.

1<address>
2  Jan Kowalski<br>
3  ul. Przykładowa 10<br>
4  00-001 Warszawa<br>
5  jan@example.com
6</address>

Do czego się używa?

• dane kontaktowe autora artykułu
• informacje o firmie
• stopki stron (kontakt)

Źródła:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements