Який правильний спосіб зробити текст курсивом? Я бачив наступні чотири підходи:

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

Ви повинні використовувати різні методи для різних випадків використання:

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

<i>не є помилковим, оскільки він несемантичний. Це неправильно (як правило), оскільки це презентація. Розділення проблемних питань означає, що презентаційна інформація повинна передаватися за допомогою CSS.

Взагалі називання може бути складним, а правильні імена класів не є винятком, але все-таки це потрібно зробити. Якщо ви використовуєте курсив, щоб блок виділявся з тексту тексту, можливо, назва класу "flow-відмінна" буде в порядку. Подумайте про повторне використання: назви класів призначені для категоризації - де ще ви хотіли б зробити те саме? Це повинно допомогти вам визначити відповідне ім’я.

<i>включено в HTML5, але йому надається конкретна семантика. Якщо причина, за якою ви щось позначаєте, як курсив, відповідає одній із семантичних ознак, визначених у специфікації, було б доцільно використовувати <i>. Інакше ні.

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

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

• Об'єктно-орієнтований CSS
• Вступ до об'єктно-орієнтованого CSS (OOCSS)
• Як записати об’єктно-орієнтований CSS
• Початок роботи з об'єктно-орієнтованим CSS (OOCSS)
• Об'єктно-орієнтований CSS: що, як і чому
• Занурення в об'єктно-орієнтований CSS

Можливо, воно не має особливого значення і його потрібно викласти курсивом, щоб відокремити його презентаційно від тексту, що передує йому.

Якщо воно не має особливого значення, чому його потрібно презентаційно відокремлювати від тексту, що передує йому? Цей текст тексту виглядає дещо дивно , тому що я курсив його без жодної причини.

Я все-таки берусь на вашу думку. Не рідкість дизайнерів випускати конструкції, які візуально змінюються, не змінюючись по суті. Я бачив це найчастіше з коробками: дизайнери дають нам конструкції, включаючи коробки з різними поєднаннями кольорів, кутів, градієнтів і тіней, без зв'язку між стилями та змістом змісту.

Тому що це досить складні стилі (з супутніми питаннями Internet Explorer) повторно використовувані в різних місцях, ми створюємо класи , як box-1, box-2так що ми можемо повторно використовувати стилі.

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

Текст у курсиві HTML відображає текст у курсивному форматі.

<i>HTML italic text example</i>

Наголос і сильні елементи можуть бути використані для підвищення значення певних слів чи речень.

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

Тег наголосів слід використовувати, коли ви хочете підкреслити точку в тексті, а не обов'язково, коли ви хочете виділити його курсивом.

Докладніше див. У цьому посібнику: Форматування тексту HTML

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, якщо ви дбаєте лише про те, як щось виглядає, і завжди намагайтеся уникати зайвої розмітки.

Я думаю, що відповідь - використовувати, <em>коли ви маєте намір зробити акцент.

Якщо, читаючи текст сам, ви виявите, що використовуєте дещо інший голос, щоб підкреслити крапку, то це слід використовувати, <em>тому що ви хочете, щоб читач екрану робив те саме.

Якщо це суто стиль, наприклад, ваш дизайнер вирішив, що всі ваші <h2>заголовки краще виглядатимуть курсивом Garamond, то немає сенсових причин включати його в HTML, і вам слід просто змінити CSS на відповідні елементи.

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

Я б сказав, використовуйте, <em>щоб підкреслити вбудовані елементи. Використовуйте клас для блокових елементів, таких як блоки тексту. CSS чи ні, текст все одно має бути позначений тегами. Будь то для семантики чи для наочної допомоги, я припускаю, що ви використовуєте її для чогось значимого ...

Якщо ви підкреслюєте текст з будь-якої причини, ви можете використовувати <em>або клас, який курсивує текст.

Добре іноді порушувати правила !

Гаразд, перше, що слід зазначити, це <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.

Використовуйте <em>, якщо вам потрібні деякі слова / символи курсивом за змістом без інших стилів. Це також допомагає зробити зміст семантичним.

text-style краще підходить для декількох стилів і не потребує смислової потреби.

ДО

1. Дайте атрибуту класу значення, що вказує на характер даних (тобто class="footnote"добре)

2. Створіть аркуш стилів CSS для сторінки

3. Визначте стиль CSS, який додається до класу, який ви присвоюєте елементу

   .footnote { font-style:italic; }

НЕ

1. Не використовуйте <i>або <em>елементи - вони не підтримуються і зв’язують дані та презентацію занадто близько.
2. Не давайте класу значення, яке вказує на правила презентації (тобто не використовуйте class="italic").