Czym różni się od ?

oznacza tekst, który nie jest już istotny ani prawdziwy, ale zostaje dla kontekstu, jak przekreślona cena. oznacza tekst usunięty z dokumentu, często obok pokazującego, co go zastąpiło, i może mieć atrybuty datetime i cite.

Podkreślenie i przekreślenie w HTML: znaczniki u, i…

Q: Jak podkreślić tekst w HTML?

Otocz go znacznikiem albo użyj text-decoration: underline w CSS. stosuj tylko zgodnie z jego konkretnym znaczeniem (na przykład do oznaczenia błędnie zapisanego słowa); do czysto wizualnego podkreślenia użyj CSS na lub na samym elemencie.

Q: Jak przekreślić tekst w HTML?

Użyj dla tekstu, który nie jest już aktualny, jak stara cena, a dla tekstu usuniętego podczas edycji. Oba rysują linię przez tekst. W CSS text-decoration: line-through daje ten sam efekt wizualny.

Q: Czy znacznik jest przestarzały?

Nie. był przestarzały w HTML 4, ale wrócił w HTML5 z nowym znaczeniem: tekst z adnotacją nietekstową, na przykład błąd ortograficzny albo nazwa własna w tekście chińskim. Jest poprawny, tylko rzadko jest właściwym wyborem.

Podkreślenie i przekreślenie w HTML: znaczniki u, ins, s i del

Podkreśl tekst w HTML za pomocą lub text-decoration w CSS, a przekreśl go za pomocą <s> lub <del>. Dowiedz się, co znaczy każdy znacznik, jak <ins> i <del> oznaczają zmiany i dlaczego podkreślony tekst, który nie jest linkiem, myli czytelników.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Jak podkreślić tekst w HTML

Są dwa sposoby: znacznik  albo właściwość CSS text-decoration: underline. Oba rysują taką samą linię:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .underline { text-decoration: underline; }
  </style>
</head>
<body>
  <p>With the tag: <u>underlined text</u></p>
  <p>With CSS: <span class="underline">underlined text</span></p>
  <p>A link, for comparison: <a href="#">underlined by default</a></p>
</body>
</html>

Problem z każdym podkreśleniem widać w trzecim wierszu: czytelnicy oczekują, że podkreślony tekst to link, i klikają go. Podkreślaj zwykły tekst tylko wtedy, gdy jest ku temu wyraźny powód.

Co oznacza znacznik u

 to nie ogólny przycisk "podkreśl". We współczesnym HTML oznacza tekst z niewyrażoną adnotacją: znak mówiący "tu jest coś szczególnego", bez mówienia, co to jest. Typowe realne zastosowania:

oznaczanie błędu ortograficznego (tak jak robi to edytor tekstu, często czerwoną falistą linią),
oznaczanie nazw własnych w tekście chińskim, co jest tam konwencją typograficzną.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>u for spelling</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    u.spelling { text-decoration: underline wavy #dc2626; }
  </style>
</head>
<body>
  <p>Check this sentence: I <u class="spelling">recieved</u> the package.</p>
</body>
</html>

Do wyróżnienia używaj  lub  (zobacz pogrubienie), a do tytułów książek <cite>. Jeśli chodzi ci tylko o wygląd, użyj CSS.

Przekreślenie: s i del

HTML ma dwa znaczniki, które rysują linię przez tekst, i znaczą one co innego:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Strikethrough</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .new { color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p>Price: <s>$49</s> <span class="new">$29</span></p>
  <ul>
    <li><del>Buy milk</del></li>
    <li>Call the bank</li>
  </ul>
</body>
</html>

Znacznik	Znaczenie	Typowe użycie
`<s>`	Już nieaktualne lub nieistotne, zostawione dla kontekstu	Stara cena, wyprzedany rodzaj biletu
`<del>`	Usunięte z dokumentu	Edycje, dzienniki zmian, zrobione punkty na liście zadań

Oznaczanie zmian za pomocą ins i del

<ins> to para dla <del>: oznacza tekst, który został dodany. Przeglądarki domyślnie go podkreślają. Oba przyjmują datetime (kiedy nastąpiła zmiana) i cite (adres URL z wyjaśnieniem):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ins and del</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    del { color: #dc2626; background: #fee2e2; }
    ins { color: #16a34a; background: #dcfce7; text-decoration: none; }
  </style>
</head>
<body>
  <p>
    The meeting is on
    <del datetime="2026-09-20">Monday</del>
    <ins datetime="2026-09-21">Tuesday</ins>
    at 10:00.
  </p>
</body>
</html>

Ten czerwono-zielony styl to znajomy wygląd diffa. text-decoration: none na ins usuwa domyślne podkreślenie, żeby tekst nie wyglądał jak link.

Podkreślenie i przekreślenie w CSS

text-decoration załatwia stronę wizualną dla dowolnego elementu: przyjmuje kolor i styl, a text-decoration-thickness ustawia grubość. Do czysto dekoracyjnych linii to właściwe narzędzie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-decoration</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; }
    .brand { text-decoration: underline #2563eb; text-decoration-thickness: 3px; text-underline-offset: 4px; }
    .dotted { text-decoration: underline dotted #f59e0b; }
    .through { text-decoration: line-through #dc2626; text-decoration-thickness: 2px; }
    .over { text-decoration: overline; }
  </style>
</head>
<body>
  <p><span class="brand">thick blue underline</span></p>
  <p><span class="dotted">dotted underline</span></p>
  <p><span class="through">red line through</span></p>
  <p><span class="over">overline</span></p>
</body>
</html>

Usuwanie podkreślenia z linków, odstęp podkreślenia i pozostałe szczegóły text-decoration znajdziesz na stronie o podkreśleniu w CSS.

Dostępność

Obsługa <s>, <del> i <ins> w czytnikach ekranu jest niespójna: niektóre ogłaszają je jako usunięte lub wstawione, wiele czyta je jak zwykły tekst, więc słuchacz może usłyszeć "Cena 49 dolarów 29 dolarów" bez wskazówki, która jest aktualna. Gdy różnica ma znaczenie, powiedz to też słowami, na przykład tekstem ukrytym wizualnie, ale czytanym na głos, albo po prostu "Było 49 $, teraz 29$ ".

Częste błędy

Podkreślanie tekstu, który nie jest linkiem. Czytelnicy będą próbowali go kliknąć. Do wyróżnienia użyj pogrubienia, koloru lub tła.
Używanie  do wyróżnienia. Użyj  lub .
Używanie <strike>. Jest przestarzały. Użyj <s>, <del> lub text-decoration: line-through.
Używanie <s> dla usuniętej treści w historii dokumentu. Do tego służy <del>, który może też zapisać, kiedy to nastąpiło.
Poleganie wyłącznie na linii jako nośniku znaczenia. Wiele czytników ekranu jej nie ogłasza.

Najczęściej zadawane pytania

Jak podkreślić tekst w HTML?

Otocz go znacznikiem  albo użyj text-decoration: underline w CSS.  stosuj tylko zgodnie z jego konkretnym znaczeniem (na przykład do oznaczenia błędnie zapisanego słowa); do czysto wizualnego podkreślenia użyj CSS na  lub na samym elemencie.

Jak przekreślić tekst w HTML?

Użyj <s> dla tekstu, który nie jest już aktualny, jak stara cena, a <del> dla tekstu usuniętego podczas edycji. Oba rysują linię przez tekst. W CSS text-decoration: line-through daje ten sam efekt wizualny.

Czy znacznik jest przestarzały?

Nie.  był przestarzały w HTML 4, ale wrócił w HTML5 z nowym znaczeniem: tekst z adnotacją nietekstową, na przykład błąd ortograficzny albo nazwa własna w tekście chińskim. Jest poprawny, tylko rzadko jest właściwym wyborem.

Co się stało ze znacznikiem <strike>?

<strike> jest przestarzały. Przeglądarki nadal pokazują go jako przekreślenie, ale nie jest poprawnym HTML. Użyj <s> lub <del> w zależności od znaczenia albo text-decoration: line-through.

Czym różni się <s> od <del>?

<s> oznacza tekst, który nie jest już istotny ani prawdziwy, ale zostaje dla kontekstu, jak przekreślona cena. <del> oznacza tekst usunięty z dokumentu, często obok <ins> pokazującego, co go zastąpiło, i może mieć atrybuty datetime i cite.

Powiązane zagadnienia