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

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

1. Если вы хотите выделить фразу, используйте <em>.
2. Тег <i> имеет новое значение в HTML5 , представляющее «диапазон текста альтернативным голосом или настроением». Таким образом, вы должны использовать этот тег для таких вещей, как мысли / отступления или идиоматические фразы. Спецификация также предлагает названия кораблей (но больше не предлагает названия книг / песен / фильмов; вместо этого используйте <cite>).
3. Если выделенный курсивом текст является частью более широкого контекста, скажем, вступительного абзаца, вы должны прикрепить стиль CSS к большему элементу, т.е. p.intro { font-style: italic; }

Answer 2

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

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

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

Answer 3

Я не эксперт, но я бы сказал, что если вы действительно хотите быть семантическим, вы должны использовать словари (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/

Answer 4

ТЛ; др

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

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

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

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

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

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

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

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

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

OOCSS Resources

• Объектно-ориентированный CSS
• Введение в объектно-ориентированный CSS (OOCSS)
• Как написать объектно-ориентированный CSS
• Начало работы с объектно-ориентированным CSS (OOCSS)
• Объектно-ориентированный CSS: что, как и почему
• Погружение в объектно-ориентированный CSS

Answer 5

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

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

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

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

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

Answer 6

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

<i>HTML italic text example</i>

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

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

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

Подробнее об этом руководстве: http://www.snoopcode.com/html/html-text-formating

Answer 7

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

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

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

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

Answer 8

Элемент

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

Элемент

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

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

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

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

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

Answer 9

DO

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

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

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

   .footnote { font-style:italic; }

НЕ

1. Не используйте элементы <i> или <em> - они не поддерживаются и слишком тесно связывают данные и представление.
2. Не присваивайте классу значение, которое указывает правила представления (т. Е. Не используйте class="italic").

Answer 10

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

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

Можно нарушать правила иногда!