otlichiya-b-ot-strong
Веб-дизайн

Какие HTML теги правильные? Отличия b от strong.

Какие теги использовать?

Как правильно — <b> или <strong>, <i> или <em>? Если говорить кратко —  с точки зрения визуального отображения тегов в браузере, корректными будут оба варианта. Однако с точки зрения около-браузерной софистики — различий между тегами просто масса.

W3C, семантика, и благие цели

Сэр Тим Бернерс-Ли. Именно этому человеку мы обязаны в части облика Всемирной Паутины, интернета, таким, каким мы его знаем. Кстати, к названию WWW (WorldWideWeb — Всемирная Паутина) он тоже причастен.

Сэр Бернерс-Ли и первый в мире сайт

Сэр Бернерс-Ли и самый первый в мире сайт. Wikipedia.

В 1994 году им была основана W3C — консорциум, по сей день являющийся главным и единственным институтом стандартизации представления данных в сети Интернет. В мире онлайна принято считаться с мнением W3C и все популярные браузеры сотрудничают с организацией, и следуют ее рекомендациям.

Теги: физические и семантические

Согласно предписаниям W3C, теги принято делить на теги физического и логического (семантического) уровня форматирования.

Теги физического форматирования были придуманы Бернерсом-Ли еще в далёком 1991 году.
Теги логического форматирования появились в середине 90-х, уже под эгидой Консорциума Всемирной Паутины (W3C) в спецификации HTML 2.0.
Физические призваны просто отображать форматирование текста так как было задумано автором. Логические же, как и следует из названия, обеспечивают и определенную логику обработки контента заключенного в них.

Зачем нужны логические теги?

Сама идея использования тегов, которые будут «обдуманно» применяться к различному контенту уже несет в себе немалые возможности.
Например, обозначьте тег <CODE>, и браузер, и яндекс поймут, что тут идет пример кода, а <ABBR> будет означать, что используется аббревиатура.
Теги логического форматирования содержат в себе меньший объем текста и используются избирательно для единичных слов или фразы.

code-and-abbr

Отличия b от strong

При применении обоих тегов, мы будем наблюдать в браузере один и тот же эффект, так в чем же разница?
Разница в том что тег <strong> является тегом логической разметки, а <b> просто делает текст жирным, не прибавляя к этому никакой смысловой нагрузки.

Зачем? В идеале W3C хотели чтобы браузеры отображали важный участок текста иначе. На деле же оказалось, что эффект можно наблюдать только в речевых браузерах для слабовидящих, где слова выделенные strong-ом, действительно подчеркиваются интонацией.

Тег стронг против тега б

Отличия i от em

С тегами для придания шрифту начертания курсивом, ситуация весьма схожая. Использование тега <i>, также как и использование тега <em> дадут одинаковый эффект.

Комментарии W3C советуют использовать тег <i> для выделения курсивом. Ни о чем конкретном при этом не говорится, мы вольны выделять хоть имя автора, указанное в тексте, хоть просто важное по смыслу понятие или даже целое предложение. В общем, всё как в печатной литературе.

С тегом <em> всё как и со строногом — он логический. Лично меня очень забавляет официальное описание тега на сайте W3C.
Офсайт консорциума пишет что тег <em> предназначен для выделения «emphatic stress» текста.
Эмпатический, мать его, стресс. Ну я согласен, что на русский это можно перевести не так грубо, но яснее ситуация не становится. Есть ощущение, что консорциум и сам не знает, для чего добавил элемент.
На сегодняшний день W3C советует использовать CSS вместо <i>, а <em> как тег выделения курсивом.

Влияние strong и b на оптимизацию

Есть пара мифов о том, как использование тегов логической разметки <strong> и <em> влияет на позиции.

Первый убеждает нас в том, что использование логических тегов вместо привычных <b> и <i> позволит сайту подняться в выдаче.
Второй говорит о том, что теги выделения нельзя использовать в текста больше определенного количества раз.

По факту помнится, кто то даже проводил эксперимент, который конечно так и не дал ответ на вопрос на 100%.
На позицию сайта в поисковой системе влияет множество нюансов, ничего нельзя сказать однозначно.

Кроме того, есть случаи, когда использование верстки именно физическими тегами необходимо.
Я часто использую физическую разметку в верстке шаблонов писем. Субъективно могу сказать что такие теги вызывают меньше ошибок в онлайн версиях почтовиков.

Мнение Google и Яндекс

Несколько лет назад, в ходе трансляции на Youtube, Google, в лице своего представителя (Matt Cutts), ясно дали ответ на этот вопрос. Ответ: нам без разницы какие теги вы используете (b/i или strong/em). Делайте хорошие сайты для людей, а потом уже думайте об таких мелочах.

Matt Cutts объясняет что к чему. Youtube

Matt Cutts объясняет что к чему. Youtube

Яндекс же не дает никаких комментариев, но везде советует использовать семантические теги по максимуму.
Так или иначе, Яндекс всегда «притормаживает» с копированием стандартов у гугл и/или их переработкой, так что в этой части можно и ограничится мнением американского собрата.

Выводы

В интернете полно советчиков, и еще больше людей, считающих, что их мнение единственно правильное.
Я не буду придерживаться какой то конкретной версии, я лишь скажу очевидное — тег <b>  короче тега <strong> .
Если вы пишете код вручную, если вы вносите быстрые правки прямо через панель CMS, гораздо удобнее 5 раз прописать именно тег <b>.
Какая разница в конечном итоге, ведь отображение то одинаковое.

Да, и, пожалуй, я испытываю определенную ностальгическую привязанность к старым (но отлично работающим) тегам HTML, но это уже отношения к теме не имеет.:-)