Czym jest znacznik strong?
Spis treści
Funkcją znacznika <strong> w kodzie HTML jest nadanie treści większej wagi dokumentu przez pogrubianie tekstu w istotnych dla internautów miejscach. Wpływa to zarówno na sposób interpretacji tekstu przez użytkowników, jak i na analizę semantyczną przeprowadzaną przez wyszukiwarki internetowe.
Czym jest znacznik strong? – Definicja
Znacznik <strong> w HTML (pogrubienie) to element języka znaczników HTML służący do semantycznego oznaczania fragmentu tekstu jako istotnego lub mającego szczególne znaczenie w kontekście treści dokumentu.
Przeglądarki internetowe domyślnie renderują wyświetlany tekst w wewnątrz znacznika <strong> jako pogrubiony, jednak jego główną funkcją jest nadanie treści większej wagi semantycznej, co może być wykorzystywane przez technologie asystujące, takie jak czytniki ekranu. W odróżnieniu od znacznika <b>, który jedynie zmienia wygląd tekstu, <strong> podkreśla jego znaczenie w strukturze informacji.
Składnia znacznika <strong> w HTML
Znacznik <strong> służy do oznaczania fragmentu tekstu jako istotnego semantycznie. Jego składnia ma następującą postać:
<strong>Tekst wyróżniony</strong>
Przykład użycia:
<p>Dlaczego warto zainwestować w <strong>pozycjonowanie strony internetowej</strong>własnej firmy?</p>
W powyższym przykładzie przeglądarka domyślnie wyrenderuje tekst „pozycjonowanie strony internetowej” jako pogrubiony, ale jego semantyczne znaczenie pozostaje kluczowe dla poprawnej interpretacji treści przez technologie asystujące oraz wyszukiwarki internetowe.
Funkcja znacznika <strong>
Pogrubienie tekstu w HTML przez znacznik <strong> pełni dwie podstawowe funkcje:
-
Semantyka – informuje wyszukiwarki i czytniki ekranowe, że tekst jest ważniejszy w kontekście treści strony.
-
Dostępność – ułatwia osobom korzystającym z technologii asystujących (np. screen readerów) zrozumienie struktury treści.
Pogrubienie tekstu HTML przez <strong> i przez <b> – różnice
Formatowanie tekstu w HTML przy pomocy znacznika <strong> ma większe znaczenie.
<strong> nadaje tekstowi znaczenie semantyczne, podczas gdy <b> skupia się wyłącznie na wizualnym pogrubieniu wybranego elementu bez dodatkowego znaczenia semantycznego.
Przykład:
-
<strong>: „To jest ważne!” (ważne semantycznie).
-
<b>: „To jest ważne!” (wyłącznie znaczenie wizualne, bez żadnego znaczenia semantycznego).
Choć <strong> domyślnie stosuje pogrubienie, w nowoczesnych projektach wizualny wygląd można dostosować za pomocą CSS, zachowując jednocześnie semantyczne znaczenie znacznika.
Znacznik strong przynależy do języka HTML. Ma on dość podobną funkcję do znacznika <b>. Jego celem jest pogrubienie tekstu. Można umieścić go na stronie internetowej właśnie po to, aby tekst w niektórych miejscach został wyróżniony. Takie działanie sprzyja bowiem czytelności treści.
Ważne jest jednak, aby podkreślone fragmenty nie były przypadkowe. Optymalnie wyróżnione powinny zostać treści, które mają szczególne znaczenie. Wyróżnienie tekstu w taki sposób ma także wpływ na SEO (ang. Search Engine Optimization).
Nie da się bowiem ukryć, że algorytmy Google zwracają uwagę nie tylko na przystępność tekstu, ale również na jego czytelność. Dzięki wykorzystaniu znaczników strong możliwe jest zatem zwrócenie uwagi użytkownika strony internetowej na najważniejsze informacje. Tekst staje się również bardziej estetyczny. Wydawać by się mogło, że działanie znaczników <strong> oraz <bold> jest identyczne. Różnica jest jednak znacząca.
Znacznik strong a znacznik bold — różnica
Celem znacznika bold <b>, podobnie jak <strong>, jest wyróżnienie tekstu. <strong> jednak wyróżnia tekst nie tylko wizualnie, ale również merytorycznie. Jest to, jak wspomnieliśmy, ważne z perspektywy pozycjonowania. Z tego powodu warto wykorzystywać znacznik <strong> na przykład do podkreślenia odpowiednio dobranych słów kluczowych. Znacznikiem <b> możesz zatem śmiało pogrubić tekst, który chcesz podkreślić wizualnie, ale nie zwracać na niego szczególnej uwagi merytorycznej.
Jak pogrubić tekst w HTML i CSS?
Pogrubienie HTML
Aby pogrubić tekst, należy umieścić go w znaczniku <strong> lub <b> w pliku HTML. W tym celu:
-
Otwórz edytor kodu (np. Notatnik, VS Code, Sublime Text).
-
Utwórz nowy plik i zapisz go z rozszerzeniem .html, np. index.html.
-
Wprowadź następujący kod:
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Przykład pogrubienia</title>
</head>
<body>
<p>To jest <strong>ważny tekst</strong>.</p>
<p>To jest <b>pogrubiony tekst</b>, ale bez semantycznego znaczenia.</p>
</body>
</html>
Na koniec zapisz plik i otwórz go w przeglądarce internetowej (np. Chrome, Firefox).
Pogrubienie tekstu za pomocą CSS
Aby kontrolować pogrubienie tekstu przy użyciu arkuszy stylów CSS, można zastosować właściwość font-weight.
W edytorze kodu utwórz dwa pliki:
-
Plik HTML (np. index.html)
-
Plik CSS (np. style.css)
W pliku HTML dodaj odwołanie do arkusza CSS:
<!DOCTYPE html>
<html lang=”pl”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Przykład CSS</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<p class=”pogrubiony”>To jest tekst pogrubiony przez CSS.</p>
</body>
</html>
W pliku CSS (style.css) dodaj następujący kod:
.pogrubiony {
font-weight: bold;
}
Zapisz oba pliki i otwórz index.html w przeglądarce.
Teraz tekst w paragrafie z klasą .pogrubiony będzie wyświetlany jako pogrubiony dzięki CSS.
Jak precyzyjnie określić grubość tekstu w CSS?
W języku CSS precyzyjne określenie grubości tekstu definiuje się za pomocą właściwości font-weight. Można użyć zarówno wartości słownych, jak i liczbowych.
p {
font-weight: normal; /* Standardowa grubość */
font-weight: bold; /* Pogrubiony tekst */
}
Użycie wartości liczbowych
Grubość tekstu można określić liczbami od 100 do 900, gdzie:
-
100 – najcieńsza czcionka,
-
400 – standardowa grubość (normal),
-
700 – odpowiada wartości bold,
-
900 – maksymalnie pogrubiona czcionka (jeśli czcionka to obsługuje).
Przykład użycia:
h1 {
font-weight: 900; /* Bardzo gruby tekst */
}
p {
font-weight: 300; /* Cienki tekst */
}
Co to jest znacznik strong — podsumowanie
Podsumowując, znacznik strong jest elementem języka HTML. Można go wykorzystać po to, aby wyróżnić poszczególne fragmenty i nadać im zarówno wizualnego efektu, jak i merytorycznego.
Nierzadko za pomocą <strong> wyróżniane są na przykład frazy kluczowe. Taka informacja zawsze jest kierowana do przeglądarki użytkownika oraz robotów Google.
Pogrubienie za pomocą znacznika <b> oznacza wyłącznie wyróżnienie wizualne. W tym drugim przypadku informacja o zastosowaniu znacznika na fragmencie tekstu nie jest przekazywana do algorytmów Google.
FAQ – znacznik <strong> w HTML
1. Czym różni się znacznik <strong> od <b>?
Znacznik <strong> nadaje znaczenie semantyczne, informując, że jest on istotny w kontekście treści. Natomiast <b> służy wyłącznie do wizualnego pogrubienia tekstu, bez dodatkowego znaczenia semantycznego.
2. Czy <strong> wpływa na SEO?
Tak, wyszukiwarki mogą przypisywać większą wagę tekstowi oznaczonemu <strong>, co może wpłynąć na optymalizację SEO, podkreślając kluczowe słowa w treści.
3. Czy <strong> zmienia wygląd tekstu?
Domyślnie przeglądarki wyświetlają tekst w <strong> jako pogrubiony, ale można to zmienić za pomocą CSS.
4. Czy można używać <strong> wielokrotnie w jednym dokumencie?
Tak, można wielokrotnie stosować znacznik <strong>, jednak należy używać go zgodnie z przeznaczeniem – tylko do podkreślenia istotnych fragmentów treści.
