Kurs HTML

Pogrubianie tekstu w HTML

W HTML istnieją dwa główne znaczniki służące do pogrubiania tekstu: <b> i <strong>. Chociaż wizualnie dają podobny efekt (tekst pogrubiony), mają różne znaczenie semantyczne i zastosowanie.

Znacznik <b>

Znacznik <b> (od angielskiego "bold") służy do wizualnego pogrubienia tekstu bez nadawania mu dodatkowego znaczenia semantycznego. Innymi słowy, używamy go, gdy chcemy, aby tekst był pogrubiony, ale nie ma to szczególnego znaczenia dla zrozumienia treści.

<p>To jest normalny tekst, a <b>to jest tekst pogrubiony</b> za pomocą znacznika b.</p>Kopiuj

Zgodnie ze specyfikacją HTML5, znacznik <b> powinien być używany do wyróżniania fragmentów tekstu, które chcemy wizualnie odróżnić, ale które nie mają zwiększonego znaczenia. Przykłady zastosowań:

• Słowa kluczowe w tekście
• Nazwy produktów w recenzjach
• Pierwsze zdanie w akapicie (jeśli taki jest styl dokumentu)
• Inne przypadki, gdy tekst powinien być pogrubiony, ale nie ma szczególnego znaczenia

Znacznik <strong>

Znacznik <strong> służy do oznaczania tekstu, który ma zwiększone znaczenie lub wagę w kontekście dokumentu. Przeglądarki domyślnie renderują zawartość <strong> jako pogrubioną, ale jego głównym celem jest podkreślenie ważności tekstu, a nie tylko zmiana jego wyglądu.

<p>Instrukcja: Przed użyciem urządzenia <strong>przeczytaj uważnie wszystkie ostrzeżenia</strong>.</p>Kopiuj

Znacznik <strong> jest używany, gdy chcemy podkreślić, że dany fragment tekstu jest ważniejszy niż otaczająca go treść. Przykłady zastosowań:

• Ostrzeżenia i ważne informacje
• Kluczowe punkty w argumentacji
• Słowa, które chcemy szczególnie podkreślić dla zrozumienia treści
• Nagłówki sekcji (choć lepiej używać do tego <h1>-<h6>)

Różnice między <b> a <strong>

Główna różnica między tymi znacznikami leży w ich znaczeniu semantycznym:

Znacznik <b>	Znacznik <strong>
Służy do wizualnego wyróżnienia tekstu	Służy do podkreślenia ważności tekstu
Nie ma szczególnego znaczenia semantycznego	Ma znaczenie semantyczne - wskazuje na większą wagę tekstu
Czytniki ekranu zazwyczaj nie wyróżniają tego tekstu	Czytniki ekranu mogą zmienić ton lub nacisk przy czytaniu tego tekstu
Używany głównie ze względów stylistycznych	Używany, gdy treść ma zwiększone znaczenie

Kiedy używać <b>, a kiedy <strong>?

Wybór między <b> a <strong> zależy od kontekstu i celu formatowania:

• Użyj <strong>, gdy tekst ma zwiększone znaczenie i chcesz podkreślić jego ważność.
• Użyj <b>, gdy chcesz wizualnie wyróżnić tekst, ale nie ma on szczególnego znaczenia semantycznego.

W praktyce, jeśli masz wątpliwości, lepiej użyć <strong>, ponieważ ma on bardziej uniwersalne zastosowanie i jest lepiej obsługiwany przez technologie wspomagające.

Zagnieżdżanie znaczników

Znaczniki <b> i <strong> można zagnieżdżać w innych elementach, takich jak paragrafy, nagłówki, listy itp. Można je również łączyć z innymi znacznikami formatującymi.

<p>To jest <strong>bardzo ważny <b>termin</b> do zapamiętania</strong>.</p>Kopiuj

Alternatywy dla pogrubiania tekstu

Chociaż <b> i <strong> są standardowymi sposobami pogrubiania tekstu w HTML, istnieją również inne metody:

CSS

Można użyć CSS do pogrubienia tekstu za pomocą właściwości font-weight:

<p style="font-weight: bold;">Ten tekst jest pogrubiony za pomocą CSS.</p>
<p style="font-weight: 700;">Ten tekst również jest pogrubiony (wartość 700 odpowiada bold).</p>Kopiuj

CSS oferuje większą kontrolę nad stopniem pogrubienia tekstu, pozwalając na użycie wartości od 100 (najcieńszy) do 900 (najgrubszy), gdzie 400 to normalny tekst, a 700 to pogrubiony.

Inne znaczniki semantyczne

W zależności od kontekstu, zamiast <b> lub <strong> można użyć innych znaczników semantycznych, które również mogą być renderowane jako pogrubione (choć zależy to od przeglądarki i stylów CSS):

• <h1>-<h6> - dla nagłówków
• <mark> - dla zaznaczenia tekstu (zwykle wyświetlany z żółtym tłem)
• <em> - dla emfazy (zwykle wyświetlany kursywą)
• <dfn> - dla definicji terminu

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz krótki artykuł o bezpieczeństwie w internecie, używając znaczników <b> i <strong> w odpowiednich kontekstach.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Bezpieczeństwo w Internecie</title>
</head>
<body>
    <h1>Bezpieczeństwo w Internecie</h1>
    
    <p>W dzisiejszych czasach korzystanie z <b>Internetu</b> stało się nieodłączną częścią naszego życia. Jednak wraz z korzyściami, jakie oferuje sieć, pojawiają się również zagrożenia.</p>
    
    <h2>Podstawowe zasady bezpieczeństwa</h2>
    
    <p><strong>Nigdy nie udostępniaj swoich haseł innym osobom!</strong> Jest to jedna z najważniejszych zasad bezpieczeństwa w sieci.</p>
    
    <p>Podczas korzystania z <b>publicznych sieci Wi-Fi</b>, <strong>unikaj logowania się do bankowości elektronicznej lub dokonywania płatności online</strong>. Takie sieci często nie są zabezpieczone i narażają Cię na ataki hakerskie.</p>
    
    <p>Regularnie aktualizuj swoje <b>systemy operacyjne</b> i <b>programy antywirusowe</b>. <strong>Aktualizacje często zawierają poprawki zabezpieczeń, które chronią przed najnowszymi zagrożeniami.</strong></p>
    
    <h2>Bezpieczne hasła</h2>
    
    <p>Twoje hasło powinno być:</p>
    <ul>
        <li><strong>Unikalne</strong> - nie używaj tego samego hasła na różnych stronach</li>
        <li><b>Długie</b> - minimum 12 znaków</li>
        <li><b>Złożone</b> - zawierające małe i wielkie litery, cyfry oraz znaki specjalne</li>
    </ul>
</body>
</html>Kopiuj