Pogrubienie i kursywa: <b>, <strong>, <i>, <em>

Pogrubienie i kursywa to jedne z najczęściej stosowanych stylów formatowania tekstu na stronach internetowych. Umożliwiają wyróżnienie ważnych informacji, nagłówków, cytatów czy fragmentów tekstu, które chcemy podkreślić dla użytkownika.

W HTML mamy kilka znaczników, które pozwalają na osiągnięcie efektu pogrubienia i kursywy. Jednak każdy z nich ma swoją specyfikę i znaczenie semantyczne. Dlatego warto wiedzieć, którego używać i kiedy.

Pogrubienie tekstu – <b> i <strong>

<b> i <strong> na pierwszy rzut oka wyglądają podobnie – oba powodują pogrubienie tekstu. Jednak ich zastosowanie jest inne.

Znacznik <b>

Znacznik <b> stosujemy wtedy, gdy chcemy pogrubić tekst, ale bez nadawania mu dodatkowego znaczenia. To czysto wizualny efekt, który nie ma wpływu na interpretację treści przez przeglądarki, czytniki ekranu ani SEO.

<p>To jest <b>pogrubiony</b> tekst za pomocą znacznika &lt;b&gt;.</p>

Efekt:

To jest pogrubiony tekst za pomocą znacznika <b>.

Znacznik <strong>

Znacznik <strong> również powoduje pogrubienie, ale dodatkowo ma znaczenie semantyczne. Informuje przeglądarkę i czytniki ekranowe, że dany fragment tekstu jest ważny. Jest to zalecane rozwiązanie, gdy chcesz wyróżnić istotną informację, np. ostrzeżenie lub kluczowe zdanie.

<p><strong>Uwaga!</strong> To jest bardzo ważna informacja.</p>

Efekt:

Uwaga! To jest bardzo ważna informacja.

Kursywa – <i> i <em>

Tak jak w przypadku pogrubienia, mamy dwa znaczniki kursywy: <i> i <em>. Oba sprawiają, że tekst jest pochylony, ale różnią się znaczeniem.

Znacznik <i>

<i> służy do pochylenia tekstu, ale bez nadania mu specjalnego znaczenia. Jest używany na przykład w nazwach technicznych, terminach z języków obcych, nazwach statków itp.

<p>To jest <i>kursywa</i> za pomocą znacznika &lt;i&gt;.</p>

Efekt:

To jest kursywa za pomocą znacznika <i>.

Znacznik <em>

<em> działa jak <i>, ale dodatkowo oznacza, że dany tekst powinien być wypowiedziany z naciskiem. Przeglądarki i czytniki ekranowe traktują go jako fragment wymagający dodatkowej uwagi. Semantycznie oznacza emfatyczne podkreślenie.

<p>Proszę, <em>uważaj</em> na ten krok!</p>

Efekt:

Proszę, uważaj na ten krok!

Różnice semantyczne – kiedy stosować <b>/<i>, a kiedy <strong>/<em>?

• <b> i <i> to znaczniki czysto wizualne. Używamy ich, gdy chcemy tylko zmienić wygląd tekstu, bez sugerowania jego ważności czy znaczenia.
• <strong> i <em> mają znaczenie semantyczne. Wskazują, że tekst ma szczególne znaczenie lub wymaga dodatkowego nacisku. Warto ich używać, gdy tekst jest ważny dla zrozumienia treści przez użytkownika.

Przykład praktyczny

Poniżej znajdziesz przykład użycia wszystkich znaczników:

<h1>Witamy na stronie!</h1>

<p>To jest <b>ważny tekst</b>, który przyciąga wzrok.</p>

<p><strong>Uwaga!</strong> To jest istotna informacja, którą musisz przeczytać.</p>

<p>W artykule znajdziesz cytaty w języku <i>łacińskim</i>.</p>

<p><em>Naprawdę</em> warto to przeczytać!</p>

Efekt:

Witamy na stronie!

To jest ważny tekst, który przyciąga wzrok.

Uwaga! To jest istotna informacja, którą musisz przeczytać.

W artykule znajdziesz cytaty w języku łacińskim.

Naprawdę warto to przeczytać!

✅ Podsumowanie

• Znaczniki <b> i <strong> służą do pogrubienia tekstu, ale <strong> dodaje również znaczenie semantyczne.
• Znaczniki <i> i <em> służą do pochylenia tekstu, przy czym <em> wskazuje na nacisk semantyczny.
• Dzięki znajomości tych znaczników możesz poprawić czytelność tekstu na stronie i ułatwić jego zrozumienie użytkownikom oraz czytnikom ekranowym.

🎯 Ćwiczenie w JSFiddle

Sprawdź swoją wiedzę!
Przejdź do JSFiddle i wklej poniższy kod w sekcji HTML:

<h1>Moja pierwsza strona z formatowaniem tekstu</h1>

<p>To jest <strong>ważna</strong> informacja!</p>

<p>Moje hobby to: <i>czytanie książek</i> i <i>programowanie</i>.</p>

<p><em>Spróbuj swoich sił!</em></p>

Kliknij przycisk Run, aby zobaczyć efekt działania kodu.