Теги strong и b, важность и выделение
На этом возможности выделения слов и фраз в тексте не заканчиваются. Вы научились выделять фразы курсивом, а теперь давайте разберёмся с выделением текста жирным.
Теги и (сокращение от «bold») предназначены для выделения слова или фразы. Отображаются оба тега одинаково, они выделяют текст жирным.
Тег указывает на важность отмеченного текста. Он может использоваться для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального. При этом обозначение части текста тегом не должно изменять смысла предложения.
Внимание! Это место опасно. Вы можете упасть в пропасть, если подойдёте близко к краю.
Тег предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят. Типичный пример — выделение вводного предложения статьи.
Вы входите в небольшую комнату. Ваш меч загорается ярче. Крыса стремительно пробегает вдоль стены.
Лучше всего отличия этих тегов будут заметны людям, которые используют средства доступности, в частности, слепым и слабовидящим. Скринридер при чтении сайта будет выделять слова с тегом интонационно, в отличие от простого выделения с помощью .
То же самое касается тегов и . Тег «читалка» будет выделять интонацией.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Блог
День десятый. Подведение итогов
Прошла первая неделя, как я учусь вёрстке.
Кажется я понял, что в вёрстке на самом деле нет ничего сложного. Нужно только знать, для чего используется каждый тег и применять их по назначению.
Осталось всего лишь выучить CSS и всё, я буду крутым верстальщиком!
!DOCTYPE>
Тег strong
Тег strong задает важный текст, на котором хочет сделать акцент автор. По умолчанию текст, взятый в тег strong будет жирным, однако это поведение можно сменить с помощью CSS свойства font-weight .
Пример
Давайте сделаем жирный текст с помощью тега strong :
это жирный текст
Смотрите также
- тег b ,
который также создает жирный - тег em,
который также делает важный текст
Какой тег делает текст жирным в html
Теги , , , следует использовать для визуального форматирования текста на странице сайта. Они необходимы для расстановки смысловых и зрительных акцентов. Неправильное использование тегов часто вводит читателя или поисковую систему в заблуждение. Почему? Разберемся в этой статье.
HTML — это язык разметки гипертекста. С его помощью мы сообщаем браузеру, какие элементы веб-страницы ему предстоит отобразить. Если ранее он отображал только визуальные элементы и текст, то сегодня язык HTML способен передавать и смысловую нагрузку наполнения страницы. Для этого разработчики используют специальные элементы для форматирования текста.
Текст форматируется по трем причинам:
Чтобы акцентировать внимание читателя на определенном слове или фразе.
Чтобы акцентировать внимание поисковых роботов и помогать им понять смысл того, что размещено на странице.
Чтобы создавать семантически правильный код, согласно требованиям W3C (World Wide Web Consortium).
Значение и отличия тегов
До недавнего времени язык HTML предлагал использовать теги и для написания текста жирным или курсивом. С появлением новой версии языка разметки HTML5, появились дополнительные теги, которые образовали близкие по своему предназначению пары: и , и .
Их появление обусловлено развитием поисковых систем, которые сегодня стремятся понимать смысл того, что размещено на странице. Создатели предложили различать HTML-теги для текста, имеющие семантическое и визуальное форматирование. Теперь с помощью тегов визуального форматирования (, ) мы выделяем часть текста визуально, а теги семантического форматирования (, ) передают эмоции.
Визуально вы никогда не сможете различить, какой тег использован на странице. Жирный шрифт в HTML можно сделать и с помощью , и с помощью , а курсив — и через , и через . Тогда зачем же так усложнять?
Разгадка есть. Если включить голосовое озвучивание текста, то слова и фразы, выделенные тегами и , компьютер прочтет с особо эмоциональной интонацией и громкостью. Вся суть заключается в этом, так как семантическое форматирование помогает поисковым системам понять контекст написанного (смысл).
-
— тег семантического форматирования. Он передает высокую важность выделенного текста. Визуально выглядит жирнее, чем основной текст.
Внешний вид необязательно будет жирным или курсивом. Он может регулироваться стилями CSS, но по-прежнему передавать браузеру значение большей важности выделенного тегами текста, относительно другого. и вынесены в раздел «Форматирование» и указывают браузеру, как отобразить фрагмент текста.
Какой тег лучше использовать с точки зрения SEO?
Со стороны поисковых систем нет существенных указаний, как использовать основные теги HTML для оптимизации страниц. Сотрудники Google отрицают какую-либо разницу и разрешают использовать любые из них. Тем не менее трансформация алгоритмов дает повод усомниться.
Миссия поисковых систем — предоставить релевантный результат в ответ на запрос пользователя. Для этого они пытаются понять смысл того, что вы публикуете на своих страницах. Использование семантических тегов упрощает эту задачу. Они обращают внимание поисковых роботов на слова и фразы, которые помогают им определить, к какому запросу, вероятнее всего, принадлежит страница.
Однако существуют рекомендации W3C:
В HTML5 тег используйте для особо важных фрагментов. Это наиболее актуально:
- в заголовке или в названии раздела;
- в части текста, который имеет особое значение, относительно другого текста;
- чтобы выделить важную информацию, уведомить читателя о чем-то;
- чтобы обратить внимание читателя прежде, чем он прочтет остальную информацию на странице.
- ключевых слов;
- имен и названий;
- призыва к действию.
Задано предложение: «Кошки — милые животные». В зависимости от того, где поставлен тег изменится смысл.
«Кошки — милые животные» — если кто-то утверждает, что милы другие животные.
«Кошки — милые животные» — Если кто-то утверждает, что кошки — противные животные.
«Кошки — милые животные» — Если кто-то утверждает, что кошки — милые овощи.
Если делать смысловой акцент не надо, используйте тег . Он уместен для выделения цитаты, фразы, обозначения и т. п.
HTML тег
Тег используется для того, чтобы выделить жирным шрифтом фрагмент текста, который мы хотим сделать более заметным для пользователя. Тег только выделяет фрагмент текста, он не имеет смысловой нагрузки (в том числе для поисковых систем). Для того, чтобы отметить важность текста используется тег ․
В HTML5 тег рекомендуется использовать только в крайнем случае, когда нет возможности использовать другие теги.
Синтакис
Для выделения отрезка текста жирным шрифтом, необходимо поместить его между открывающим и закрывающим тегом .
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>b>Этот отрезок текста b> мы выделили жирным шрифтом. p> body> html>
Результат

Внешний вид содержимого контейнера задается по умолчанию, но жирное начертание текста можно изменить при помощи CSS.
Вы также можете использовать свойство CSS font-weight для выделения текста жирным шрифтом.
Пример
html> html> head> title>Заголовок окна веб-страницы title> style> .bold-text < font-weight: 700; > style> head> body> p>span class="bold-text">Этот отрезок текста span> мы выделили жирным шрифтом. p> body> html>
Результат

Атрибуты
Как добавить стиль к тегу ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега :
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега :
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега :
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.