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

202

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

<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>тег?

Руперт Мэдден-Эббот
источник
4
Тег <i> находится в HTML5, потому что HTML5 (частично) является попыткой стандартизировать, как существующие браузеры обрабатывают HTML
Gareth
3
Я получаю 404 за этот похожий / связанный пост.
Мартин Хансен Леннокс,
@MartinHansenLennox вы всегда можете пометить эти линкоты, чтобы они были исключены из голосования и исчезли. Я уже проголосовал.
Нилон
Флаг за внимание? Я думал, что это только для оскорбительных / спамовых вещей. Но хорошо, да, сделано
Мартин Хансен Леннокс

Ответы:

211

Вы должны использовать разные методы для разных вариантов использования:

  1. Если вы хотите подчеркнуть фразу, используйте <em>.
  2. <i>Тег имеет новый смысл в HTML5 , представляющий «пролет текста в альтернативном голосе или настроении». Таким образом, вы должны использовать этот тег для таких вещей, как мысли / отступления или идиоматические фразы. Спецификация также предлагает названия кораблей (но больше не предлагает названия книг / песен / фильмов; используйте <cite>вместо этого).
  3. Если выделенный курсивом текст является частью более широкого контекста, скажем, вводного абзаца, вы должны прикрепить стиль CSS к большему элементу, т.е. p.intro { font-style: italic; }
DisgruntledGoat
источник
2
+1, похоже, хороший совет для меня. Я думаю, что пункт 3 является хорошим примером изменения стиля текста исключительно по эстетическим соображениям, без реального семантического намерения.
GrahamS
1
Случай 2 не соответствует тому, что на самом деле говорится в черновиках HTML5, - он неясен и варьируется в зависимости от версии, но ни одна версия не предлагает использовать iдля названий книг, песен, альбомов или фильмов (которые, по сомнению, будут подходящими для использования cite).
Юкка К. Корпела
@Jukka Я уверен, что это было там когда-то. Тем не менее его сейчас нет, поэтому я обновил свой ответ.
Рассерженная шлюха
Как упомянуто в: w3.org/TR/html5/text-level-semantics.html#the-em-element Если вы хотите использовать элемент, чтобы сделать ваш текст курсивом, вы должны использовать <i>. Элемент em не является общим элементом «курсив». Иногда текст должен выделяться из остальной части абзаца, как если бы он был в другом настроении или голосе. Для этого более подходящим является элемент i.
Димитрис Зорбас
21

<i>не неправильно, потому что это не семантическое. Это неправильно (обычно), потому что это презентационно. Разделение проблем означает, что презентационная информация должна передаваться с помощью CSS.

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

<i>включен в HTML5, но ему присуща определенная семантика. Если причина, по которой вы помечаете что-то курсивом, соответствует одной из семантик, указанных в спецификации, было бы целесообразно использовать <i>. В противном случае нет.

Alohci
источник
10

Я не эксперт, но я бы сказал, что если вы действительно хотите быть семантическим, вы должны использовать словари (RDFa).

Это должно привести к чему-то вроде этого:

<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>

emиспользуются для представления (люди будут видеть его курсив) , а propertyи hrefатрибуты ссылок на определение того , что является наклонным (для машин).

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

Больше информации о RDFa здесь: http://www.alistapart.com/articles/introduction-to-rdfa/

Гийом Фландр
источник
2
+1 для указания на то, что есть разница между подразумеваемой или унаследованной семантикой (дешевой и простой, но слабой формой) и явной семантикой, где разработчик должен приложить немного дополнительных усилий, чтобы повысить ценность своего контента (дорогой и трудоемкий, но может привести к контент хорошего качества).
выход
7

TLDR

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

Более длинное объяснение

Не беспокойтесь о представлении при написании разметки. Не думай курсивом. Думайте с точки зрения семантики. Если это требует акцента на стресс, то это em. Если это касательно основного контента, то это aside. Может быть, это будет жирным шрифтом, возможно, это будет курсивом, может быть, это будет флуоресцентный зеленый. Неважно, когда вы пишете разметку.

Когда вы дойдете до CSS, у вас уже может быть семантический элемент, который имеет смысл размещать курсивом для всех его вхождений на вашем сайте. emхороший пример Но, может быть, вы хотите, чтобы все aside > ul > liна вашем сайте курсивом. Вы должны отделить размышления о разметке от размышлений о представлении.

Как уже упоминал DisgruntledGoat , iэто семантика в HTML5. Тем не менее, семантика кажется мне довольно узкой. Использование, вероятно, будет редким.

Семантика emв HTML5 изменилась, чтобы подчеркнуть акцент. strongможет быть использован, чтобы показать важность, а также. strongможет быть курсивом, а не жирным шрифтом, если вы хотите его оформить. Не позволяйте таблице стилей браузера ограничивать вас. Вы даже можете использовать таблицу стилей сброса, чтобы перестать думать в рамках настроек по умолчанию. (Хотя есть некоторые оговорки .)

class="italic"плохо. Не используйте это. Это не семантическое и не гибкое вообще. Презентация все еще имеет семантику, просто отличную от разметки.

class="footnote"эмулирует семантику разметки и также неверен. Ваш CSS для сноски не должен быть полностью уникальным для вашей сноски. Ваш сайт будет выглядеть слишком грязно, если каждая часть оформлена по-разному. У вас должно быть несколько визуальных шаблонов, разбросанных по вашим страницам, которые вы можете превратить в классы CSS. Если ваш стиль для ваших сносок и ваших цитат очень похож, то вы должны поместить сходство в один класс, а не повторять себя снова и снова. Вы можете рассмотреть вопрос о принятии практики OOCSS (ссылки ниже).

Разделение проблем и семантики велико в HTML5. Люди часто не понимают, что разметка не единственное место, где важна семантика. Существует семантика контента (HTML), но также есть семантика представления (CSS) и семантика поведения (JavaScript). У всех них есть своя отдельная семантика, на которую важно обращать внимание для удобства обслуживания и сохранения СУХОГО состояния.

OOCSS Resources

Ева
источник
5

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

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

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

Потому что это достаточно сложные стили (с сопутствующими вопросами Internet Explorer) повторно используемые в разных местах, мы создаем классы , как box-1, box-2так что мы можем повторно использовать стили.

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

Пол Д. Уэйт
источник
1
Я склонен согласиться. Если вы не можете придумать оправдание для того, чтобы определенная разметка была представлена ​​по-другому, значит, вы не правильно об этом думаете. Если вы не можете объяснить, почему [этот текст] должен быть курсивом, как вы узнаете, когда [другой текст] также должен быть курсивом на другой странице / части страницы? И точно так же, если вы делаете знать , почему вы должны быть в состоянии придумать подходящее имя по этой причине
Gareth
1
Абсолютно. Иногда нет способа использовать CSS, чтобы превратить чисто семантическую разметку в то, что хочет дизайнер (x-browser) - нужно быть гибким.
Скиллдрик
1
Есть эстетические причины для стиля текста. Например, существует (чисто эстетическое) соглашение о выделении первых нескольких слов каждого абзаца в маленькие заглавные буквы. Это не имеет смыслового значения. В HTML должна быть возможность разметки текста по несемантическим причинам.
3

Текст курсивом HTML отображает текст курсивом.

<i>HTML italic text example</i>

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

<p>This is <em>emphasized </em> text format <em>example</em></p>

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

Смотрите это руководство для более: HTML форматирования текста

Прабхакар Ундурти
источник
2

iЭлемент не является семантическим, так и для чтения с экраном, Googlebot и т.д., он должен быть каким - то прозрачным (так же , как spanи divэлементы). Но это не очень хороший выбор для разработчика, потому что он объединяет уровень представления со слоем структуры - и это плохая практика.

emЭлемент ( strongтакже) должен всегда использоваться в семантическом контексте, а не в презентационном. Это должно использоваться всякий раз, когда какое-то слово или предложение важны. Просто для примера в предыдущем предложении я должен использовать, emчтобы сделать больший акцент на части «должен всегда использоваться». Браузеры предоставляют некоторые свойства CSS по умолчанию для этих элементов, но вы можете и должны переопределить значения по умолчанию, если ваш дизайн требует, чтобы это сохраняло правильное семантическое значение этих элементов.

<span class="italic">Italic Text</span>это самый неправильный путь. Прежде всего, это неудобно в использовании. Во-вторых, это предполагает, что текст должен быть курсивом. И структурный слой (HTML, XML и т. Д.) Никогда не должен этого делать. Презентация всегда должна быть отделена от структуры.

<span class="footnote">Italic Text</span>кажется, лучший способ для сноски. Он не предлагает никаких презентаций и просто описывает разметку. Вы не можете предсказать, что произойдет в функции. Если в функции появится сноска, возможно, вам придется изменить имя ее класса (чтобы сохранить некоторую логику в вашем коде).

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

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

Crozin
источник
1

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

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

Если это чисто стилевая вещь, как, например, ваш дизайнер решил, что все ваши <h2>заголовки будут выглядеть лучше курсивом Garamond, то нет никакой смысловой причины включать его в HTML, и вам просто нужно изменить CSS для соответствующих элементов.

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

Grahams
источник
Как отмечено в комментариях, похоже, что они немного изменили намерения в HTML5 и запутали проблему. Так что, если вы уже используете HTML5, я думаю, <i>что теперь это также семантически полезно.
GrahamS
0

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

Если вы подчеркиваете текст по ЛЮБОЙ причине, вы можете использовать <em>или класс, выделенный курсивом.

Нормально иногда нарушать правила !

tahdhaze09
источник
0

ОК, первое, что нужно отметить, что <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.

Самир Талвар
источник
6
<i>не был объявлен устаревшим
Квентин
@DavidDorward: правильно, <i>не устарело, но спецификация HTML4 гласит: «Хотя не все они устарели, их использование не рекомендуется в пользу таблиц стилей»
GrahamS
@Graham: проверьте спецификацию HTML5, <i>используется для обозначения «диапазона текста альтернативным голосом или настроением».
Рассерженная шлюха
@DisgruntledGoat: Должен признать, что я не слишком внимательно следил за разработкой спецификации HTML5, но вы правы, похоже, что они сейчас пытались модернизировать <i>с каким-то семантическим значением. Лично я думаю, что они теперь запутали проблему, но они все еще говорят, что «авторам рекомендуется рассмотреть, могут ли другие элементы быть более применимыми, чем iэлемент, например, emэлемент для выделения ударения».
GrahamS
1
Извинения - кажется, я пропустил часть, относящуюся к HTML5. Мне кажется, что в спецификации неясно, когда использовать <i>и когда использовать <span class="semantic-meaning">… они, кажется, подразумевают, что вы должны использовать <i>для одного конкретного случая, когда семантика еще более желательна, что мне кажется неприличным - вы все еще добавляете код представления в семантический слой. Итак, вы правы: это не устарело, но, исходя из того, что я прочитал, я не могу честно рекомендовать это тоже.
Самир Талвар
-1

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

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

арийский
источник
-3

ДЕЛАТЬ

  1. Присвойте атрибуту класса значение, указывающее на характер данных (т.е. class="footnote" это хорошо)

  2. Создайте таблицу стилей CSS для страницы

  3. Определите стиль CSS, который присоединен к классу, который вы назначаете элементу

    .footnote { font-style:italic; }

НЕ

  1. Не использовать <i> или <em>элементы - они не поддерживаются и связывают данные и представление слишком близко.
  2. Не присваивайте классу значение, которое указывает правила представления (т.е. не используйте class="italic").
Ниндзю бора
источник
1
Как цитируется в другом ответе, так <i>и <em>есть в HTML5. Ваш номер 2 в разделе «Не делать» верен, но номер 1 в разделе «Делать» искажен - неправильно маркировать сноску всего класса, если другие элементы, которые не будут сносками, также будут выделены курсивом. класс, хотя есть класс, который указывает на характер данных, это хорошо. Однако таблица классов и стилей не всегда необходима, особенно если курсивом выделено только несколько элементов.
vapcguy