CSS/HTML: Что корректный путь состоит в том, чтобы сделать текстовым курсивом?
Что корректный путь состоит в том, чтобы сделать текстовым курсивом? Я видел следующие четыре подхода:
<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 для семантики. До сих пор это, кажется, лучший способ, но он на самом деле имеет две проблемы.
Не весь текст имеет достаточное значение гарантировать семантическую разметку. Например, выделенный курсивом текст является внизу страницы действительно сноской? Или действительно ли это в стороне? Или что-то еще полностью. Возможно, это не имеет никакого особого значения и только должно быть представлено курсивом для разделения его представляемо от текста, предшествующего ему.
Семантическое значение может измениться, когда оно не присутствует в достаточной силе. Позволяет говорят, что я согласился со "сноской", основанной на не чем ином как тексте, являющемся внизу страницы. Что происходит, когда несколько месяцев спустя я хочу добавить больше текста внизу? Это больше не сноска. Как мы можем выбрать семантический класс, который менее универсально, чем
<em>но избегает этих проблем?
Сводка
Кажется, что требование семантики, кажется, чрезмерно обременительно во многих экземплярах, где требование сделать что-то курсивом не предназначено для переноса семантического значения.
Кроме того, требование разделить стиль от структуры привело CSS рекламироваться как замена к <i> когда существуют случаи, когда это на самом деле было бы менее полезно. Таким образом, это оставляет меня со скромным <i> тег и задающийся вопросом, является ли этот ход мыслей причиной, почему это оставляют в спецификации HTML5?
Есть ли какие-либо хорошие сообщения в блоге или статьи об этом предмете также? Возможно, вовлеченными в решение сохранить/создать <i> тег?
9 ответов
Вы должны использовать различные методы для разных случаев использования:
- Если вы хотите подчеркнуть фразу, используйте
- Тег
- Если выделенный курсивый текст является частью более широкого контекста, скажите вводный абзац, вы должны прикрепить стиль CSS к увеличению элемента I.E.
P.intro {Font-Style: ITalic; }
Элемент I I немантичен, поэтому для считывателей экрана, GoogleBot и т. Д., Это должно быть каким-то прозрачным (как SPAN или div Элементы). Но это не хороший выбор для разработчика, потому что он присоединяется к слое презентации со структурой слоя - и это плохая практика.
EM Элемент (, как хорошо , а также всегда используется в семантическом контексте, а не в презентации. Он должен использоваться всякий раз, когда какое-то слово или предложение важно. Только для примера в предыдущем предложении я должен использовать EM , чтобы поставить больше акцента на «следует всегда использовать». Браузеры предоставляют несколько свойств CSS по умолчанию для этих элементов, но вы можете, и вы должны переопределить значения по умолчанию, если ваш дизайн требует этого, чтобы сохранить правильное семантическое значение этих элементов.
ITalic Text является самым неверным способом. Прежде всего, это неудобно в использовании. Во-вторых, это предполагает, что текст должен быть курсивом. И структурный слой (HTML, XML и т. Д.) не должен когда-либо не делал это. Презентация должна всегда отделяться от структуры.
ITalic Text , кажется, лучший способ для сноски. Это не предлагает никакой презентации и просто описывает разметку. Вы не можете предсказать, что произойдет в функции. Если сноска вырастет в функции, вы можете быть вынуждены изменить имя своего класса (чтобы сохранить какую-то логику в вашем коде).
Таким образом, всякий раз, когда у Вас есть некоторый важный текст, использование эм или сильный в упор его. Но помните, что эти элементы находятся встроенные элементы и не должны использоваться для упорных больших блоков текста.
Используйте CSS, если вы заботитесь только о том, как что-то выглядит и всегда старайтесь избегать какой-либо дополнительной разметки.
не ошибается, потому что это несемантично. Это неправильно (обычно), потому что это представительно. Разделение опасений означает, что презентационная информация должна передаваться с помощью CSS.
Именование в целом может быть сложным, чтобы получить правильное имя, и имена классов не являются исключением, но, тем не менее, это то, что вы должны сделать. Если вы используете курсив, чтобы сделать блок выделяющимся из текста тела, то, возможно, имя класса "flow-distinctive" будет в порядке. Подумайте о повторном использовании: имена классов предназначены для категоризации - где еще вы хотите сделать то же самое? Это должно помочь вам определить подходящее имя.
включено в HTML5, но ему дана определенная семантика. Если причина, по которой вы что-то разметили, так как курсив соответствует одной из семантик, идентифицированных в спецификации, то будет уместно использовать . В противном случае нет.
Я бы сказал, что использовать , чтобы подчеркнуть встроенные элементы. Используйте класс для элементов блоков, таких как блоки текста. CSS или нет, текст все еще должен быть помечен. Будь то семантика или для визуальной помощи, я предполагаю, что вы будете использовать его для чего-то значимого ...
Если вы подчеркиваете текст по какой-либо причине, вы могли бы использовать или класс, который алитирует ваш текст.
Это нормально для нарушать правила иногда!
Возможно, он не имеет особого значения, и только необходимо оказаться в курсе, чтобы отделить его презентационно из текста, предшествующего ему.
Если у него нет особого значения, почему он должен быть разделен презентационно из текста, предшествующего ему? Этот пробег текста выглядит немного странно , потому что я выбирал его без причины.
Я принимаю вашу точку зрения, хотя. Дизайнеры не редкость для производства конструкций, которые различаются визуально, не различающиеся значимые. Я видел это чаще всего с коробками: дизайнеры дадут нам проекты, включая коробки с различными комбинациями цвета, углы, градиенты и падения, без соотношения между стилями и смыслом содержания.
Поскольку они являются достаточно сложными стилями (со связанными проблемами Internet Explorer) повторно используются в разных местах, мы создаем классы, такие как Box-1 , Box-2 , так что мы может повторно использовать стили.
Конкретный пример изготовления некоторого текста курсирует слишком тривиален для беспокойства, хотя. Лучше всего оставить минуции, например, для семантических насленников, чтобы поспорить.
Используйте , если вам нужны несколько слов / символов в курсе содержимого без других стилей. Это также помогает сделать контент семантики.
Текстовый стиль лучше подходит для нескольких стилей и нет семантической потребности.
Я не эксперт, но я Я скажу, что если вы действительно хотите быть семантическим, вы должны использовать словари (RDFA).
Это должно привести к тому, что:
<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>
EM используется для презентации (люди увидят его в курсе) и свойство и HREF атрибуты Связывание к определению того, что такое курсив (для машин).
Вы должны проверить, есть ли словарь для такой вещи, возможно, свойства уже существуют.
Подробнее о RDFA здесь: http://www.alistapart.com/articles/introduction-21-rdfa/
Хорошо, первое, что нужно отметить Это то, что был устарел и не должен использоваться не было обесначено, но я до сих пор не рекомендую использовать его - см. Комментарии для деталей. Это потому, что он полностью проходит от сохранения презентации в уровне презентации, который вы указали. Точно так же , кажется, тоже сломает форму.
Итак, теперь у нас есть два реальных способа поступления: и . Помните, что EM означает акцент . Когда вы хотите подать акцент на слова, фразе или предложение, прикрепить его в Теги независимо от того, хотите ли вы курсива или нет. Если вы хотите изменить стиль каким-либо другим способом, используйте CSS: EM {Font-Weight: Bold; Стиль шрифта: нормальный; } . Конечно, вы также можете применить класс к мету : если вы решите, что вы хотите, чтобы некоторые подчеркивали фразы, чтобы показать в красном, дайте им класс и добавьте его в CSS:
Fancy some <em class="special">shiny</em> text?
em { font-weight: bold; font-style: normal; }
em.special { color: red; }
Если вы применяете курсив по какой-либо другой причине, перейдите с другим методом и дайте раздел класс. Таким образом, вы можете изменить свой стиль всякого, когда вы хотите, не регулируя HTML. В вашем примере сноски не следует подчеркивать - по сути, они должны быть подчеркнуты, поскольку точка сноски является демонстрировать неважную но интересную или полезную информацию. В этом случае вам намного лучше применять класс к сноске и сделать его как один в презентационном слое - CSS.
Я думаю, что ответ заключается в использовании , когда вы намереваетесь выделить .
Если при чтении текста про себя вы обнаружите, что используете слегка другой голос, чтобы выделить точку, тогда следует использовать потому что вам нужно, чтобы программа чтения с экрана выполняла то же самое.
Если это чисто стилистическая вещь, например, ваш дизайнер решил, что все ваши заголовки будут выглядеть лучше, выделенные курсивом Garamond, то нет смысла включать его в HTML и вам нужно просто изменить CSS для соответствующих элементов.
Я не вижу причин использовать , если только вам специально не нужно поддерживать какой-нибудь устаревший браузер без CSS.