Quelle est la bonne façon de mettre le texte en italique? J'ai vu les quatre approches suivantes:

<i>Italic Text</i>

<em>Italic Text</em>

<span class="italic">Italic Text</span>

<span class="footnote">Italic Text</span>

<i>

C'est "l'ancienne voie". <i>n'a pas de sens sémantique et ne fait que transmettre l'effet de présentation du texte en italique. Pour autant que je puisse voir, c'est clairement faux parce que ce n'est pas sémantique.

<em>

Cela utilise le balisage sémantique à des fins purement de présentation. Il se trouve que <em>par défaut, le texte est rendu en italique et il est donc souvent utilisé par ceux qui savent qu'il <i>faut éviter mais qui ne connaissent pas sa signification sémantique. Tout le texte en italique n'est pas en italique car il est souligné. Parfois, cela peut être exactement le contraire, comme une note latérale ou un murmure.

<span class="italic">

Cela utilise une classe CSS pour placer la présentation. C'est souvent considéré comme la bonne façon, mais encore une fois, cela me semble mal. Cela ne semble pas transmettre plus de sens sémantique <i>. Mais, crient ses partisans, il est beaucoup plus facile de changer tout votre texte en italique plus tard si vous, par exemple, le vouliez en gras. Pourtant, ce n'est pas le cas car il me resterait alors une classe appelée "italique" qui rendrait le texte en gras. En outre, il n'est pas clair pourquoi je voudrais un jour changer tout le texte en italique sur mon site Web ou du moins nous pouvons penser à des cas où cela ne serait pas souhaitable ou nécessaire.

<span class="footnote">

Cela utilise une classe CSS pour la sémantique. Jusqu'à présent, cela semble être le meilleur moyen, mais cela pose en fait deux problèmes.

1. Tous les textes n'ont pas une signification suffisante pour justifier un balisage sémantique. Par exemple, le texte en italique au bas de la page est-il vraiment une note de bas de page? Ou est-ce un aparté? Ou tout autre chose. Peut-être n'a-t-il pas de signification particulière et n'a-t-il qu'à être rendu en italique pour le séparer de façon présentation du texte qui le précède.

2. La signification sémantique peut changer lorsqu'elle n'est pas présente avec une force suffisante. Disons que j'ai accepté la "note de bas de page" basée sur rien de plus que le texte se trouvant en bas de la page. Que se passe-t-il lorsque quelques mois plus tard, je veux ajouter plus de texte en bas? Ce n'est plus une note de bas de page. Comment choisir une classe sémantique moins générique que <em>mais qui évite ces problèmes?

Résumé

Il semble que l'exigence de sémantique semble être trop contraignante dans de nombreux cas où le désir de mettre quelque chose en italique n'est pas censé avoir un sens sémantique.

En outre, le désir de séparer le style de la structure a conduit à vanter CSS comme un remplacement <i>lorsqu'il y a des occasions où cela serait en fait moins utile. Donc, cela me laisse avec l'humble <i>balise et me demande si ce train de pensée est la raison pour laquelle il est laissé dans la spécification HTML5?

Existe-t-il également de bons articles de blog ou articles sur ce sujet? Peut-être par ceux impliqués dans la décision de conserver / créer le <i>tag?

Vous devez utiliser différentes méthodes pour différents cas d'utilisation:

1. Si vous souhaitez souligner une phrase, utilisez <em>.
2. La <i>balise a une nouvelle signification en HTML5 , représentant "une étendue de texte dans une voix ou une humeur alternative". Vous devez donc utiliser cette balise pour des choses comme des pensées / apartés ou des phrases idiomatiques. La spécification suggère également des noms de navires (mais ne suggère plus de noms de livres / chansons / films; utilisez-les <cite>à la place).
3. Si le texte en italique fait partie d'un contexte plus large, par exemple un paragraphe d'introduction, vous devez attacher le style CSS à l'élément plus grand, c'est-à-dire p.intro { font-style: italic; }

<i>n'est pas faux car il est non sémantique. C'est faux (généralement) parce que c'est de la présentation. La séparation des préoccupations signifie que les informations de conservation doivent être transmises au CSS.

Nommer en général peut être difficile à obtenir correctement, et les noms de classe ne font pas exception, mais c'est néanmoins ce que vous devez faire. Si vous utilisez l'italique pour faire ressortir un bloc du corps du texte, alors peut-être qu'un nom de classe "distinctif du flux" serait approprié. Pensez à réutiliser: les noms de classe sont pour la catégorisation - où d'autre voudriez-vous faire la même chose? Cela devrait vous aider à identifier un nom approprié.

<i>est inclus dans HTML5, mais il reçoit une sémantique spécifique. Si la raison pour laquelle vous marquez quelque chose comme italique correspond à l'une des sémantiques identifiées dans la spécification, il serait approprié de l'utiliser <i>. Sinon non.

Je ne suis pas un expert mais je dirais que si vous voulez vraiment être sémantique, vous devez utiliser des vocabulaires (RDFa).

Cela devrait aboutir à quelque chose comme ça:

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

emest utilisé pour la présentation (les humains le verront en italique) et les attributs propertyet hrefsont liés à une définition de ce qu'est l'italique (pour les machines).

Vous devriez vérifier s'il y a un vocabulaire pour ce genre de chose, peut-être que des propriétés existent déjà.

Plus d'informations sur RDFa ici: http://www.alistapart.com/articles/introduction-to-rdfa/

TLDR

La bonne façon de rendre le texte en italique est d'ignorer le problème jusqu'à ce que vous arriviez au CSS, puis de styliser selon la sémantique de présentation. Les deux premières options que vous avez fournies peuvent convenir selon les circonstances. Les deux derniers ont tort.

Explication plus longue

Ne vous inquiétez pas de la présentation lors de l'écriture du balisage. Ne pensez pas en italique. Pensez en termes de sémantique. Si cela nécessite un accent sur le stress, alors c'est un em. Si c'est tangent au contenu principal, alors c'est un aside. Peut-être que ce sera en gras, peut-être en italique, peut-être en vert fluorescent. Peu importe lorsque vous écrivez du balisage.

Lorsque vous accédez au CSS, vous disposez peut-être déjà d'un élément sémantique qui a du sens de mettre l'italique pour toutes ses occurrences dans votre site. emest un bon exemple. Mais peut-être que vous voulez tout aside > ul > lisur votre site en italique. Vous devez séparer la réflexion sur le balisage de la réflexion sur la présentation.

Comme mentionné par DisgruntledGoat , iest sémantique en HTML5. La sémantique me semble cependant un peu étroite. L'utilisation sera probablement rare.

La sémantique de ema changé en HTML5 pour souligner l'accent. strongpeut également être utilisé pour montrer l'importance. strongpeut être en italique plutôt qu'en gras si c'est comme ça que vous voulez le styliser. Ne laissez pas la feuille de style du navigateur vous limiter. Vous pouvez même utiliser une feuille de style de réinitialisation pour vous aider à arrêter de penser dans les valeurs par défaut. (Bien qu'il y ait quelques mises en garde .)

class="italic"est mauvais. Ne l'utilisez pas. Ce n'est pas sémantique et pas flexible du tout. La présentation a toujours une sémantique, juste un type différent du balisage.

class="footnote"émule la sémantique de balisage et est également incorrect. Votre CSS pour la note de bas de page ne doit pas être complètement unique à votre note de bas de page. Votre site aura l'air trop salissant si chaque partie est conçue différemment. Vous devriez avoir des motifs visuels dispersés dans vos pages que vous pouvez transformer en classes CSS. Si votre style pour vos notes de bas de page et vos blockquotes sont très similaires, alors vous devriez mettre les similitudes dans une classe plutôt que de vous répéter encore et encore. Vous pourriez envisager d'adopter les pratiques de l'OOCSS (liens ci-dessous).

La séparation des préoccupations et de la sémantique est importante en HTML5. Souvent, les gens ne réalisent pas que le balisage n'est pas le seul endroit où la sémantique est importante. Il y a la sémantique du contenu (HTML), mais aussi la sémantique de présentation (CSS) et la sémantique comportementale (JavaScript). Ils ont tous leur propre sémantique distincte à laquelle il est important de prêter attention pour la maintenabilité et pour rester SEC.

Ressources OOCSS

• CSS orienté objet
• Une introduction au CSS orienté objet (OOCSS)
• Comment écrire du CSS orienté objet
• Premiers pas avec CSS orienté objet (OOCSS)
• CSS orienté objet: quoi, comment et pourquoi
• Plonger en CSS orienté objet

Peut-être n'a-t-il pas de signification particulière et n'a-t-il qu'à être rendu en italique pour le séparer de façon présentation du texte qui le précède.

S'il n'a pas de signification particulière, pourquoi doit-il être séparé sur le plan de la présentation du texte qui le précède? Cette série de texte a l'air un peu bizarre , car je l'ai mise en italique sans raison.

Je prends cependant note de votre point. Il n'est pas rare que les designers produisent des designs qui varient visuellement, sans varier de manière significative. J'ai vu cela le plus souvent avec des boîtes: les concepteurs nous donneront des conceptions, y compris des boîtes avec diverses combinaisons de couleurs, coins, dégradés et ombres portées, sans relation entre les styles et la signification du contenu.

Parce que ce sont des styles assez complexes (avec les problèmes liés à Internet Explorer) qui sont réutilisés dans différents endroits, nous créons des classes comme box-1, box-2, afin que nous puissions réutiliser les styles.

L'exemple spécifique de la mise en italique de certains textes est cependant trop trivial pour qu'on s'en inquiète. Il vaut mieux laisser des détails comme celui-ci pour que les sémantiques Nutters se disputent.

Le texte HTML en italique affiche le texte au format italique.

<i>HTML italic text example</i>

L'accentuation et les éléments forts peuvent tous deux être utilisés pour augmenter l'importance de certains mots ou phrases.

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

La balise d'accentuation doit être utilisée lorsque vous souhaitez mettre en évidence un point dans votre texte et pas nécessairement lorsque vous souhaitez mettre ce texte en italique.

Consultez ce guide pour en savoir plus: Formatage de texte HTML

L' iélément n'est pas sémantique, donc pour les lecteurs d'écran, Googlebot, etc., il doit être transparent (tout comme les éléments spanou div). Mais ce n'est pas un bon choix pour le développeur, car il joint la couche de présentation à la couche de structure - et c'est une mauvaise pratique.

emL'élément ( strongégalement) doit toujours être utilisé dans un contexte sémantique, et non dans un contexte de présentation. Il doit être utilisé chaque fois qu'un mot ou une phrase est important. Juste pour un exemple dans la phrase précédente, je devrais utiliser empour mettre davantage l'accent sur la partie «devrait toujours être utilisé». Les navigateurs fournissent des propriétés CSS par défaut pour ces éléments, mais vous pouvez et vous êtes censé remplacer les valeurs par défaut si votre conception l'exige pour conserver la signification sémantique correcte de ces éléments.

<span class="italic">Italic Text</span>est la façon la plus fausse. Tout d'abord, il est peu pratique à utiliser. Deuxièmement, il suggère que le texte soit en italique. Et la couche de structure (HTML, XML, etc.) ne devrait jamais le faire. La présentation doit toujours être séparée de la structure.

<span class="footnote">Italic Text</span>semble être le meilleur moyen pour une note de bas de page. Il ne suggère aucune présentation et décrit simplement le balisage. Vous ne pouvez pas prédire ce qui se passera dans la fonctionnalité. Si une note de bas de page grandit dans la fonctionnalité, vous pourriez être obligé de modifier le nom de sa classe (pour conserver une certaine logique dans votre code).

Donc, chaque fois que vous avez du texte important, utilisez emou strongpour le mettre en valeur. Mais rappelez-vous que ces éléments sont des éléments en ligne et ne doivent pas être utilisés pour mettre en évidence de gros blocs de texte.

Utilisez CSS si vous vous souciez seulement de l'apparence de quelque chose et essayez toujours d'éviter tout balisage supplémentaire.

Je pense que la réponse est à utiliser <em>lorsque vous avez l' intention de mettre l' accent.

Si, lorsque vous lisez le texte pour vous-même, vous constatez que vous utilisez une voix légèrement différente pour souligner un point, alors il devrait l'utiliser <em>parce que vous voudriez qu'un lecteur d'écran fasse la même chose.

Si c'est purement une question de style, comme si votre concepteur a décidé que toutes vos <h2>rubriques seraient mieux en italique Garamond, il n'y a aucune raison sémantique de l'inclure dans le HTML et vous devez simplement modifier le CSS pour les éléments appropriés.

Je ne vois aucune raison d'utiliser <i>, à moins que vous n'ayez spécifiquement besoin de prendre en charge un navigateur hérité sans CSS.

Je dirais utiliser <em>pour souligner les éléments en ligne. Utilisez une classe pour les éléments de bloc comme les blocs de texte. CSS ou non, le texte doit encore être balisé. Que ce soit pour la sémantique ou pour l'aide visuelle, je suppose que vous l'utiliseriez pour quelque chose de significatif ...

Si vous mettez du texte en évidence pour une raison quelconque, vous pouvez utiliser <em>ou une classe qui met votre texte en italique.

C'est OK parfois d' enfreindre les règles !

OK, la première chose à noter est que <i> est obsolète et ne doit pas être utilisé <i>n'a pas été déprécié, mais je ne recommande toujours pas de l'utiliser - voir les commentaires pour plus de détails. En effet, cela va totalement à l'encontre de conserver la présentation dans la couche de présentation, comme vous l'avez souligné. De même, <span class="italic">semble casser le moule aussi.

Alors maintenant, nous avons deux façons réelles de faire les choses: <em>et <span class="footnote">. N'oubliez pas que cela emsignifie l' accent . Lorsque vous souhaitez mettre l'accent sur un mot, une phrase ou une phrase, collez-le dans les <em>balises, que vous souhaitiez ou non l'italique. Si vous voulez changer le style d'une autre manière, utilisez CSS: em { font-weight: bold; font-style: normal; }. Bien sûr, vous pouvez également appliquer une classe à la <em>balise: si vous décidez que certaines phrases soulignées apparaissent en rouge, donnez-leur une classe et ajoutez-la au CSS:

Fancy some <em class="special">shiny</em> text?

em { font-weight: bold; font-style: normal; }
em.special { color: red; }

Si vous appliquez l'italique pour une autre raison, optez pour l'autre méthode et donnez à la section une classe. De cette façon, vous pouvez changer son style quand vous le souhaitez sans ajuster le HTML. Dans votre exemple, les notes de bas de page ne doivent pas être soulignées - en fait, elles doivent être désaccentuées, car le but d'une note de bas de page est de montrer des informations sans importance mais intéressantes ou utiles. Dans ce cas, il vaut mieux appliquer une classe à la note de bas de page et la faire ressembler à celle de la couche de présentation - le CSS.

Utilisez <em> si vous avez besoin de quelques mots / caractères en italique dans le contenu sans autres styles. Cela aide également à rendre le contenu sémantique.

text-style est mieux adapté à plusieurs styles et aucun besoin sémantique.

FAIRE

1. Donnez à l'attribut class une valeur indiquant la nature des données (c'est class="footnote"-à- dire est bonne)

2. Créer une feuille de style CSS pour la page

3. Définissez un style CSS attaché à la classe que vous affectez à l'élément

   .footnote { font-style:italic; }

NE PAS

1. N'utilisez pas d' éléments <i>ou <em>- ils ne sont pas pris en charge et relient trop étroitement les données et la présentation.
2. Ne donnez pas à la classe une valeur qui indique les règles de présentation (c'est-à-dire ne les utilisez pas class="italic").