Мастерство в использовании жирного текста в HTML

Введение

В этом практическом занятии вы научитесь использовать HTML-тег <b> для создания полужирного текста на веб-странице. Также рассмотрим наилучшие практики при использовании этого тега и рекомендуемые альтернативы при необходимости.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70706{{"Жирный текст в HTML"}} html/text_head -.-> lab-70706{{"Жирный текст в HTML"}} html/para_br -.-> lab-70706{{"Жирный текст в HTML"}} html/doc_flow -.-> lab-70706{{"Жирный текст в HTML"}} html/inter_elems -.-> lab-70706{{"Жирный текст в HTML"}} end

Настройка HTML-файла

Создайте новый файл под названием index.html в вашем редакторе кода. В теле документа добавьте абзац с некоторым текстом, который вы хотите сделать полужирным.

<body>
  <p>Here is some text that needs to be bold.</p>
</body>

Добавьте тег

Чтобы сделать текст полужирным, оберните его в теги <b> так:

<body> <p>Here is some <b>bold</b> text.</p> </body>

Стандартный стиль CSS

Стандартный стиль CSS для тега <b> выглядит так:

<style> b { font-weight: bold; } </style>

Лучшие практики

Избегайте чрезмерного использования тега <b>. Используйте его только для важного текста, требующего акцента.

Для заголовков используйте теги <h1> по <h6> вместо тега <b>.

Для акцентирования текста используйте вместо этого тег <em>. Этот тег также делает текст курсивом, а не полужирным.

Для важного текста используйте тег <strong>. Этот тег сделает текст полужирным и покажет его важность для поисковых систем.

Резюме

Вот и все! Теперь вы знаете, как использовать HTML-тег <b> для создания полужирного текста на вашей веб-странице. Не забудьте использовать этот тег правильно и следовать лучшим практикам для получения оптимальной разметки.