В HTML жирный текст можно сделать несколькими способами. К ним относятся:
- Тег <b>;
- Тег <strong>;
- CSS-свойство font-weight.
Поговорим о каждом из вариантов выделения текста по порядку.
Жирный текст: тег <b>
Тег b HTML применяется следующим образом:
<b>Конструктор сайтов "Нубекс"</b>Для тега <b> обязательно наличие закрывающего </b>, и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)
Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.
Жирный текст: тег <strong>
Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фраз, слов, которые являются ключевыми для данной страницы.
Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги <strong></strong>, и помечают его именно как важный.
Используется тег strong аналогичным образом:
<strong>Конструктор сайтов "Нубекс"</strong>Вы можете заметить, что внешне применение тегов <b> и <strong> совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.
Жирный текст при помощи CSS
Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью "жирности" шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Жирный текст с помощью CSS - "Нубекс"</title>
<style>
.nubex1 {
font-weight: bold;
}
.nubex2 {
font-weight: bolder;
}
.nubex3 {
font-weight: 600;
}
</style>
</head>
<body>
<center>
<p>Наши сайты - это, действительно, <span class="nubex1">огромный шаг</span> в веб-разработке.</p>
<p>Мы делаем по-настоящему <span class="nubex2">качественные</span> сайты.</p>
<p>Доверьтесь нам, и мы вас <span class="nubex3">не подведем</span>.</p>
</center>
</body>
</html>Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.