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

Question

В чем разница между <b> и <strong>, <i> и <em> в HTML / XHTML? Когда вы должны использовать каждый?

Answer 1

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

Как пишет автор в пост списка рассылки :

Подумайте о трех разных ситуациях:

• веб-браузеры
• слепые люди
• мобильные телефоны

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

Это, к сожалению, ничего не значит для слепого. На мобильные телефоны и другие КПК, текст уже жирный, потому что разрешение экрана очень мало. Вы не можете выделить жирный шрифт, не облажаясь.

<b> - это стиль - мы знаем, как должен выглядеть «жирный».

<strong> однако указывает на то, как что-то следует понимать . «Сильный» может (и часто имеет) означать «полужирный» в браузере, но это также может означать более низкий тон для говорящей программы, такой как «Челюсти» (для слепых), или быть представлен подчеркиванием (поскольку вы не можете выделить жирным шрифтом жирным шрифтом) на Palm Pilot.

HTML никогда не предназначался для стилей. Выполните некоторые поиски для "Тим Бернерс-Ли" и "семантическая сеть". <strong> - это семантика & mdash; она описывает текст, который он окружает (например, "этот текст должен быть сильнее, чем остальная часть отображаемого вами текста" ), в отличие от описания как текст, который он окружает должен быть отображается (например, «этот текст должен быть жирным шрифтом» ).

Answer 2

<b> и <i> являются явными - они указывают жирный и курсив соответственно.

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

Answer 3

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

Конечно, вы можете переопределить их стиль с помощью CSS.

<b> и <i>, с другой стороны, применяют только стили шрифта и больше не должны использоваться. (Потому что вы должны отформатировать с помощью CSS, и если текст действительно важен, вы, вероятно, сделаете его «сильным» или «подчеркнутым» в любом случае!)

Надеюсь, что это имеет смысл.

Answer 4

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

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

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

Примером может служить вопрос об экзамене по английскому языку, который инструктирует студента заменить слово, выделенное жирным шрифтом.

Answer 5

<b> и <i> относятся к стилю, тогда как <em> и <strong> семантические. В HTML 4 первые классифицируются как элементы стиля шрифта , а последние как элементы фразы .

Как вы правильно указали, <i> и <em> часто считаются похожими, потому что браузеры часто отображают их курсивом. Но согласно спецификациям, <em> обозначает акцент , а <strong> обозначает более сильный акцент , что довольно ясно, но часто неверно истолковывается. С другой стороны, различие между тем, когда использовать <i> или <b>, действительно является вопросом стиля.

Answer 6

Вот краткое изложение определений вместе с предлагаемым использованием:

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

<strong> ... теперь представляет важность, а не сильный акцент.

<i> ... диапазон текста альтернативным голосом или настроением или иным образом смещенный по сравнению с обычной прозой, что указывает на различное качество текста, такое как таксономическое обозначение , a технический термин , идиоматическая фраза из другого языка , мысль или название корабля в западных текстах.

<em> ... указывает на акцент.

(Это все прямые цитаты из источников W3C, с моим акцентом. См .: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements и http://www.w3.org/TR/html401/struct/text.html#h-9.2.1 для оригиналов)

Answer 7

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

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

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

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

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

Answer 8

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

Answer 9

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

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

Жирное и сильное HTML-форматирование:

Элемент HTML определяет текст, выделенный жирным шрифтом, без какой-либо дополнительной важности.

<b>This text is bold</b>

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

<strong>This text is strong</strong>

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

Элемент HTML определяет текст курсивом, без каких-либо дополнительных важность.

<i>This text is italic</i>

Элемент HTML определяет выделенный текст с добавлением семантики важность.

<em>This text is emphasized</em>

Answer 10

<em> и <strong> потребляют больше пропускной способности, чем <i> и <b>.

Они также требуют большего набора текста (если не генерируются автоматически).

Они также загромождают экран редактора большим количеством текста. Кажется, я вспоминаю, что программистам нравятся меньшие исходные файлы, если они одинаковы. (И давайте будем реальными, они одинаковы. Да, есть «технические» ( кашель , хм, простите) различия, но это в основном фальшивые для начала.)

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