CSS / HTML: Quelle est la bonne façon de rendre le texte en italique?
Quelle est la manière correcte de rendre 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 la "vieille façon". <i> n'a pas de signification sémantique et ne transmet que l'effet de présentation de rendre le texte en italique. Autant que je sache, c'est clairement faux, car ce n'est pas sémantique.
<em>
Ceci utilise la balise sémantique à des fins purement de présentation. Il se trouve que <em> par défaut rend le texte en italique. Il est donc souvent utilisé par ceux qui savent que <i> doit être évité, mais qui ignorent sa signification sémantique. Tout le texte en italique n'est pas italique car il est mis en évidence. 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. Ceci est souvent présenté comme la bonne façon mais encore une fois, cela me semble faux. Cela ne semble pas transmettre plus de sens sémantique que <i>. Mais ses partisans pleurent, il est beaucoup plus facile de changer tout votre texte en italique plus tard si vous voulez, par exemple, le mettre en gras. Pourtant, ce n'est pas le cas car il me resterait alors une classe appelée "italic" qui rend le texte en gras. De plus, il n’est pas clair pourquoi je voudrais changer tout le texte en italique sur mon site Web ou du moins nous pouvons penser à des cas dans lesquels cela ne serait ni souhaitable ni nécessaire.
<span class="footnote">
Ceci utilise une classe CSS pour la sémantique. Jusqu'à présent, cela semble être la meilleure solution, mais il y a en fait deux problèmes.
Tout le texte n'a pas suffisamment de signification 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 quelque chose d'autre entièrement. Peut-être n'a-t-il pas de signification particulière et nécessite-t-il uniquement un rendu en italique pour le séparer de manière présentation du texte le précédant.
Le sens sémantique peut changer lorsqu'il n'est pas suffisamment présent. Disons que je suis allé avec "note de bas de page" basé sur rien de plus que le texte étant au bas de la page. Que se passe-t-il lorsque, quelques mois plus tard, je souhaite ajouter plus de texte en bas? Ce n'est plus une note de bas de page. Comment pouvons-nous choisir une classe sémantique moins générique que
<em>mais évitant ces problèmes?
Sommaire
Il semble que l'exigence de la sémantique semble trop lourde dans de nombreux cas où le désir de rendre quelque chose en italique n'est pas censé avoir une signification sémantique.
De plus, le désir de séparer le style de la structure a conduit CSS à être présenté comme un substitut à <i> alors que, dans certains cas, cela serait en réalité moins utile. Cela me laisse donc de retour avec l’humble balise <i> et je me demande si cette suite de pensées est la raison pour laquelle elle est laissée dans les spécifications HTML5?
Existe-t-il de bons articles de blog ou articles sur ce sujet? Peut-être par ceux impliqués dans la décision de conserver/créer la balise <i>?
Vous devez utiliser différentes méthodes pour différents cas d'utilisation:
- Si vous souhaitez mettre une phrase en valeur, utilisez
<em>. - La balise
<i>a un nouvelle signification en HTML5 , représentant "une étendue de texte avec une voix ou une ambiance différente". Donc, vous devriez utiliser cette balise pour des choses comme pensées/pensées ou expressions idiomatiques. La spécification suggère également les noms de navire (mais ne suggère plus les noms de livre/chanson/film; utilisez plutôt<cite>pour cela). - Si le texte en italique fait partie d'un contexte plus large, disons un paragraphe d'introduction, vous devez attacher le style CSS à l'élément le plus grand, à savoir
p.intro { font-style: italic; }
<i> n'a pas tort car il est non sémantique. C'est faux (généralement) parce que c'est une présentation. La séparation des préoccupations signifie que les informations confidentielles doivent être transmises avec CSS.
Nommer en général peut être délicat à obtenir, et les noms de classe ne font pas exception, mais néanmoins, c'est ce que vous devez faire. Si vous utilisez l'italique pour faire ressortir un bloc du corps du texte, un nom de classe "distinctif" sera alors approprié. Pensez à la réutilisation: les noms de classe sont destinés à être catégorisés - où d'autre voudriez-vous faire la même chose? Cela devrait vous aider à identifier un nom approprié.
<i> est inclus dans HTML5, mais une sémantique spécifique lui est attribuée. Si la raison pour laquelle vous marquez quelque chose en italique respecte l'une des sémantiques identifiées dans la spécification, il serait approprié d'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 donner quelque chose comme ça:
<em property="italic" href="http://url/to/a/definition_of_italic"> Your text </em>
em est utilisé pour la présentation (les utilisateurs la verront en italique) et les attributs property et href renvoient à une définition de ce que l'italique représente (pour les machines).
Vous devriez vérifier s'il existe un vocabulaire pour ce genre de chose, peut-être que des propriétés existent déjà.
Plus d'infos 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 obteniez le code CSS, puis dressez un style en fonction de la sémantique de la présentation. Les deux premières options que vous avez fournies pourraient être exactes en fonction des circonstances. Les deux derniers sont faux.
Explication plus longue
Ne vous inquiétez pas de la présentation lors de l'écriture du balisage. Ne pense pas en termes d'italique. Pensez en termes de sémantique. Si cela nécessite une accentuation du 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 quand vous écrivez du balisage.
Lorsque vous accédez au CSS, vous avez peut-être déjà un élément sémantique qui a du sens pour mettre en italique toutes les occurrences de votre site. em est un bon exemple. Mais vous voulez peut-être que tous les aside > ul > li de votre site soient en italiques. Vous devez séparer la réflexion sur le balisage de la présentation.
Comme mentionné par DisgruntledGoat , i est sémantique en HTML5. La sémantique semble un peu étroite pour moi, cependant. L'utilisation sera probablement rare.
La sémantique de em a changé en HTML5 pour mettre l'accent sur l'accent. strong peut également être utilisé pour montrer de l'importance. strong peut être en italique plutôt qu'en gras si c'est comme cela que vous voulez le nommer. Ne laissez pas la feuille de style du navigateur vous limiter. Vous pouvez même utiliser un réinitialiser la feuille de style pour vous aider à cesser de penser aux paramètres par défaut. (Bien que il y a quelques réserves .)
class="italic" est mauvais. Ne l'utilisez pas. Ce n'est pas sémantique et n'est 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 du balisage et est également incorrect. Votre CSS pour la note de bas de page ne doit pas être totalement propre à votre note de bas de page. Votre site aura l'air trop en désordre si chaque partie est dénommée différemment. Certains modèles visuels que vous pouvez transformer en classes CSS doivent être dispersés. Si votre style pour vos notes de bas de page et vos citations de bloc sont très similaires, vous devez regrouper 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’OCSO (liens ci-dessous).
La séparation des préoccupations et de la sémantique occupe une place importante dans HTML5. Souvent, les gens ne réalisent pas que le balisage n'est pas le seul endroit où la sémantique est importante. Il existe une sémantique de contenu (HTML), mais également une sémantique de présentation (CSS) et une sémantique de comportement (JavaScript). Ils ont tous leurs propres sémantiques sur lesquelles il est important de porter une attention particulière à la maintenabilité et au maintien au sec.
Ressources OOCSS
Peut-être n'a-t-il pas de signification particulière et nécessite-t-il uniquement un rendu en italique pour le séparer de manière présentation du texte le précédant.
S'il n'a pas de signification particulière, pourquoi doit-il être séparé du texte qui le précède sur le plan de la présentation? Cette série de texte est un peu bizarre, car je l’ai en italique sans raison.
Je comprends votre point cependant. Il n’est pas rare que les concepteurs produisent des dessins qui varient visuellement, sans faire de différence significative. C’est ce que j’ai vu le plus souvent avec les boîtes: les concepteurs nous donneront des dessins comprenant des boîtes avec différentes combinaisons de couleurs, de coins, de dégradés et d’ombres portées, sans relation entre les styles et la signification du contenu.
Comme il s'agit de styles raisonnablement complexes (avec des problèmes Internet Explorer associés) réutilisés à différents endroits, nous créons des classes telles que box-1, box-2, afin de pouvoir les réutiliser.
L'exemple spécifique consistant à rendre un texte en italique est trop simple pour que vous puissiez vous en soucier. Il vaut mieux laisser aux sémantiques sémantiques des arguments comme ceux-là.
Le texte HTML en italique affiche le texte en format italique.
<i>HTML italic text example</i>
L'accent 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 de soulignement doit être utilisée lorsque vous souhaitez souligner un point dans votre texte et pas nécessairement lorsque vous souhaitez mettre ce texte en italique.
Voir ce guide pour plus d'informations: Mise en forme de texte HTML
L'élément i n'est pas sémantique. Pour les lecteurs d'écran, Googlebot, etc., il devrait donc être transparent (tout comme les éléments span ou div). Mais ce n'est pas un bon choix pour le développeur, car il relie la couche de présentation à la couche de structure, ce qui est une mauvaise pratique.
L'élément em (ainsi que strong) devrait 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 em pour mettre davantage l'accent sur la partie "devrait être toujours utilisé". Les navigateurs fournissent des propriétés CSS par défaut pour ces éléments, mais vous pouvez et ê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 le plus mauvais moyen. Tout d'abord, son utilisation est peu pratique. Deuxièmement, il suggère que le texte soit en italique. Et la couche de structure (HTML, XML, etc.) ne devrait pas le faire jamais. La présentation doit toujours être séparée de la structure.
<span class="footnote">Italic Text</span> semble être le meilleur moyen de créer 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 va se passer dans la fonction. Si une note de bas de page se développe dans la fonctionnalité, vous pourriez être obligé de changer son nom de classe (pour conserver une certaine logique dans votre code).
Donc, chaque fois que vous avez du texte important, utilisez em ou strong pour le souligner. Mais rappelez-vous que ces éléments sont des éléments en ligne et ne doivent pas être utilisés pour mettre en valeur de gros blocs de texte.
Utilisez CSS si vous ne vous souciez que de l'apparence de quelque chose et essayez toujours d'éviter tout balisage supplémentaire.
Je pense que la réponse est d'utiliser <em> lorsque vous l'intention accent.
Si lors de la lecture du texte par vous-même, vous constatez que vous utilisez une voix légèrement différente de soulignez un point, vous devez utiliser <em> car vous voudriez un lecteur d'écran pour faire la même chose.
S'il s'agit purement d'un style, par exemple si votre concepteur a décidé que tous vos titres <h2> auraient une meilleure apparence en italique Garamond, il n'y a aucune raison sémantique de l'inclure dans le code HTML et vous devez simplement modifier le code CSS pour les éléments appropriés.
Je ne vois aucune raison d'utiliser <i>, sauf si vous devez spécifiquement prendre en charge certains navigateurs hérités sans CSS.
OK, la première chose à noter est que <i> est obsolète et ne doit pas être utilisé<i> n'est pas obsolète, mais je ne recommande toujours pas de l'utiliser - voir les commentaires pour plus de détails. En effet, cela va totalement à l'encontre du maintien de la présentation dans la couche de présentation, comme vous l'avez souligné. De même, <span class="italic"> semble également briser le moule.
Nous avons donc maintenant deux façons réelles de faire les choses: <em> et <span class="footnote">. Rappelez-vous que em signifie italique. Lorsque vous souhaitez appliquer une emphase à un mot, à une phrase ou à une phrase, collez-le dans les balises <em>, que vous souhaitiez utiliser l’italique ou non. Si vous souhaitez modifier 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 balise <em>: si vous souhaitez que certaines phrases accentuées apparaissent en rouge, attribuez-leur une classe et ajoutez-la à la CSS:
Fancy some <em class="special">shiny</em> text?
em { font-weight: bold; font-style: normal; }
em.special { color: red; }
Si vous appliquez des italiques pour une autre raison, utilisez l’autre méthode et donnez un cours à la section. De cette façon, vous pouvez modifier son style à tout moment sans ajuster le code HTML. Dans votre exemple, les notes de bas de page ne doivent pas être mises en exergue. En fait, elles doivent être moins importantes, car l'objectif d'une note de bas de page est de montrer des informations non importantes mais intéressantes ou utiles. Dans ce cas, vous feriez bien mieux d'appliquer une classe à la note de bas de page et de lui donner l'apparence d'une classe dans la couche de présentation: le CSS.
Je dirais que utilisez <em> pour souligner les éléments en ligne. Utilisez une classe pour les éléments de bloc tels que les blocs de texte. CSS ou non, le texte doit encore être tagué. 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 accentuez le texte pour N'IMPORTE QUELLE raison, vous pouvez utiliser <em> ou une classe qui met votre texte en italique.
C'est OK pour enfreindre les règles parfois!