Poznaj Programowanie

Tagi HTML: b

Piotr Grochal 7 min. czytania

W dzisiejszym świecie web developmentu, gdzie semantyka HTML odgrywa kluczową rolę, tag <b> wciąż ma swoje miejsce.

Element <b> służy do czysto wizualnego pogrubiania tekstu i nie nadaje treści dodatkowego znaczenia semantycznego. Dzięki temu świetnie sprawdza się, gdy chcesz subtelnie przyciągnąć wzrok do fragmentu bez sugerowania jego istotności w strukturze dokumentu.

W odróżnieniu od <strong>, który sygnalizuje ważność treści, <b> jest neutralny semantycznie i nie zmienia sposobu interpretacji treści przez wyszukiwarki czy technologie asystujące.

Czym dokładnie jest tag <b>? Definicja i specyfikacja HTML5

Zgodnie ze specyfikacją HTML5, <b> reprezentuje fragment tekstu, na który autor chce zwrócić uwagę czytelnika, ale bez przypisywania mu specjalnego znaczenia. Może to być np. wyróżnienie słów kluczowych w abstrakcie, nazwy produktów w recenzji czy stylistyczne podkreślenie pierwszego wiersza rozdziału.

W HTML5 <b> to „ostatnia deska ratunku” – użyj go tylko wtedy, gdy żaden inny element (np. <strong>, <em>, <mark>) nie oddaje właściwego sensu.

Interfejs DOM: HTMLElement – możesz nim manipulować w JavaScript, np. document.querySelector('b').style.fontWeight = 'bolder';.

Znaczniki: otwarcie i zamknięcie są obowiązkowe (<b> i </b>). Brak atrybutów specyficznych; do stylowania używaj klas CSS.

Główne zastosowania tagu <b> w praktyce

Wykorzystaj <b> tam, gdzie wizualne pogrubienie ma przyciągnąć uwagę, ale nie powinno zmieniać semantyki dokumentu. Oto typowe scenariusze:

  • Słowa kluczowe – w podsumowaniach lub abstraktach, np. <b class="slowo-kluczowe">algorytmy sortowania</b> w artykule o programowaniu;
  • Nazwy produktów – w recenzjach sklepowych, np. „Recenzja iPhone 15 – czy warto kupić”;
  • Stylistyczne wyróżnienia – pierwszy wiersz akapitu w e‑bookach lub nazwy sekcji, którym nie towarzyszą nagłówki;
  • Nazwy plików lub fragmenty kodu – w tutorialach, np. „Pobierz plik style.css”.

Poniżej znajdziesz kontekst użycia zgodny ze specyfikacją HTML5:

Elementy nadrzędne Elementy potomne
Elementy treści (np. <p>, <div>, <h1>) Treść frazowa (np. <span>, <a>)

<b> można bezpiecznie zagnieżdżać w akapitach, listach i nagłówkach oraz łączyć z innymi znacznikami formatującymi.

Różnica między <b> a <strong> – kluczowa wiedza dla programistów

To częsty błąd początkujących: używanie <b> zamiast <strong> wtedy, gdy chcesz podkreślić wagę informacji. Oto szybkie porównanie:

Aspekt <b> <strong>
Efekt wizualny Pogrubiony tekst (domyślnie font-weight: bold) Pogrubiony tekst
Semantyka Brak – wyróżnienie czysto wizualne Sygnalizuje ważność treści
Czytniki ekranu Odczyt neutralny Może być akcentowane jako istotne
SEO Neutralne Może pomóc algorytmom lepiej zrozumieć hierarchię treści
Kiedy używać Nazwy produktów, słowa kluczowe, akcenty stylistyczne Ostrzeżenia, komunikaty systemowe, kluczowe informacje

Przykład porównawczy – oba fragmenty wyglądają podobnie, ale różnią się znaczeniem semantycznym:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>b kontra strong</title>
</head>
<body>
<p>Użyj <b>tego przycisku</b> do kontynuacji.</p>
<!-- Wizualne wyróżnienie, bez semantyki -->
<p><strong>Uwaga!</strong> To jest krytyczna informacja.</p>
<!-- Semantyczna ważność -->
</body>
</html>

Wynik: oba fragmenty są pogrubione, ale jedynie <strong> komunikuje istotność treści technologiom asystującym.

Oto poprawny przykład zagnieżdżania, który łączy oba znaczniki:

<p>To jest <strong>bardzo ważny <b>fragment</b></strong>.</p>

Efekt: widoczne pogrubienie; intensywność może różnić się w zależności od przeglądarki i stylów CSS.

Przykłady kodu – od prostych po zaawansowane z CSS i JavaScript

Podstawowy przykład z czystym HTML

Poniżej minimalny szablon ilustrujący użycie <b> w akapicie:

<!DOCTYPE html>
<html lang="pl">
<head>
<title>Prosty przykład tagu b</title>
</head>
<body>
<p>To jest zwykły tekst, a <b>to jest pogrubione</b> wizualnie.</p>
</body>
</html>

Efekt: fraza „to jest pogrubione” wyświetli się jako tekst pogrubiony.

Zaawansowany przykład z klasami CSS

Przypisz klasy, aby rozróżnić zastosowania i zachować elastyczność stylów:

<!DOCTYPE html>
<html lang="pl">
<head>
<style>
.produkt { font-weight: bold; color: #007bff; font-size: 1.1em; }
.kluczowe { font-weight: bold; background-color: #ffffcc; padding: 2px 4px; }
</style>
<title>Stylowane b</title>
</head>
<body>
<h2>Recenzja produktów</h2>
<p>Najlepszy laptop to <b class="produkt">Dell XPS 13</b>.</p>
<p><b class="kluczowe">Słowa kluczowe</b>: wydajność, bateria.</p>
</body>
</html>

Takie podejście daje precyzyjną kontrolę nad formatowaniem bez utraty semantycznej neutralności <b>.

Integracja z JavaScript – dynamiczne pogrubianie

Ten przykład pokazuje, jak dynamicznie dodać <b> do wybranego fragmentu tekstu:

<!DOCTYPE html>
<html lang="pl">
<head>
<title>Dynamiczne b z JS</title>
</head>
<body>
<p id="tekst">Kliknij, by pogrubić fragment.</p>
<button onclick="pogrub()">Pogrub!</button>
<script>
function pogrub() {
const el = document.getElementById('tekst');
el.innerHTML = el.innerHTML.replace('fragment', '<b>fragment</b>');
}
</script>
</body>
</html>

Kliknięcie przycisku owija słowo „fragment” znacznikiem <b>, dodając mu wizualny akcent.

Najlepsze praktyki i pułapki do uniknięcia

Zanim użyjesz <b>, weź pod uwagę poniższe wskazówki:

  • używaj z umiarem – specyfikacja HTML5 traktuje <b> jako opcję awaryjną; gdy nie potrzebujesz semantyki, rozważ CSS z font-weight: bold na <span>;
  • dostępność (a11y) – testuj z czytnikami ekranu; <b> nie komunikuje ważności, co jest akceptowalne dla wyróżnień czysto wizualnych;
  • SEO – <b> jest neutralne; jeśli treść jest kluczowa, użyj <strong>, aby wyraźniej zaznaczyć jej znaczenie;
  • nie myl ról – gdy tekst ma znaczenie lub niesie priorytet, wybierz <strong>; jeśli masz wątpliwość co do intencji, preferuj <strong>;
  • responsywność – styluj przez klasy i media queries, np. @media (max-width: 600px) { .produkt { font-weight: normal; } }.

Alternatywy dla <b> – kiedy lepiej użyć czegoś innego?

W niektórych sytuacjach lepszym wyborem będą elementy semantyczne lub czysty CSS:

  • CSS – <span style="font-weight: bold;">tekst</span> – pełna kontrola prezentacji;
  • <mark> – do podświetlania wyników wyszukiwania lub treści chwilowo istotnych;
  • <em> – kursywa z naciskiem o znaczeniu semantycznym.