Zwykłe pogrubienie tekstu nie wymaga skomplikowanego kodu, ale wybór właściwego znacznika ma znaczenie dla semantyki strony, dostępności i późniejszej pracy z CSS. Pokażę, jak pogrubić tekst w HTML, kiedy użyć lub , a także jak kontrolować grubość pisma za pomocą arkusza stylów.
Najważniejsze zasady pogrubiania tekstu w HTML
- stosuj wtedy, gdy fragment ma szczególne znaczenie.
- służy do wizualnego wyróżnienia tekstu bez dodatkowej informacji semantycznej.
- CSS i font-weight dają kontrolę nad konkretną grubością fontu.
- Nie pogrubiaj całych akapitów, bo tekst traci czytelność.
- Nie używaj do pogrubiania, ponieważ ten znacznik oznacza podkreślenie.
Najprostszy sposób na pogrubienie tekstu
Najczęściej wystarczy objąć wybrany fragment znacznikiem . Przeglądarka domyślnie wyświetli tak oznaczony tekst pogrubioną czcionką.
To jest ważny fragment tekstu w akapicie.
Efekt będzie wyglądał mniej więcej tak: To jest ważny fragment tekstu w akapicie. Sam korzystam z tego rozwiązania przede wszystkim wtedy, gdy wyróżnienie ma coś czytelnikowi zakomunikować, a nie tylko przyciągnąć wzrok.
Możesz pogrubić również pojedyncze słowo, kilka zdań albo element listy. Znacznik działa tylko na treść umieszczoną między otwierającym i zamykającym tagiem.
- Termin płatności: 14 dni
- Status: aktywny
Różnica między strong a b
Oba znaczniki zwykle dają podobny efekt wizualny, ale nie pełnią tej samej funkcji. oznacza, że treść jest ważna lub szczególnie istotna, natomiast jedynie zwraca uwagę na fragment bez nadawania mu dodatkowego znaczenia.
| Znacznik | Kiedy go użyć | Przykład |
|---|---|---|
|
Gdy tekst ma znaczenie informacyjne lub ostrzegawcze | Ważna uwaga, komunikat, termin |
|
Gdy chodzi o czysto wizualne wyróżnienie | Nazwa produktu, słowo kluczowe w opisie |
| CSS | Gdy chcesz kontrolować wygląd całej grupy elementów | Menu, nagłówki, etykiety |
Przykład z semantycznym znaczeniem wygląda tak:
Uwaga: Formularz zostanie zamknięty po 15 minutach.
Z kolei może pasować do nazwy lub terminu, który ma być bardziej widoczny, ale nie jest ważniejszy od reszty zdania:
Oferta obejmuje plan Pro oraz plan Enterprise.
Moja praktyczna zasada jest prosta: najpierw zastanów się, czy pogrubienie niesie znaczenie. Jeśli tak, wybierz . Jeśli ma tylko poprawić układ wizualny, rozważ albo CSS.
Jak pogrubić tekst za pomocą CSS
HTML opisuje strukturę i znaczenie treści, a CSS odpowiada za jej wygląd. Do ustawiania grubości fontu służy właściwość font-weight.
.pogrubiony-tekst {
font-weight: 700;
}Żeby użyć tej klasy w HTML, dodaj ją do wybranego elementu:
Ten akapit jest pogrubiony.
Najczęściej spotkasz wartości 400 dla normalnego tekstu oraz 700 dla pogrubienia. Możesz też używać wartości pośrednich, takich jak 500 lub 600, ale efekt zależy od tego, czy wybrany krój pisma ma dostępne odpowiednie odmiany.
| Wartość | Typowy efekt |
|---|---|
400 |
Tekst normalny |
500 |
Lekkie wzmocnienie |
600 |
Półpogrubienie |
700 lub bold
|
Standardowe pogrubienie |
800 lub 900
|
Bardzo gruby wariant, jeśli font go obsługuje |
Możesz zastosować styl również bezpośrednio w elemencie, choć przy większej stronie nie polecam tej metody:
Pogrubiony fragment
Styl inline jest szybki do testów, lecz utrudnia późniejsze zmiany. W projekcie, który ma więcej niż kilka elementów, lepiej użyć klasy CSS, ponieważ jedną regułą zmienisz wygląd wielu miejsc.
Jak pogrubić tylko wybrany fragment
Do wyróżnienia części zdania najlepiej użyć elementu lub z klasą CSS. Nie musisz obejmować pogrubieniem całego akapitu.
Cena urządzenia wynosi 299 zł z dostawą.
Jeżeli potrzebujesz wyłącznie kontroli wizualnej, możesz zastosować :
Cena urządzenia wynosi 299 zł.
To rozwiązanie daje większą swobodę. Możesz zmienić nie tylko grubość fontu, lecz także kolor, rozmiar czy odstępy, bez mieszania stylów z treścią dokumentu.
W przypadku linku pogrubiaj tylko tekst linku, jeśli naprawdę chcesz go wyróżnić:
Zobacz ofertęTrzeba jednak uważać na kontrast i nadmiar akcentów. Gdy każdy link, cena i drugie zdanie są pogrubione, wzrok nie dostaje jasnej wskazówki, co faktycznie jest najważniejsze.
Najczęstsze błędy przy pogrubianiu tekstu
Jednym z częstszych błędów jest używanie znacznika wszędzie, niezależnie od roli fragmentu. Kod zadziała, ale strona traci część informacji o strukturze i znaczeniu treści.
- Nie pogrubiaj całej strony, bo tekst staje się męczący w odbiorze.
-
Nie używaj kilku znaczników bez potrzeby, na przykład
tekst. -
Nie zastępuj nagłówków pogrubionym akapitem. Do tytułów służą elementy
,Przeczytaj również: HTML/CSS: Jak perfekcyjnie wyśrodkować tekst i elementy?
- Nie zakładaj, że każda wartość font-weight zadziała identycznie. Krój pisma może nie zawierać wszystkich odmian.
- Nie używaj samego koloru jako jedynego wyróżnienia, ponieważ nie każdy odbiorca rozpozna taką różnicę.
Problem może pojawić się też wtedy, gdy styl CSS nadpisuje domyślne zachowanie znacznika. Na przykład taka reguła sprawi, że nie będzie widoczny jako pogrubienie:
strong {
font-weight: 400;
}Sam znacznik nadal zachowa swoje znaczenie semantyczne, ale wizualnie przestanie się wyróżniać. Dlatego podczas debugowania sprawdzam nie tylko HTML, lecz także reguły CSS, dziedziczenie stylów i załadowane warianty fontu.
Jak wybrać właściwe rozwiązanie w praktyce
Jeżeli dopiero zaczynasz, możesz przyjąć prosty schemat działania. Najpierw oznacz ważny fragment przez , później użyj CSS do ustalenia wyglądu całego komponentu lub strony.
- Określ rolę tekstu. Zdecyduj, czy jest ważny, czy tylko ma być bardziej widoczny.
-
Wybierz znacznik. Dla znaczenia użyj
, a dla czysto wizualnego akcentulub. - Dodaj styl CSS, jeśli potrzebujesz konkretnej grubości, koloru albo rozmiaru.
- Sprawdź czytelność na telefonie i komputerze.
W prostym wpisie blogowym wystarczy zwykle taki kod:
Najważniejsza informacja to termin wysyłki podany w opisie.
W większym projekcie lepiej rozdzielić znaczenie od wyglądu:
Szybka wysyłka dla zamówień złożonych do godziny 14:00.
W tym układzie mówi, co jest istotne, a klasa lead może odpowiadać za wygląd całego wyróżnionego akapitu. To podejście skaluje się znacznie lepiej niż ręczne dodawanie stylu w każdym miejscu.
Małe wyróżnienie, duża różnica w czytelności kodu
Do zwykłego pogrubienia użyj , gdy wyróżniany tekst ma znaczenie, oraz , gdy chodzi wyłącznie o efekt wizualny. Gdy potrzebujesz pełnej kontroli nad wyglądem, przenieś styl do CSS i wykorzystaj font-weight.
Najlepszy kod nie tylko pokazuje tekst grubszą czcionką. Informuje też przeglądarkę, czy dany fragment jest ważny, łatwo go zmienić i pozostaje czytelny dla różnych odbiorców. Właśnie ta różnica sprawia, że poprawne pogrubienie jest czymś więcej niż dodaniem kilku znaków przed i za słowem.
