<strong> против шрифта-веса: жирный шрифт и <em> против шрифта-стиля: курсив

42

Существует ли какая-либо реальная разница между использованием <strong> и <em> вместо свойств CSS:

font-weight: bold;
font-style: italic;

Кроме того, что действительно является причиной того, что оба варианта существуют? Я мог ошибаться, но не <strong> и <em> появились на сцене довольно долго после того, как font-weight и font-style стали стандартными свойствами CSS? Если это так, для них должна быть какая-то причина.

  • 22
    Сравнение strong с font-weight: bold похоже на сравнение h1 с display: block; font-size: 2em; font-weight: bold; margin: .67em 0;
Теги:

5 ответов

84
Лучший ответ

HTML представляет смысл; CSS представляет внешний вид. Как вы помечаете текст в документе, не определяется тем, как этот текст появляется на экране, а просто что это значит. В качестве другого примера некоторые другие элементы HTML, такие как заголовки, по умолчанию имеют стиль font-weight: bold, но они помечены с помощью <h1> - <h6>, а не <strong> или <b>.

В HTML5 вы используете <strong>, чтобы указать важные части предложения, например:

<p><strong>Do not touch.</strong> Contains <strong>hazardous</strong> materials.

И вы используете <em> для обозначения лингвистического стресса, например:

<p>A Gentleman: I suppose he does. But there no point in asking.
<p>A Lady: Why not?
<p>A Gentleman: Because he doesn't row.
<p>A Lady: He doesn't <em>row</em>?
<p>A Gentleman: No. He <em>doesn't</em> row.
<p>A Lady: Ah. I see what you mean.

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

em {
    font-style: normal;
    text-transform: uppercase;
}

Обратите внимание, что исходный ответ (ниже) применим к стандартам HTML до HTML5, в котором <strong> и <em> имели несколько разные значения, <b> и <i> были чисто презентационными и не имели смыслового значения. Подобно <strong> и <em>, соответственно, они имеют одинаковые значения по умолчанию, но могут быть изменены по-разному.

Вы используете <strong> и <em> для указания интенсивного акцента и нормального акцента соответственно.

Или подумайте об этом так: font-weight: bold ближе к <b> чем <strong>, а font-style: italic ближе к <i> чем <em>. Эти визуальные стили являются чисто визуальными: такие инструменты, как программы чтения с экрана, не собираются понимать, что жирный и курсивный, но некоторые читатели экрана могут читать текст <strong> и <em> в более подчеркнутом тон.

Поделиться
  • 2
    Это не просто теоретический подход - это не все, что необычно для подчеркиваний, цветов текста и цветов фона, которые будут использоваться вместо стиля по умолчанию.
  • 0
    Великие слова о различении определений в HTML и CSS.
8

Элемент <em> - от W3C (ссылка HTML5)

ДА! Существует явная разница.

Элемент <em> представляет собой акцент подчеркивания его содержания. Уровень акцента, который выделяет конкретный кусок контента, определяется его количеством элементов предка <em>.

<strong>  =  important content
<em>      =  stress emphasis of its contents

Размещение акцента изменяет смысл предложения. Таким образом, элемент образует неотъемлемую часть содержимого. Точный способ использования акцента таким образом зависит от языка.

Внимание!

  • Элемент <em> также не предназначен для передачи важности; для этого Цель, элемент <strong> более уместен.

  • Элемент <em> не является общим элементом "курсив". Иногда текст должен выделяться из остальной части абзаца, как если бы это было в другом настроении или голосе. Для этого элемент i больше необходимо.

Ссылка (примеры): См. ссылку W3C

Поделиться
  • 0
    <strong> и <em> являются семантической разметкой. Вместо того, чтобы просто сказать <b> или <i> , вы даете «причину», почему он помечен по-другому - больше информации о тексте, чем простая стилистическая разметка, такая как <b> или <i> . Это может быть очень важно для программ чтения с экрана, так как простой <i> может означать ударение, иностранное слово, цитируемый заголовок и т. Д. <em> обычно визуально эквивалентно <i> (и от <strong> до <b> ) , но это не гарантировано, и может быть изменено в CSS.
7

Проблема - проблема смыслового значения (как упоминает BoltClock) и визуального рендеринга.

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

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

Поделиться
3

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

Стили CSS - это то, как вы визуализируете их для людей, обычно жирным или курсивом.

Разделение презентации и контента в Википедии

Поделиться
1

<strong> и <em> - в отличие от <b> и <i> - имеют четкую цель для веб-браузеров для слепых.

Слепой человек не просматривает веб визуально, а звуком, например, текстовыми считывателями. <strong> и <em>, в дополнение к тому, чтобы поощрять выделение жирным шрифтом или курсивом, также передавать громкость или подчеркивание слогов соответственно (OH MY! and Ooooooh Myyyyyyy!). Аудио-только браузеры непредсказуемы, когда речь заходит о <b> и <i>... они могут сделать их громкими или подчеркнуть их, или они могут не... вы никогда не можете быть уверены, если не используете <strong> и <em>.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню