Pogrubienie i kursywa w HTML: znaczniki strong, b,…

Q: Jak pogrubić tekst w HTML?

Otocz go znacznikiem , gdy słowa są ważne ( Warning: ), albo , gdy mają się tylko wyróżniać bez dodatkowej wagi, np. nazwa produktu. Oba domyślnie wyświetlają się pogrubione.

Q: Czym różni się od ?

oznacza, że tekst jest ważny, poważny lub pilny. przyciąga uwagę do tekstu bez sugerowania wagi, np. słowa kluczowe w streszczeniu. Wyglądają tak samo; różnica tkwi w znaczeniu, które ma znaczenie dla czytników ekranu, wyszukiwarek i innych programistów.

Q: Jak zrobić kursywę w HTML?

Użyj dla akcentu, który zmienia sens zdania ("Ja tego nie mówię" z naciskiem na "ja"), a dla tekstu w innym głosie: obcych słów, terminów technicznych, nazw statków, myśli. Oba wyświetlają się kursywą.

Q: Jak uzyskać jednocześnie pogrubienie i kursywę?

Zagnieźdź znaczniki: text . Zamykaj je w kolejności odwrotnej do otwierania. W CSS ustaw na jednym elemencie font-weight: bold i font-style: italic.

Q: Czy mogę pogrubić tekst za pomocą CSS?

Tak: font-weight: bold (albo 700) na dowolnym elemencie. Używaj CSS, gdy pogrubienie jest czysto wizualne, jak etykieta przycisku czy styl nagłówka tabeli, a znaczników HTML, gdy same słowa są ważne lub akcentowane.

Pogrubienie i kursywa w HTML: znaczniki strong, b, em i i

Pogrubisz tekst w HTML znacznikiem lub , a kursywę uzyskasz przez lub . Dowiedz się, którego znacznika kiedy używać, jak połączyć pogrubienie z kursywą i jak zrobić to samo w CSS.

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 pogrubić tekst w HTML

Otocz tekst znacznikiem  lub . Oba go pogrubiają:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong>Warning:</strong> unplug the device before opening it.</p>
  <p>The <b>Pro</b> plan includes offline mode.</p>
</body>
</html>

Wyglądają identycznie. Różnią się tym, co mówią o tekście.

strong a b

Znacznik	Znaczenie	Przykład
`<strong>`	Treść ważna, poważna lub pilna	`<strong>Do not</strong> share your password.`
`<b>`	Wyróżnia się, ale bez dodatkowej wagi	Słowa kluczowe w streszczeniu, nazwa produktu, pierwsze słowa artykułu

Wybierz , gdy w mowie podniesiesz głos albo chcesz, żeby czytelnik tego nie przeoczył. Wybierz , gdy pogrubienie jest wizualną konwencją dla tego rodzaju tekstu. Jeśli żaden nie pasuje, a chodzi tylko o styl, użyj  z klasą i CSS.

Kursywa: em i i

Para znaczników do kursywy działa na tej samej zasadzie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italics</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>I <em>never</em> said she took the money.</p>
  <p>I never said <em>she</em> took the money.</p>
  <p>The word <i lang="fr">déjà vu</i> comes from French, and the ship was the <i>Endurance</i>.</p>
</body>
</html>

Znacznik	Znaczenie	Przykład
`<em>`	Akcent: przesunięcie go zmienia sens zdania	`I <em>never</em> said that.`
`<i>`	Inny głos: obce słowa, terminy techniczne, nazwy statków, myśli	`<i lang="la">et cetera</i>`

Pierwsze dwa zdania powyżej mają te same słowa, a znaczą co innego, bo  stoi w innym miejscu. Gdy  oznacza frazę w innym języku, dodaj atrybut lang, żeby czytniki ekranu wymówiły ją poprawnie.

Kilka innych znaczników domyślnie wyświetla się kursywą: <cite> (tytuł dzieła), <dfn> (definiowany termin), <address> i <var>. Używaj ich, gdy pasują, a domyślny styl zrobi resztę.

Pogrubienie i kursywa razem

Umieść jeden znacznik w drugim i zamknij je w odwrotnej kolejności:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong><em>Bold and italic</em></strong></p>
  <p><em>Italic with a <strong>bold</strong> word inside</em></p>
  <p><b><i>b and i together</i></b></p>
</body>
</html>

text (zamknięte w złej kolejności) nadal się wyświetla, ale przeglądarka musi naprawić drzewo i może rozdzielić twoje elementy; jak wygląda taka naprawa, zobaczysz na stronie o znacznikach.

Pogrubienie i kursywa w CSS

Gdy styl jest czysto wizualny (tytuł karty, cena, etykieta), zamiast dodawać znacznik, użyj CSS na samym elemencie. font-weight odpowiada za pogrubienie, a font-style za kursywę:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS bold and italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .price { font-weight: bold; color: #16a34a; }
    .semi { font-weight: 600; }
    .note { font-style: italic; color: #4b5563; }
    .calm strong { font-weight: normal; color: #dc2626; }
  </style>
</head>
<body>
  <p>Price: <span class="price">$12</span></p>
  <p class="semi">font-weight: 600</p>
  <p class="note">A note set in italics with font-style.</p>
  <p class="calm"><strong>Still strong</strong>, shown in red instead of bold.</p>
</body>
</html>

Ostatnia linia pokazuje, że znaczenie i wygląd to osobne sprawy:  zachowuje swoje znaczenie, a CSS stylizuje go inaczej. Pełen zakres grubości (od 100 do 900) opisuje strona o font-weight w CSS.

Dostępność

Większość czytników ekranu przy domyślnych ustawieniach nie zmienia głosu dla  ani , więc pogrubienie i kursywa to głównie wskazówki wizualne. Wszystko, czego użytkownik nie może przeoczyć (błąd, wymagane pole, termin), powinno wynikać z samych słów, a nie tylko ze stylu. Unikaj też długich fragmentów kursywą lub pogrubionych: trudniej je czytać, zwłaszcza osobom z dysleksją.

Częste błędy

Pogrubienie zamiast nagłówka. Linia tekstu w  nad sekcją nie jest dla czytników ekranu nagłówkiem. Użyj <h2> lub <h3> i nadaj mu styl.
 do stylowania. Jeśli nic w tekście nie jest ważne, użyj  albo CSS.
Pogrubiony cały akapit. Wyróżnienie działa, gdy jest rzadkie. Pogrub jedną frazę, nie cały akapit.
Zamykanie znaczników w złej kolejności. x, nigdy x.
Stare znaczniki. Znacznik  ze starych poradników jest przestarzały. Używaj powyższych znaczników lub font-weight.

Najczęściej zadawane pytania

Jak pogrubić tekst w HTML?

Otocz go znacznikiem , gdy słowa są ważne (Warning:), albo , gdy mają się tylko wyróżniać bez dodatkowej wagi, np. nazwa produktu. Oba domyślnie wyświetlają się pogrubione.

Czym różni się od ?

 oznacza, że tekst jest ważny, poważny lub pilny.  przyciąga uwagę do tekstu bez sugerowania wagi, np. słowa kluczowe w streszczeniu. Wyglądają tak samo; różnica tkwi w znaczeniu, które ma znaczenie dla czytników ekranu, wyszukiwarek i innych programistów.

Jak zrobić kursywę w HTML?

Użyj  dla akcentu, który zmienia sens zdania ("Ja tego nie mówię" z naciskiem na "ja"), a  dla tekstu w innym głosie: obcych słów, terminów technicznych, nazw statków, myśli. Oba wyświetlają się kursywą.

Jak uzyskać jednocześnie pogrubienie i kursywę?

Zagnieźdź znaczniki: text. Zamykaj je w kolejności odwrotnej do otwierania. W CSS ustaw na jednym elemencie font-weight: bold i font-style: italic.

Czy mogę pogrubić tekst za pomocą CSS?

Tak: font-weight: bold (albo 700) na dowolnym elemencie. Używaj CSS, gdy pogrubienie jest czysto wizualne, jak etykieta przycisku czy styl nagłówka tabeli, a znaczników HTML, gdy same słowa są ważne lub akcentowane.

Powiązane zagadnienia