Pogrubienie HTML

Tekst na stronie internetowej w HTML można pogrubić na kilka różnych sposobów, ale nie każdy z nich jest odpowiedni dla każdego zastosowania. W tym artykule wyjaśniam, który sposób wybrać w zależności od kontekstu oraz jak najlepiej wykorzystać dostępne metody, aby osiągnąć pożądany efekt na swojej stronie i nie popsuć SEO. 

Znacznik HTML <strong> 

Znacznik strong jest to obecnie podstawowy tag HTML do pogrubiania treści.

Należy tylko pamiętać, że strong nadaje silne znaczenia dla wyszukiwarek i każe im zwrócić uwagę na wyróżniony tekst. <strong> jest znacznikiem, który niesie za sobą znaczenie semantyczne.  W większości przypadków lepiej nie używać go, jeśli celem jest tylko wizualne pogrubienie elementu, a nie pozycjonowanie pogrubionego słowa kluczowego. 

Przykładowy kod:

<p>Lorem ipsum dolor sit amet, <strong>pogrubiony element</strong> consectetur.</p>

Lorem ipsum dolor sit amet pogrubiony element consectetur.

Pogrubienie bez semantycznego znaczenia

Istnieją znaczniki <b> oraz możliwość pogrubienia tekstu za pomocą CSS. Te metody nie niosą jednak ze sobą żadnego znaczenia semantycznego.

Zanim zdecydujesz się na którąś z metod, przeczytaj wyjaśnienie dotyczące „znaczenia semantycznego” tagów HTML, aby zrozumieć, co się za tym kryje.

Kiedy mówimy, że znacznik HTML ma "znaczenie semantyczne", oznacza to, że znacznik ten nie tylko formatuje tekst wizualnie, ale również przekazuje przeglądarkom, wyszukiwarkom oraz innym technologiom informację o tym, jaka jest rola lub cel danego fragmentu treści na stronie.

Na przykład, omawiany znacznik <strong> semantycznie oznacza, że tekst w nim zawarty jest ważny lub podkreślony w kontekście treści, a znacznik <em> oznacza, że tekst jest podkreślony lub zaakcentowany. Oprócz wizualnego efektu (jak pogrubienie lub kursywa), te znaczniki dają wyszukiwarkom i innym narzędziom informację, jaką wagę przypisać danym słowom czy zdaniom.

Znaczenie semantyczne wpływa na SEO (Search Engine Optimization, czyli optymalizację pod kątem wyszukiwarek), ponieważ wyszukiwarki, takie jak Google, oceniają zawartość strony na podstawie tego, jak semantyczne znaczniki są używane. Strony, które używają znaczników zgodnie z ich przeznaczeniem, są lepiej oceniane, ponieważ wyszukiwarki "rozumieją" treść i strukturę strony, co może prowadzić do wyższej pozycji w wynikach wyszukiwania. Na przykład, użycie znaczników nagłówków <h1>, <h2>, itd., pozwala wyszukiwarkom lepiej zrozumieć hierarchię informacji na stronie.

Kiedy w takim razie używać <strong>, a kiedy innych metod?

Wybór między znacznikiem <strong>, a innymi metodami zależy od kontekstu i celu, jaki chcesz osiągnąć. Jeśli chcesz zaznaczyć ważność tekstu z semantycznego punktu widzenia - najczęsciej w celu podbicia pozycjonowania tego słowa -  zawsze używaj znacznika <strong>. Dzięki temu nie tylko wizualnie wyróżnisz tekst, ale również pomożesz wyszukiwarkom i narzędziom do czytania ekranowego zrozumieć, że ten fragment tekstu ma szczególne znaczenie.

Jeśli zależy Ci wyłącznie na zmianie wyglądu elementu na stronie, raczej użyj znacznika <b> lub CSS. Używanie CSS jest zazwyczaj bardziej zalecane, poza główną treścią strony,  ponieważ oddziela warstwę prezentacji od struktury HTML, co ułatwia zarządzanie kodem, jego optymalizację i łatwą zmianę wyglądu szablonu. 

SEO a pogrubanie tekstu

Prawidłowe użycie znaczników HTML i stylów ma istotne znaczenie dla optymalizacji pod kątem wyszukiwarek (SEO) oraz dostępności stron internetowych (WCAG). Poniżej kilka wskazówek:

• Używaj znacznika do oznaczania ważnych treści, które powinny być zrozumiane jako istotne nie tylko dla użytkownika, ale i dla wyszukiwarek.
• CSS raczej stosuj w szablonie strony, aby kontrolować wygląd tekstu w sposób elastyczny i łatwo zarządzany.
• Unikaj nadużywania pogrubionego tekstu, aby nie obniżać jego efektywności i czytelności strony.
• Pamiętaj o dostępności – narzędzia do czytania ekranowego mogą odczytywać tekst oznaczony jako w specjalny sposób, co pomoże użytkownikom z niepełnosprawnościami lepiej zrozumieć zawartość strony.
• Nagłówki nie pogrubiaj, do nagłówków mamy tagi nagłówków od h1 do h6.

Nie chcesz semantycznego znacznika pogrubienia? Zainteresuj się wspomnianymi powyżej <b> i odpowiednim stylowaniem CSS. Oba sposobu pokazuję poniżej.  

Jak użyć znacznika <b>

<b> (bold) to jeden z prostszych sposobów na pogrubienie tekstu w kodzie HTML. Jego użycie nie niesie za sobą znaczenia semanycznego (dawniej było inaczej).

Przykładowy kod:

<p>Lorem ipsum dolor sit amet, <b>pogrubiony element</b> consectetur.</p>

Lorem ipsum dolor sit amet, pogrubiony element consectetur.

Znacznik <b> robi wyróżnienie graficzne, ale nie nadaje semantycznego znaczenia dla wyszukiwarek. Jeżeli potrzebujesz nadać wyróżnienie graficznie, ale robotom wyszukiwarek nie chcesz wskazywać, że dane słowo jest ważne,to użyj tego znacznika HTML.

Pogrubienie  czcionki w CSS

Każdemu elementowi w HTML (tekstowemu) możemy nadać grubość czcionki za pomocą właściwości CSS font-weight. 

 

font-weight: normal; (wartość domyślna)
font-weight: bold;
font-weight: 100|200|300|400|500|600|700|800|900; (wartość liczbowa od 100 do 900, co 100)

Przy wartościach liczbowych musisz upewnić się, czy czcionka obsługuje wszystkie wartości. Waga 400 i 700 powinna być zawsze, bo waga 400 to normal, a 700 to bold. 

font-weight przyjmuje także - czasami potrzebne - wartości względne do normal i bold jakimi są:

• lighter - czcionka mniej wytłuszczona od bazowej (odziedziczonej),
• bolder - czcionka bardziej wytłuszczona niż bold. 

Jeśli masz wątpliwości jak pogrubiać treść, lub jakie znaczniki zastosować w szablonie swojej strony, żeby było zgodne z SEO, a przede wszystkim, żeby umożliwiały skuteczne pozycjonowanie Twojej strony, odezwij się do nas. 

---

---