В чем разница между ‹b› и ‹strong›, ‹i› и ‹em›?

Я собираюсь рискнуть сделать здесь исторический и практический хитрый подход:

Да, согласно спецификациям, <strong> имел семантическое значение в HTML4, а <b> имел строго презентационное значение.

Да, когда появился HTML5, для b и i было введено новое семантическое значение, которое немного отличалось.

Да, W3C рекомендует - в основном - TL, DR; не используйте b и i.

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

НО:

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

Так что, если вы пишете HTML или создаете систему, которая пишет HTML для других людей - конечно - определенно используйте <strong> вместо <b>, чтобы обозначить сильно подчеркнутый, потому что это более семантически корректно.

Но на самом деле реальная реальность такова, что семантическое и стилистическое значение <strong> и <b> со временем слились по необходимости.

Если я создаю CMS, которая позволяет вставлять стилизованный текст, мне нужно спланировать как для людей, которые вставляют <b> и имеют в виду сильно подчеркнутый, так и для людей, которые вставляют <strong> и имеют в виду сделать этот текст жирным. Возможно, это и не так, но именно так устроен реальный мир в настоящий момент.

Итак, если я пишу таблицу стилей для этого сайта, я, вероятно, собираюсь написать несколько стилей, которые выглядят так:

b,
strong {
  font-weight: 700;
  /* ... more styles here */
}

i,
em {
  font-style: italic;
  /* ... more styles here */
}

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

Или я могу быть одним из миллионов сайтов, которые используют normalize .css, который гарантирует, что b и strong обрабатываются одинаково.

В мире уже существует такой огромный океан HTML, который оправдывает это ожидание, я просто не могу представить, что b КОГДА-ЛИБО будет обесцениваться в пользу strong или что браузеры когда-либо начнут отображать их по-другому по умолчанию.

Итак, это все. Это мой горячий взгляд на семантику, историю и реальный мир. Одинаковы ли b / i и strong / em? Нет. Вероятно, они оба будут существовать и будут ли к ним относиться как к идентичным почти в любой ситуации до краха современной цивилизации? Я думаю да.

b или i означает, что вы хотите, чтобы текст был выделен полужирным шрифтом или курсивом. strong или em означает, что вы хотите, чтобы текст отображался таким образом, чтобы пользователь понимал его как «важный». По умолчанию используется жирный шрифт, а жирный - курсив, но в некоторых других культурах может использоваться другое сопоставление.

Как и строки в программе, b и i будут "жестко закодированы", а strong и em - " локализованный ".

Как говорили другие, ‹b› и ‹i› являются явными (т. Е. «Сделайте этот текст жирным»), тогда как ‹strong› и ‹em› являются семантическими (т. Е. «Этот текст следует выделить»).

В контексте современного веб-браузера трудно увидеть разницу (кажется, что оба они дают одинаковый результат, не так ли?), Но подумайте о программах чтения с экрана для слабовидящих. Если программа чтения с экрана наткнется на тег ‹i›, она не будет знать, что делать. Но если он встречает тег ‹em›, он знает, что слушателю следует выделить все, что находится внутри. И в этом вы получаете практическую разницу.

Теги <i>, <b>, <em> и <strong> традиционно являются репрезентативными. Но в HTML5 им было придано новое семантическое значение.

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

Примеры использования тега <i>: таксономическое обозначение, технический термин, идиоматическая фраза из другого языка, транслитерация, мысль, названия кораблей в западных текстах. Такие как -

<p><i>I hope this works</i>, he thought.</p>

Примеры использования тега <b>: ключевые слова в отрывке из документа, названия продуктов в обзоре, ключевые слова в интерактивном текстовом программном обеспечении, руководство к статье.

Следующий примерный абзац стилистически смещен от абзацев, следующих за ним.

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em> и <strong> имели значение акцента и сильного акцента в HTML4. Но в HTML5 <em> означает подчеркнутый акцент, а <strong> означает большое значение.

В следующем примере при чтении слова до ... должно произойти языковое изменение.

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

В том же примере мы можем использовать тег <strong> следующим образом:

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

чтобы придать важность дате мероприятия.

Ссылка MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Для текста, выделенного жирным шрифтом, с использованием тега <b>

Для текста важно использовать тег <strong>

Для текста курсивом используется тег <i>

Для выделенного текста с использованием тега <em>

Как утверждали другие, разница в том, что стили шрифтов <b> и <i> жестко запрограммированы, тогда как <strong> и <em> диктуют семантическое значение, причем стиль шрифта (или говорящая интонация браузера, или что-то еще) должен определяться в то время, когда текст отображается (или произносится).

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

Довольно ловко, да?

Это также является причиной определения подстилей (на которые ссылается свойство style= в текстовых тегах) для абзацев, ячеек таблицы, текста заголовков, заголовков и т. Д. И использования тегов <div>. Вы можете определить физическое представление своих логических стилей в таблице стилей, и изменения автоматически отражаются на веб-страницах, которые ссылаются на эту таблицу стилей. Хотите другое представление исходного кода? Измените шрифт, размер, вес, интервал и т. Д. Для своего «кодового» стиля.

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

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

«Получает ‹strong› все ‹/strong› книги о ‹b› лакроссе ‹/b›».

В этом предложении слово «все» очень важно, а «лакросс» - в меньшей степени - я просто хотел, чтобы оно было выделено жирным шрифтом, потому что оно представляет собой поисковый запрос, поэтому я хотел визуального разделения. Если вы просматриваете страницу с помощью программы чтения с экрана, я действительно не думаю, что нужно изо всех сил выделять слово «лакросс».

Я бы подумал, что большинство веб-разработчиков используют один из другого, но оба хороши - ‹b› определенно не является устаревшим, как утверждают некоторые люди. Для меня это просто тонкая грань между визуальной привлекательностью и смыслом.

Используйте их только в том случае, если использование классов стилей CSS по какой-либо причине неуместно или невозможно (например, системы блогов, разрешают использование только некоторых тегов в сообщениях и, в конечном итоге, встроенных стилей). Другая причина - поддержка очень старых браузеров (некоторые мобильные устройства?) Или примитивных поисковых систем (которые дают баллы за теги <b> или <strong> вместо анализа стилей CSS).

Если вы можете определять стили CSS, используйте их.

Обычно вам следует избегать <b> и <i>. Они были введены для компоновки страницы (изменения ее внешнего вида) в ранних версиях HMTL до создания CSS, как, например, удаленный тег font, и в основном сохранялись для обратной совместимости, а также потому, что некоторые форумы допускают встроенный HTML, а это простой способ изменить внешний вид текста (например, BBCode с использованием [i], вы можете использовать <i> и так далее).

С момента создания CSS, макетирование больше не нужно делать в HTML, поэтому CSS был создан в первую очередь (HTML == Структура, CSS == Макет). Эти теги также могут исчезнуть в будущем, в конце концов, вы можете просто использовать теги CSS и span, чтобы сделать текст полужирным / курсивом, если вам нужен «бессмысленный» вариант шрифта. HTML 5 по-прежнему разрешает их, но заявляет, что такая маркировка текста не имеет смысла.

<em> и <strong>, с другой стороны, только говорят, что что-то «подчеркнуто» или «сильно подчеркнуто», оставляя это полностью открытым для браузера, как это обработать. Большинство браузеров будут отображать em курсивом и strong полужирным шрифтом, как предлагает стандарт по умолчанию, но они не обязаны это делать (они могут использовать разные цвета, размеры шрифта, шрифты и т. Д.). Вы можете использовать CSS, чтобы изменить поведение по своему желанию. Вы можете сделать em жирным, если хотите, и strong жирным и красным, например.

<b> и <i> следует избегать, потому что они описывают стиль текста. Вместо этого используйте <strong> и <em>, потому что это описывает семантику (значение) текста.

Как и все в HTML, вы должны думать не о том, как вы хотите, чтобы он выглядел, а о том, что вы на самом деле имеете в виду. Конечно, он может быть выделен жирным шрифтом и курсивом для вас, но не для программы чтения с экрана.

"Они имеют тот же эффект. Однако XHTML, более чистая и новая версия HTML, рекомендует использовать тег <strong>. Сильный - лучше, потому что его легче читать - его значение яснее. Кроме того, <strong> передает смысл, показывая текст строго - в то время как <b> (для полужирного) передает метод - выделение текста жирным шрифтом. С сильным, ваш код по-прежнему имеет смысл, если вы используете таблицы стилей CSS, чтобы изменить методы создания сильного текста.

То же самое касается разницы между <i> и <em> ".

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

Элементы форматирования HTML:

HTML также определяет специальные элементы для определения текста со специальным значением. HTML использует такие элементы, как ‹b> и ‹i> для форматирования вывода, например полужирный или курсивный текст.

Полужирный шрифт HTML и строгое форматирование:

Элемент HTML ‹b> определяет полужирный текст без какой-либо особой важности.

<b>This text is bold</b>

Элемент HTML ‹▪ определяет строгий текст с добавленной семантической «сильной» важностью.

<strong>This text is strong</strong>

HTML курсив и выделенное форматирование:

Элемент HTML ‹i> определяет текст курсивом без особой важности.

<i>This text is italic</i>

Элемент HTML ‹em> определяет выделенный текст с дополнительной семантической важностью.

<em>This text is emphasized</em>

В HTML Lang эти два тега используются следующим образом:

simple text this is test text normal text



simple text this is important textwith normal text

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

Это различие связано с тем, что HTML-код различает символические и физические визуальные html-теги. В то время как предыдущие относятся к значению соответствующих областей, последние просто определяют оптический дисплей в браузерах. Вы можете проверить это здесь

<strong> и <em> абстрактны (это то, что люди имеют в виду, когда говорят, что они семантические). <b> и <i> - особые способы сделать что-то «сильным» или «подчеркнутым»

Аналогия:

И <strong>, и <b>, и <em>, <i>

as

«транспортное средство» означает «джип»

Мы используем тег <strong> для текста, который имеет высокий приоритет для целей SEO, например, название продукта, название компании и т. Д., А <b> simple выделяет его жирным шрифтом.

Точно так же мы используем <em> для текста, который имеет высокий приоритет для SEO, а <i>, чтобы сделать текст просто курсивом.