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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как уже говорили другие, <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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Они имеют тот же эффект. Однако 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> определяет сильный текст с добавленной семантической "сильной" важностью.

<strong>This text is strong</strong>

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

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

<i>This text is italic</i>

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

<em>This text is emphasized</em>

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

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

Аналогия:

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

в виде

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

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

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