16713
How-to Читать 6 минут

Как использовать HTML-теги STRONG, B, EM, I и чем они отличаются

Как и в каких случаях использовать HTML-теги STRONG, B, EM, I
ЧЕК-ЛИСТ: КОНТЕНТНАЯ ЧАСТЬ → ИСПРАВЛЕНИЕ
Теги <STRONG>, <B>, <EM>, <I> следует использовать для визуального форматирования текста на странице сайта. Они необходимы для расстановки смысловых и зрительных акцентов. Неправильное использование тегов часто вводит читателя или поисковую систему в заблуждение. Почему? Разберемся в этой статье.
HTML — это язык разметки гипертекста. С его помощью мы сообщаем браузеру, какие элементы веб-страницы ему предстоит отобразить. Если ранее он отображал только визуальные элементы и текст, то сегодня язык HTML способен передавать и смысловую нагрузку наполнения страницы. Для этого разработчики используют специальные элементы для форматирования текста.

Текст форматируется по трем причинам:
1
Чтобы акцентировать внимание читателя на определенном слове или фразе.
2
Чтобы акцентировать внимание поисковых роботов и помогать им понять смысл того, что размещено на странице.
3
Чтобы создавать семантически правильный код, согласно требованиям W3C (World Wide Web Consortium).

Значение и отличия тегов

До недавнего времени язык HTML предлагал использовать теги <B> и <I> для написания текста жирным или курсивом. С появлением новой версии языка разметки HTML5, появились дополнительные теги, которые образовали близкие по своему предназначению пары: <STRONG> и <B>, <EM> и <I>.

Их появление обусловлено развитием поисковых систем, которые сегодня стремятся понимать смысл того, что размещено на странице. Создатели предложили различать HTML-теги для текста, имеющие семантическое и визуальное форматирование. Теперь с помощью тегов визуального форматирования (<B>, <I>) мы выделяем часть текста визуально, а теги семантического форматирования (<STRONG>, <EM>) передают эмоции.

Визуально вы никогда не сможете различить, какой тег использован на странице. Жирный шрифт в HTML можно сделать и с помощью <STRONG>, и с помощью <B>, а курсив — и через <EM>, и через <I>. Тогда зачем же так усложнять?

Разгадка есть. Если включить голосовое озвучивание текста, то слова и фразы, выделенные тегами <STRONG> и <EM>, компьютер прочтет с особо эмоциональной интонацией и громкостью. Вся суть заключается в этом, так как семантическое форматирование помогает поисковым системам понять контекст написанного (смысл).

  • <STRONG> — тег семантического форматирования. Он передает высокую важность выделенного текста. Визуально выглядит жирнее, чем основной текст.

  • <B> — тег визуального форматирования. Просто выделяет текст жирным и не придает ему особой важности.

  • <EM> — тег семантического форматирования. Предназначен для передачи большей экспрессивности слова или фразы относительно остального текста. Визуально слово/фраза отображаются курсивом.

  • <I> — тег визуального форматирования. Используется для выделения курсивом, но не акцентирует внимание на слове или фразе.

В спецификации W3C все теги HTML размещены в двух разделах. <EM> и <STRONG> находятся в разделе «Структурированный текст». Это значит, что они определяют внешний вид, а также учитываются специальными программами, которые предназначены для изменения интонации и громкости.

Внешний вид необязательно будет жирным или курсивом. Он может регулироваться стилями CSS, но по-прежнему передавать браузеру значение большей важности выделенного тегами текста, относительно другого. <B> и <I> вынесены в раздел «Форматирование» и указывают браузеру, как отобразить фрагмент текста.

    Какой тег лучше использовать с точки зрения SEO?

    Со стороны поисковых систем нет существенных указаний, как использовать основные теги HTML для оптимизации страниц. Сотрудники Google отрицают какую-либо разницу и разрешают использовать любые из них. Тем не менее трансформация алгоритмов дает повод усомниться.

    Миссия поисковых систем — предоставить релевантный результат в ответ на запрос пользователя. Для этого они пытаются понять смысл того, что вы публикуете на своих страницах. Использование семантических тегов упрощает эту задачу. Они обращают внимание поисковых роботов на слова и фразы, которые помогают им определить, к какому запросу, вероятнее всего, принадлежит страница.

    Однако существуют рекомендации W3C:

    В HTML5 тег <STRONG> используйте для особо важных фрагментов. Это наиболее актуально:

    • в заголовке или в названии раздела;
    • в части текста, который имеет особое значение, относительно другого текста;
    • чтобы выделить важную информацию, уведомить читателя о чем-то;
    • чтобы обратить внимание читателя прежде, чем он прочтет остальную информацию на странице.

    Тег <B> используйте для выделения:

    • ключевых слов;
    • имен и названий;
    • призыва к действию.

    Используйте тег <EM>, когда вам надо обратить внимание на определенную часть текста. Особенно если это может указать на смысл. Продемонстрируем на простом примере:

    Задано предложение: «Кошки — милые животные». В зависимости от того, где поставлен тег <EM> изменится смысл.

    «<EM>Кошки</EM> — милые животные» — если кто-то утверждает, что милы другие животные.

    «Кошки — <EM>милые</EM> животные» — Если кто-то утверждает, что кошки — противные животные.

    «Кошки — милые <EM>животные</EM>» — Если кто-то утверждает, что кошки — милые овощи.

    Если делать смысловой акцент не надо, используйте тег <I>. Он уместен для выделения цитаты, фразы, обозначения и т. п.

    Заключение

    Если вы хотите выделить ключевые слова, несущие смысл — используйте тег <STRONG> или <EM>. Не используйте эти теги HTML для типовых фраз, например, «10% скидка», «распродажа складских остатков». Выделяйте их с помощью тегов <B> и <I>.

    Избегайте вложений одинаковых тегов: <em><i>фраза или слово</i></em>. Поисковые системы воспринимают такие конструкции как спам и переоптимизацию. Ориентируйтесь на официальные рекомендации W3С.

    Стоит ли менять старые теги на сайте, согласно новым рекомендациям? Скорее всего, нет. Это заберет у вас слишком много времени, и даст минимум результата в долгосрочной перспективе.
    Эта статья — часть модуля «Список задач» в Serpstat
    Модуль «Список задач» в Serpstat" title = "Как и в каких случаях использовать HTML-теги STRONG, B, EM, I 16261788165787" />
    «Список задач» — готовый to-do лист, который поможет вести учет
    о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
    Начать работу со «Списком задач»

    Сэкономьте время на изучении Serpstat

    Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

    Оставьте заявку и мы свяжемся с вами ;)

    Оцените статью по 5-бальной шкале

    4.58 из 5 на основе 11 оценок
    Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

    Поделитесь статьей с вашими друзьями

    Вы уверены?

    Знакомство с Serpstat

    Узнайте об основных возможностях сервиса удобным способом!

    Отправьте заявку и наш специалист предложит вам варианты обучения: персональную демонстрацию, пробный период или материалы для самостоятельного изучения и повышения экспертизы. Все для комфортного начала работы с Serpstat.

    Имя

    Email

    Телефон

    Будем рады вашему комментарию
    Я принимаю условия Политики конфиденциальности.

    Спасибо, мы сохранили ваши новые настройки рассылок.

    Сообщить об ошибке

    Отменить

    Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политика конфиденциальности

    Открыть чат технической поддержки
    mail pocket flipboard Messenger telegramm