Poznaj Programowanie

Tagi HTML: u

Piotr Grochal 6 min. czytania

Element <u> w HTML wyróżnia fragmenty tekstu, które wymagają wizualnego zaznaczenia bez zmiany znaczenia – np. błędy ortograficzne czy nazwy własne w językach CJK. W HTML5 znacznik <u> uzyskał funkcję semantyczną zamiast czysto prezentacyjnego podkreślenia, dzięki czemu jego użycie nie powinno mylić się z linkami.

Historia i ewolucja znacznika <u>

Przed HTML5 – znacznik służył głównie do podkreślenia tekstu (underline), podobnie jak <b> do pogrubienia czy <i> do kursywy, polegając na domyślnych stylach przeglądarek.

HTML5 i później – specyfikacja rozszerzyła znaczenie semantyczne znacznika; ma on oznaczać nietekstowe adnotacje (np. błąd zapisu, wyróżnienie nazw własnych w chińskim), a nie służyć do dekoracyjnego podkreślania treści.

Dzięki temu <u> może wspierać dostępność – czytniki ekranu mogą odczytywać go jako „tekst podkreślony”, nie myląc go z hiperłączem.

Poniżej zebraliśmy najczęstsze i poprawne zastosowania znacznika <u>:

  • błędy ortograficzne – wyróżnianie błędnych form w edytorach i podglądach korekt;
  • nazwy własne w CJK – wizualne oznaczanie imion, nazwisk i toponimów w językach takich jak chiński czy japoński;
  • adnotacje redakcyjne – tymczasowe oznaczenia wymagające uwagi (np. do weryfikacji) bez zmiany akcentu semantycznego.

Podstawowa składnia i kontekst użycia

Tag <u> należy do treści frazowej (phrasing content) i wymaga znacznika otwierającego i zamykającego: <u>Tekst</u>.

Tabela kontekstu użycia

Poniższa tabela podsumowuje, gdzie i jak można stosować <u> w dokumencie HTML:

Aspekt Szczegóły
Elementy nadrzędne Dowolne elementy akceptujące treść frazową, np. <p>, <span>, <div>.
Elementy potomne Inna treść frazowa, np. <em>, <strong>, <a>, tekst zwykły.
Znaczniki Obowiązkowe: <u> i </u>.
Interfejs DOM HTMLElement.

Nie używaj <u> samodzielnie w miejscach wymagających treści przepływowej (flow content), np. bezpośrednio w <body> – umieszczaj go wewnątrz <p> lub podobnych elementów.

Przykłady praktyczne użycia <u>

1. Oznaczanie błędów ortograficznych

Idealny do podkreślania błędów w edytorach i podglądach korekt:

<p>W tym zdaniu jest błąd: Słowo <u>krztałt</u> powinno być "kształt".</p>

Aby wzmocnić sygnał błędu, zastosuj faliste czerwone podkreślenie w CSS:

u {
text-decoration: underline wavy red;
}

Takie użycie jasno komunikuje błąd semantycznie, bez konieczności stosowania neutralnego <span>.

2. Nazwy własne w języku chińskim

W tekstach chińskich nazwy własne można wizualnie wyróżniać, gdy brak adnotacji ruby:

<p>Znany pisarz <u>李白</u> (Li Bai) napisał wiersz o księżycu.</p>

3. Połączenie z innymi znacznikami semantycznymi

Nie myl ról: <strong> nadaje ważność, <em> – akcent, a <u> – wizualne wyróżnienie bez zmiany znaczenia:

<p>Użyliśmy mikrofonu <strong>Shure SM7B</strong>, ale napisałem <u>mikrofon</u> zamiast "mikrofonu".</p>
<p>Spojrzał i poczuł <em>deja vu</em>, a dodatkowo <u>deja vu</u> wyróżniono stylistycznie.</p>

4. W listach i tabelach

Możesz oznaczyć błąd w nazwie produktu na liście:

<ul>
<li>Produkt: <u>aple</u> (błąd w "apple")</li>
<li>Cena: 100 zł</li>
</ul>

Stylizacja <u> za pomocą CSS – unikaj mylenia z linkami

Domyślne, ciągłe podkreślenie może wyglądać jak link, dlatego warto je nadpisać w CSS dla lepszej czytelności i dostępności.

Podstawowe style

u {
text-decoration: underline wavy #ff0000; /* faliste czerwone */
background-color: #fff3cd; /* delikatne żółte tło */
}

Responsywny przykład z efektem hover

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład &lt;u&gt;</title>
<style>
.error {
text-decoration: underline wavy red;
background: #ffebee;
padding: 2px 4px;
border-radius: 3px;
transition: all 0.3s;
}
.error:hover {
background: #ffcdd2;
text-decoration: underline double red;
}
.chinese-name {
text-decoration: underline;
color: #2196f3;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Przykłady semantycznego &lt;u&gt;</h2>
<p>Błąd: <u class="error">kolorowy</u> zamiast "kolorowy".</p>
<p>Chińskie imię: <u class="chinese-name">李白</u>.</p>
</body>
</html>

Efekt hover wzmacnia informację zwrotną, co poprawia UX, zwłaszcza w interfejsach edytorów treści.

Błędy do uniknięcia i dobre praktyki

Stosując <u>, zwróć uwagę na najczęstsze pułapki i rekomendacje:

  • nie używaj do linków – <u> bywa mylony z <a>; jeśli link nie ma podkreślenia, nadpisz styl przez text-decoration: none na odsyłaczach;
  • nie zastępuj <ins> – <ins> służy do oznaczania wstawek w tekście (różnicowanie wersji), a <u> – do adnotacji stylistycznej;
  • dostępność – testuj z czytnikami NVDA/JAWS; upewnij się, że kontrast i sposób wyróżnienia są wystarczająco czytelne;
  • alternatywy – jeśli chodzi wyłącznie o wygląd, możesz użyć <span style="text-decoration: underline">, pamiętaj jednak, że tracisz semantykę;
  • walidacja – weryfikuj dokument na validator.w3.org; <u> jest zgodny z HTML5.

Zaawansowane zastosowania z JavaScript

Możesz dynamicznie oznaczać błędnie zapisane słowa w treści, podkreślając je semantycznie:

// Symulacja sprawdzania pisowni
window.onload = () => {
document.querySelectorAll('p').forEach(p => {
const words = p.textContent.split(' ');
p.innerHTML = words.map(word => {
if (word.includes('krztałt')) {
return '&lt;u&gt;' + word + '&lt;/u&gt;';
}
return word;
}).join(' ');
});
};

Porównanie z pokrewnymi znacznikami

Poniższa tabela porównuje semantykę i zastosowania zbliżonych elementów:

Znacznik Semantyka Domyślny styl Kiedy używać?
<u> Wizualne wyróżnienie adnotacyjne (np. błąd, nazwa własna w CJK) Podkreślenie Błędy ortograficzne, nazwy własne w CJK
<b> Wizualne pogrubienie bez zmiany ważności Pogrubienie Hasła i słowa kluczowe, gdy nie chcesz nadawać im wagi semantycznej
<i> Wyróżnienie idiomów, terminów obcych, tytułów Kursywa Terminy obce (np. “deja vu”), myśli wewnętrzne, taksony
<strong> Semantycznie ważny, akcentowany tekst Pogrubienie Ostrzeżenia, kluczowe informacje, wyniki
<em> Emfaza (nacisk) w wypowiedzi Kursywa Zmiana akcentu/intonacji w zdaniu