CSS / HTML: Как правильно сделать текст курсивом?

Question

Каков правильный способ сделать текст курсивом? Я видел следующие четыре подхода:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

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

<em>

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

<span class="italic">

Для размещения презентации используется класс CSS. Это часто рекламируется как правильный путь, но опять же, это кажется мне неправильным. Похоже, это не передает больше смыслового значения, что <i>. Но, как утверждают его сторонники, гораздо легче изменить весь текст, выделенный курсивом, позже, если, скажем, вы хотите, чтобы он был жирным. Но это не так, потому что тогда я остался бы с классом «курсив», который делал текст жирным. Кроме того, неясно, почему я бы хотел изменить весь текст курсива на моем веб-сайте или, по крайней мере, мы можем вспомнить случаи, когда это было бы нежелательно или необязательно.

<span class="footnote">

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

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

2. Семантическое значение может измениться, если оно отсутствует в достаточной силе. Допустим, я согласился с «сноской», основанной только на тексте, который находится внизу страницы. Что происходит, когда через несколько месяцев я хочу добавить больше текста внизу? Это больше не сноска. Как мы можем выбрать семантический класс, который менее универсален, чем <em>, но избегает этих проблем?

Резюме

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

Более того, желание отделить стиль от структуры привело к тому, что CSS заменили на <i>, когда бывали случаи, когда это было бы на самом деле менее полезно. Таким образом, это оставляет меня обратно со скромным тегом <i> и вопросом, является ли этот ход мыслей причиной, по которой он остался в спецификации HTML5?

Есть ли хорошие посты в блоге или статьи на эту тему? Возможно, те, кто участвовал в решении сохранить / создать тег <i>?

Answer 1

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

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

Answer 2

ОК, первое, что нужно отметить, это то, что <i> устарело и не должно использоваться <i> не устарело, но я все еще не рекомендую его использовать - см. комментарии для деталей. Это потому, что это полностью противоречит сохранению представления на уровне представления, на который вы указали. Точно так же <span class="italic">, кажется, также разрушает форму.

Итак, теперь у нас есть два реальных способа ведения дел: <em> и <span class="footnote">. Помните, что em означает выделение . Если вы хотите сделать акцент на слове, фразе или предложении, вставьте его в теги <em> независимо от того, хотите ли вы курсив или нет. Если вы хотите изменить стиль другим способом, используйте CSS: em { font-weight: bold; font-style: normal; }. Конечно, вы также можете применить класс к тегу <em>: если вы решите, что хотите, чтобы определенные выделенные фразы отображались красным, назначьте им класс и добавьте его в CSS:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

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