it-swarm.com.ru

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

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

713
Philip Morton

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

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

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

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

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

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

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

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

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

969
splattne

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

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

213
Tony Andrews

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

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

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

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

24
James

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

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

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

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

8
mwiik

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

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

7
Kariem

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

<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
Rick Westera

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

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

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

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

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

3
Chris BeHanna

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

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

3
JamShady

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

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

2
Danubian Sailor

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

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

HTML Bold и Strong Formatting:

Элемент 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>
2
Muhammad Awais

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

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

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

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

2
Thomas Eding

теги 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 означает ударение на ударение и сильная означает сильную важность .

В следующем примере должно быть лингвистическое изменение при чтении Слова перед ...

<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
adnan2nd

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

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

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

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

1
Justin Blum

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

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

1
nickf

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

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

Google dixit:

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

1
Antonio Louro

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

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

1
Stephan Leclercq

Вы должны стараться избегать <b> и <i>. Они были введены для "разметки" страницы (как, например, удаленный тег font), и разметка - это не то, что должно быть сделано в HTML, это должно быть сделано в CSS (HTM == Структура, CSS == Разметка). Эти теги могут исчезнуть в будущем, в конце концов, вы можете просто использовать теги CSS и span, чтобы сделать текст жирным/курсивом.

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

0
Mecki