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


781

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



По крайней мере, на данный момент все, что я видел в StackOverflow, было «выделено жирным шрифтом» с использованием элемента <b>
OverCoder

MDN имеет четкое описание (с примерами) о том , как эти метки должны быть использованы: <em>, <strong>, <b>,<i>
totymedli

Ответы:


1046

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

Как пишет автор в сообщении списка обсуждений :

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

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

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

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

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

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

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


160
Обратите внимание, что <b> и <i> не устарели в HTML5. Их новое использование заключается в семантическом представлении стилей (или предполагаемом представлении), тогда как <strong> и <em> представляют структуру . Вы должны прочитать stellify.net/…
Натан Йеллин

12
Хороший ответ, но я бы сказал, что «нельзя выделять жирным шрифтом» - это неправильно, потому что вы предполагаете, что это булево понятие, когда font-weight: использует более изменчивый подход. Теперь, когда существуют экраны высокой четкости, есть уровни смелости.
TravisO

4
@ TravisO Я полагаю, что он говорил о конкретных технических ограничениях Palm Pilot.
Брайан Ортис

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

21
@deathApril Но они делают! У них есть смысл! HTML не определяется тем, во что вы верите или что вы решаете.
Мистер Листер

231

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

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


15
Хорошее объяснение. С другой стороны, в HTML 5 <i> и <b> также являются семантическими, а не явными. Вздох.
OregonGhost

1
Они? Я отстал от времени ...!
Тони Эндрюс

5
Да, лучшее объяснение, которое я прочитал, - это stellify.net/…
Натан Йеллин

25
HTML5 имеет новые смысловые значения для bи i. Это теги, которые вы должны использовать, когда вам нужно привлечь внимание к части прозы или сместить нормальную прозу, не передавая акцент ( em), важность (для strong) или релевантность (для mark). bпредназначен для ключевых слов, названий продуктов, практических слов и т. д., в то время iкак для технических терминов, мыслей, фраз и т. д. Честно говоря, ИМО, должно быть большее различие между ними.
Чарви

2
Жаль, что текст (и заголовок) stellify.net совершенно нечитаем на большинстве дешевых офисных мониторов и установок ^^ (отсутствие контраста просто ошеломляет)
Оскар Дювеборн

23

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

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

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

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


2
если вы говорите, что <b> и <i> больше не должны использоваться, то как насчет старого браузера, который не поддерживает <em> и <strong>?
Нирман

4
@Nirman Если кто-то использует старый браузер для навигации в Интернете, у него уже есть много проблем с визуальной точки зрения и с точки зрения безопасности. Поэтому я считаю, что программисты и дизайнеры не должны больше поддерживать старые браузеры.
yeyo

4
Примечание: если мы говорим о старых браузерах, мы имеем в виду Netscape 3 и IE2 здесь (IE3 и NS4 уже поддерживают <strong> и <em>). Если вам действительно нужно поддерживать те браузеры 20-го века, у вас действительно большие проблемы.
мистер Листер

<b> and <i> on the other hand only apply font styling and should no longer be used.Официальные документы HTML5 говорят об обратном. Нужна цитата?

1
Этот ответ был опубликован за 6 лет до выхода HTML5!
Джеймс

8

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

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

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

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

<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 для оригиналов)


7

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

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


1
strongне указывает на «сильный акцент», а скорее « важность ». Для большего акцента вложите emэлемент в другой emэлемент.
Чарви

@ TestSubject528491 если вы перейдете по ссылке на элементы фразы, которые я использовал выше, вы увидите, что я только что процитировал спецификацию. Я не думаю, что это вступает в противоречие с семантикой важности или с тем, что вложение emакцента в два акцентирует внимание, что, как я понимаю, вы предлагали.
Карим

3
Я думаю, что спецификация HTML5 просто делает больше различий между ними. В моей интерпретации «ударение» означает ударение в тоне голоса. Например, "Вы хотите, чтобы эти джинсы?" против "Вы хотите купить эти джинсы?" имеют разные значения из-за расстановки акцентов. OTOH, «Важность» не влияет на размещение. Например, " ВНИМАНИЕ : остерегайтесь собак!" было бы то же значение, если бы важность была удалена.
Чарви

<b> and <i> are both related to styleэм. Официальные документы HTML5 говорят об обратном. Нужна цитата?

@vaxquis, связанный выше для HTML 4: <b>и <i>являются элементами стиля шрифта, а <em>и <strong>являются элементами фразы. Любые предложения по улучшению этого? Для полноты, а также из-за того, что ваш комментарий не включал цитату, в HTML 5.2 все эти элементы описаны в фразе контента
Kariem

7

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

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

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

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


"более семантически правильно"? Что ты имеешь в виду? Вы читали спецификацию HTML5 на б / я теги?

4

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

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

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

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


1
Lol, это должен быть принятый ответ (HHOS). Ваш самый простой и правильный ответ на всей этой странице, даже если это немного шутка. Вся эта вещь о «семантике» - это глупая игра для начала. Мы все знаем, что любой, кто поднимает этот вопрос, работает здесь с основными поставщиками браузеров, Chrome, Firefox, IE и т. Д. Мы просто хотим знать, какие могут быть настоящие , реальные различия, а не то, о чем спорит комитет в его изобилие свободного времени.
GDP2

2

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

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


<b> and <i> are explicit (i.e. "make this text bold"),эм. Официальные документы HTML5 говорят об обратном. Нужна цитата?

2

<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 Ref:

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


1

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

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

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

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

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


1
Вы можете использовать таблицы стилей , чтобы полностью изменить способ , что <b>и <i>оказываются слишком. Довольно гладко, а?
Томас Эдинг

bи iне надо ничего кодировать. Как и у любого тега HMTL, у них есть стиль CSS по умолчанию, и, как и у любого тега, вы можете изменить его так, как вам хочется.
Меки

1

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

«Извлекает <strong> все </ strong> книги о <b> лакроссе </ b>.»

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

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


1

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

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


1

Для текста жирным шрифтом с помощью <b> тега

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

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

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


0

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

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


2
Абсолютно неверно, <b> и <i> не следует избегать. Они имеют смысловые значения в HTML5.
user2867288

0

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

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


0

«Они имеют тот же эффект. Однако 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


0

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

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

HTML жирный и сильный форматирование:

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

<b>This text is bold</b>

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

<strong>This text is strong</strong>

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

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

<i>This text is italic</i>

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

<em>This text is emphasized</em>

The HTML <b> element defines bold text, without any extra importance. The HTML <i> element defines italic text, without any extra importance.эм. Официальные документы HTML5 говорят об обратном. Нужна цитата?

0

Как правило, вы должны стараться избегать <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жирным и красным, например.


7
<b> и <i> НЕ устарели в HTML 4 и все еще полностью поддерживаются даже в следующем HTML 5. <em> и <strong> не являются заменой для них. См. Также w3.org/TR/html401/index/elements.html
thomasrutter,

1
@thomasrutter Они все еще в HMTL5, но имеют другое значение и с очень подробным объяснением того, как их использовать или, скорее, как их не использовать. Обратите внимание, что эти теги не имеют смысла (жирный и курсив не являются значениями , они являются инструкциями по дизайну, а HMTL о значении, CSS - о дизайне) - HTML предназначен для описания того, что представляет собой текст, а не для того, как его отобразить (который был разделен после HMTL3 по уважительной причине).
Меки

-2

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

Аналогия:

И <strong>это <b>и <em>является<i>

в виде

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


1
Я не понимаю, почему этот ответ был отклонен. Многие другие ответы с аналогичным содержанием были хорошо приняты.
aditya_m

-4

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

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


4
Некоторые HTML-теги действительно имеют SEO-приложение. Мета-описание, мета-робот или ссылка каноническая, чтобы назвать несколько. Насколько мы знаем, strong / em не является ни одним из них, ни в теории, ни на практике.
Sheepy
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.