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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
4623
How-to Читать 6 минут 12 сентября 2018

Как использовать 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
    «Список задач» — готовый to-do лист, который поможет вести учет
    о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
    Начать работу со «Списком задач»

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

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

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

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

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

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

    Войти Регистрация

    Вы исчерпали лимит запросов.

    Или email
    Забыли пароль?
    Или email
    Back To Login

    Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

    Вы уверены?

    Awesome!

    To complete your registration you need to enter your phone number

    Назад

    Мы отправили код подтверждения на ваш номер телефона

    Your phone Resend code Осталось запросов

    Что-то пошло не так.

    Свяжитесь с нашей службой поддержки
    Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
    Выберите один из проектов

    Знакомство с сервисом

    Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

    Имя

    Email

    Телефон

    Будем рады вашему комментарию
    Увеличить лимиты

    Улучшить тариф

    Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

    Зарегистрироваться

    Спасибо, мы с вами свяжемся в ближайшее время

    Пригласить
    Просмотр Редактирование

    E-mail
    Сообщение
    необязательно
    E-mail
    Сообщение
    необязательно

    У вас закончились лимиты

    Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

    Я хочу больше лимитов