Ответ 1

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

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

Ответ 2

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

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

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

Ответ 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/

Ответ 4

TL;DR

Правильный способ сделать текст курсивом - игнорировать проблему, пока не дойдете до 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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

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

<i>HTML italic text example</i>

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

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

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

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

Ответ 9

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

Ответ 10

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

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

Это нормально, чтобы иногда нарушать правила!

Ответ 11

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

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

Ответ 12

DO

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

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

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

  .footnote { font-style:italic; }

НЕ

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