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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

"Получает <strong> все </strong> книги о <b> лакроссе </b>".

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

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

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

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

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

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

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

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

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

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

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

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

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

Аналогия:

Оба <strong> относятся к <b>, а <em> относятся к <i>.

как

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

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

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

Полужирный шрифт HTML и строгое форматирование:

The HTML <b> element defines bold text, without any extra importance.

<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic "strong" importance.

<strong>This text is strong</strong>

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

The HTML <i> element defines italic text, without any extra importance.

<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added semantic importance.

<em>This text is emphasized</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:

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>

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

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

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

Я собираюсь рискнуть сделать здесь исторический и практический хитрый подход:

Да, согласно спецификациям, <strong> имел семантическое значение в HTML4, а <b> имел строго презентационное значение.

Да, когда появился HTML5, для b и i было введено новое семантическое значение, которое немного отличалось.

Да, W3C рекомендует - в основном - TL, DR; не используйте b и i.

You should always bear in mind that the content of a b element may not always be bold, and that of an i element may not always be italic. The actual style is dependent on the CSS style definitions. You should also bear in mind that bold and italic may not be the preferred style for content in certain languages. You should not use b and i tags if there is a more descriptive and relevant tag available.

НО:

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

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

Но на самом деле реальность такова, что семантическое и стилистическое значение <strong> и <b> со временем слились по необходимости.

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

Итак, если я пишу таблицу стилей для этого сайта, я, вероятно, собираюсь написать несколько стилей, которые выглядят так:

b,
strong {
  font-weight: 700;
  /* ... more styles here */
}

i,
em {
  font-style: italic;
  /* ... more styles here */
}

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

Или я мог бы быть одним из миллионов сайтов, которые используют normalize.css, который заботится о том, чтобы b и strong обрабатывались одинаково.

В мире уже существует такой огромный океан HTML, который оправдывает это ожидание, я просто не могу представить, что b КОГДА-ЛИБО обесценится в пользу strong или что браузеры когда-либо начнут отображать их по-другому по умолчанию.

Ну это все. Это мой горячий взгляд на семантику, историю и реальный мир. Одинаковы ли b / i и strong / em? Нет. Вероятно, они оба будут существовать и будут ли к ним относиться как к идентичным почти в любой ситуации до краха современной цивилизации? Я думаю да.

В HTML Lang эти два тега используются следующим образом:

simple text this is test text normal text



simple text this is important textwith normal text

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

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