Чтобы выделить отдельные слова в предложении жирным начертанием в HTML применяется два элемента:
Обратите внимание, что в первую очередь сообщает о важности выделенного текста и по совместительству делает текст жирным. Поэтому для обычного по важности, но жирного по виду текста, следует использовать (пример 1).
Пример 1. Использование
Чтобы придать жирное начертание длинному тексту, вроде заголовков, удобнее использовать стили, в частности, свойство font-weight. В качестве значения достаточно указать bold (пример 2).
Пример 2. Использование font-weight
См. также
font-weight
Знакомство с HTML
Насыщенность
Продвинутая семантика и доступность
Свойства шрифта в CSS
Семантика строчных элементов
Жирный текст CSS
В HTML жирный текст можно сделать несколькими способами. К ним относятся:
Поговорим о каждом из вариантов выделения текста по порядку.
Жирный текст: тег
Тег b HTML применяется следующим образом:
Конструктор сайтов "Нубекс"
Для тега обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)
Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.
Жирный текст: тег
Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фраз, слов, которые являются ключевыми для данной страницы.
Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный.
Используется тег strong аналогичным образом:
Конструктор сайтов "Нубекс"
Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.
Жирный текст при помощи CSS
Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:
Жирный текст с помощью CSS - "Нубекс" .nubex1 < font-weight: bold; >.nubex2 < font-weight: bolder; >.nubex3
Наши сайты - это, действительно, огромный шаг в веб-разработке.
Мы делаем по-настоящему качественные сайты.
Доверьтесь нам, и мы вас не подведем.
Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.
Как сделать жирный шрифт в HTML
Существует три способа выделить текст жирным шрифтом на HTML странице, но не спешите сразу использовать любой понравившийся, так как такое выделение может иметь разный смысл и влиять на оптимизацию сайта для поисковой системы.
Жирный шрифт тегом strong
Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег является тегом логического форматирования и его суть: «подчеркнуть» важность выделенного фрагмента.
Другие виды выделения текста описаны в статье: Теги форматирование текста в HTML.
Пример как сделать жирный шрифт HTML тегом :
Обычный текст выделенный важный фрагмент текста. Обычный текст.
Жирный текст с помощью тега b
То есть, если по каким-то причинам вы считаете, что фрагмент будет лучше смотреться, написанный жирным шрифтом, но сам по себе выделенный участок не является более важным, чем текст вокруг — используйте тег .
Обычный текст текст жирным шрифтом. Обычный текст.
Выделение жирным стилями CSS
Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).
Такое выделение будет нести стилистический характер, не добавляя выделенному тексту логического веса.
К тому же, можно выделять как конкретный тег, так и сразу группу элементов, задав стили через CSS класс.
Свойство CSS внутри атрибута style:
Текст жирным шрифтом.
.bold_text
Текст жирным шрифтом.
Текст обычным шрифтом.
Текст жирным шрифтом.
Что делать, если выделить текст жирным не получается
Если выделить текст жирным не получается, скорее всего на вашем сайте переопределены CSS стили элементов. В таком случае, вам придется откорректировать эти стили. В большинстве случаев это можно будет сделать через основной файл таблиц стилей CSS. Если вы в этом не разбираетесь, обратиться к веб-мастеру. С большой долей вероятности на решение этой проблемы потребуется не более 5-ти минут работы (хотя, конечно же, могут быть исключения).
Жирный и полужирный текст в HTML. Тег
Тег используется для выделения текста без дополнительного акцента или значимости. В результате содержимое этого тега обычно отображается жирным шрифтом. Несмотря на это, этот тег не должен использоваться для стилизации; для таких задач лучше использовать CSSю
Семантическое значение
В отличие от тегов, таких как , который указывает на важность текста, тег не имеет семантической значимости. Это просто стилистическое выделение.
Вместо использования тега для стилизации текста рекомендуется использовать CSS (например, font-weight: bold; ).
Если вам нужно указать на важность текста, используйте тег .
Если вы хотите изменить стиль текста из-за изменения контекста, используйте тег с соответствующим классом и стилизуйте его с помощью CSS.
Связанные теги
Полезные ссылки
HTML Living Standard — Тег
MDN Web Docs — Тег
�� Спецификация
⚠️ Тег не подходит для использования в качестве замены семантическим тегам , и .
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Контейнер для чего угодно. Тег
Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
6 октября 2023
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
3 октября 2023
Выпадающий список. Тег
Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
1 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
