В чем разница между <b>
и <strong>
, <i>
и <em>
в HTML/XHTML? Когда вы должны использовать каждый?
Какая разница между <b> и <strong>, <i> и?
Ответ 1
У них одинаковый эффект на обычные механизмы рендеринга веб-браузера, но между ними существует фундаментальная разница.
Как автор пишет в сообщение в списке обсуждений:
Подумайте о трех разных ситуациях:
- веб-браузеры
- слепые люди
- мобильные телефоны
"Жирный" - это стиль - когда вы говорите "смелое слово", люди в основном знают, что это означает добавить больше, пусть говорят "чернила", вокруг букв, пока они не выйдут больше среди остальных букв.
Это, к сожалению, ничего не значит для слепого. На мобильных телефонах и другие КПК, текст уже выделен, потому что разрешение экрана очень мало. Вы не можете смело смелить, не прикручивая что-то.
<b>
- стиль - мы знаем, что должно выглядеть как "жирным".
<strong>
однако указывает на то, как что-то следует понимать. "Сильный" мог (и часто бывает) означать "смелый" в браузере, но это также может означать более низкий тон для говорящей программы, такой как Jaws (для слепых) или быть представленным подчеркиванием (поскольку вы не можете смело жирным шрифтом) на Palm Pilot.
HTML никогда не предназначался для стилей. Сделайте некоторые поисковые запросы для "Тим Бернерс-Ли" и "семантической сети". <strong>
- это семантический символ, он описывает текст, который он окружает (например, "этот текст должен быть сильнее, чем остальная часть текста, который вы отображали" ), в отличие от описания того, как текст, который он окружает, должен отображаться (например, "this текст должен быть полужирным шрифтом" ).
Ответ 2
<b>
и <i>
являются явными - они задают полужирный и курсив соответственно.
<strong>
и <em>
являются семантическими - они указывают, что вложенный текст должен быть "сильным" или "подчеркнутым" каким-то образом, обычно жирным и курсивным, но позволяющим управлять фактическим стилем с помощью CSS. Следовательно, это предпочтительнее на современных веб-страницах.
Ответ 3
<strong>
и <em>
добавить дополнительный семантический смысл вашему документу. Так получилось, что они также придадут вашему тексту жирный и курсивный стиль.
Конечно, вы можете переопределить стиль с помощью CSS.
<b>
и <i>
, с другой стороны, применяются только стили шрифта и больше не должны использоваться. (Потому что вы должны отформатировать с помощью CSS, и если бы текст был действительно важен, вы бы, вероятно, сделали его "сильным" или "подчеркнутым"!)
Надеюсь, что это имеет смысл.
Ответ 4
Здесь приведено краткое описание определений вместе с предлагаемым использованием:
<b>
... диапазон текста, к которому обращается внимание в утилитарных целях, не придавая особой важности и не подразумевая альтернативный голос или настроение, например ключевые слова в реферат документа, названия продуктов в обзоре, допустимые слова в интерактивном текстовом программном обеспечении или статья lede.
<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 для оригиналов)
Ответ 5
<b>
и <i>
связаны с стилем, тогда как <em>
и <strong>
являются семантическими. В HTML 4 первые классифицируются как элементы стиля шрифта, а последние как фразовые элементы.
Как вы указали правильно, <i>
и <em>
часто считаются схожими, потому что браузеры часто выделяют курсивом. Но согласно спецификациям <em>
указывает на выделение, а <strong>
указывает на более сильный акцент, что совершенно ясно, но часто неверно истолковывается. С другой стороны, различие между тем, когда использовать <i>
или <b>
, действительно является вопросом стиля.
Ответ 6
Хотя <strong>
и <em>
, конечно, более семантически корректны, существуют определенные законные причины использовать теги <b>
и <i>
для контента, написанного клиентом.
В таком содержании слова или фразы могут быть выделены жирным шрифтом или выделены курсивом, и нам, как правило, не нужно анализировать семантические аргументы для такого смещения или курсива.
Кроме того, такое содержание может ссылаться на выделенные жирным шрифтом и курсивом слова и фразы, чтобы передать конкретное значение.
Примером может служить вопрос об экзамене на английском языке, в котором ученику предлагается заменить выделенное жирным словом слово.
Ответ 7
<em>
и <strong>
потребляют больше полосы пропускания, чем <i>
и <b>
.
Они также требуют больше ввода (если не сгенерированы автоматически).
Они также загромождают экран редактора большим текстом. Кажется, я вспоминаю, что программисты любят более мелкие исходные файлы, если они одинаковы. (И пусть они реальны, они одинаковы. Да, есть "технические" (< я > кашель </i> , гм, извините) различия, но это в основном фальшиво для начала с.)
С помощью любого из вышеперечисленных тегов вы можете использовать таблицы стилей, чтобы настроить, как они выглядят, как вы хотите, если вам нужно, чтобы они отличались от рендеринга по умолчанию.
Ответ 8
Как говорили другие, <b> и < я > (т.е. "сделать этот текст полужирным" ), тогда как <strong> и <em> являются семантическими (т.е. "этот текст следует подчеркнуть" ).
В контексте современного веб-браузера трудно понять разницу (они оба, похоже, дают одинаковый результат, верно?), но подумайте о программных устройствах для слабовидящих. Если экранный считыватель попал на < я > тег, он не знал бы, что делать. Но если он встречается с <em> тег, он знает, что все, что внутри, должно быть подчеркнуто слушателю. И в этом вы получите практическую разницу.
Ответ 9
Теги <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
Ответ 10
Как отмечали другие, разница заключается в том, что стили шрифтов <b>
и <i>
hardcode, тогда как <strong>
и <em>
диктуют семантическое значение, с стилем шрифта (или говорящей интонацией браузера, или что-то -you), который будет определен во время отображения текста (или произнесенного).
Вы можете думать об этом как о разнице между "физическим" стилем шрифта и "логическим" стилем, если хотите. Позже вы можете изменить способ отображения текста <strong>
и <em>
, скажем, путем изменения свойств в таблице стилей, чтобы добавить изменения цвета и размера или даже полностью использовать разные шрифты. Если вы использовали "логическую" разметку вместо жесткой "физической" разметки, вы можете просто изменить свойства отображения в одном месте в каждой таблице стилей, а затем все страницы, ссылающиеся на эту таблицу стилей, изменились автоматически, без необходимости редактировать их.
Довольно скользкий, да?
Это также является обоснованием определения подтипов (с использованием свойства style=
в текстовых тегах) для абзацев, ячеек таблицы, текста заголовка, титров и т.д. и с использованием тегов <div>
. Вы можете определить физическое представление для своих логических стилей в таблице стилей, и изменения автоматически отражаются на веб-страницах, которые ссылаются на эту таблицу стилей. Хотите другое представление для исходного кода? Переустановите шрифт, размер, вес, интервал и т.д. Для вашего "кода".
Если вы используете XHTML, вы даже можете определить свои собственные семантические теги, и ваша таблица стилей сделает преобразования для физических стилей и макетов шрифтов для вас.
Ответ 11
Я использую как <strong> и <b> , фактически, точно по причинам, упомянутым в этом потоке ответов. Бывают случаи, когда полужирный текст выглядит просто лучше, но он не обязательно обязательно семантически более важен, чем остальная часть предложения. Вот пример страницы, над которой я сейчас работаю:
"Получает <strong> все </strong> книги о <b> lacrosse </b> .
В этом предложении слово "все" очень важно, и "лакросс" меньше - я просто хотел, чтобы он был смелым, потому что он представляет собой поисковый запрос, поэтому я хотел получить визуальное разделение. Если вы просматриваете страницу с помощью программы для чтения с экрана, я действительно не думаю, что ей нужно уйти с пути, чтобы подчеркнуть слово "лакросс".
Я бы подумал, что большинство веб-разработчиков используют один из других, но оба они хороши - <b> наиболее определенно не устарели, как утверждают некоторые люди. Для меня это просто тонкая грань между визуальной привлекательностью и смыслом.
Ответ 12
Используйте их только в том случае, если использование классов стилей CSS по какой-либо причине является неудобным или невозможным (например, системы блога, допускать использование только некоторых тегов в сообщениях и в конечном итоге встроенных стилях). Другая причина - поддержка очень старых браузеров (некоторые мобильные устройства?) Или примитивные поисковые системы (которые дают точки для тегов <b>
или <strong>
вместо анализа стилей CSS).
Если вы можете определить стили CSS, используйте их.
Ответ 13
<b>
и <i>
следует избегать, поскольку они описывают стиль текста. Вместо этого используйте <strong>
и <em>
, потому что это описывает семантику (смысл) текста.
Как и все вещи в HTML, вы должны думать не о том, как вы хотите, чтобы это выглядело, а о том, что вы на самом деле имеете в виду. Конечно, это может быть просто смело и курсивом для вас, но не для чтения с экрана.
Ответ 14
"Они имеют такой же эффект. Однако 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
Ответ 15
b или i означает, что текст должен быть выделен полужирным шрифтом или курсивом. Сильная или em означает, что текст должен отображаться таким образом, чтобы пользователь понимал как "важный". Значение по умолчанию заключается в том, чтобы сделать сильным, как жирным, и курсивом, но некоторые другие культуры могут использовать другое сопоставление.
Как строки в программе, b и i будут "жестко закодированы", а strong и em будет "локализован".
Ответ 16
Как правило, вы должны стараться избегать <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
жирным и красным, например.
Ответ 17
Элементы форматирования 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>
Ответ 18
<strong>
и <em>
являются абстрактными (это то, что люди подразумевают, когда говорят, что это семантика).
<b>
и <i>
- это конкретные способы сделать что-то "сильное" или "подчеркнутое"
<strong>
: <b>
:: автомобиль:: джип
Ответ 19
Мы используем тег <strong>
для текста, который имеет высокий приоритет для целей SEO, таких как имя продукта, название компании и т.д., в то время как <b>
simple делает его полужирным.
Аналогично, мы используем <em>
для текста, который имеет высокий приоритет для SEO, тогда как <i>
делает текст просто курсивом.