CSS/HTML : Quelle est la manière correcte de rendre un texte italique ?

Question

Quel est le correct Comment rendre un 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 méthode". <i> n'a aucune signification sémantique et ne fait que transmettre l'effet de présentation en rendant le texte italique. D'après ce que je peux voir, c'est clairement faux parce que c'est non sémantique.

<em>

Il s'agit d'un balisage sémantique à des fins de pure présentation. Il se trouve que <em> rend par défaut le texte en italique et est donc souvent utilisé par ceux qui sont conscients que <i> devrait être évitée, mais qui ne connaissent pas sa signification sémantique. Tout texte en italique n'est pas en italique parce qu'il est mis en valeur. Parfois, il peut s'agir de l'exact opposé, comme un aparté ou un chuchotement.

<span class="italic">

Ceci utilise une classe CSS pour placer la présentation. Cette méthode est souvent présentée comme la bonne, mais là encore, elle me semble erronée. Cela ne semble pas avoir plus de signification sémantique que <i> . Mais, s'écrient ses partisans, il est beaucoup plus facile de modifier ultérieurement tout votre texte en italique si vous voulez, par exemple, le mettre en gras. Pourtant, ce n'est pas le cas, car je me retrouverais alors avec une classe appelée "italique" qui rendrait le texte gras. En outre, on ne voit pas très bien pourquoi je voudrais changer tout le texte en italique sur mon site Web ou, du moins, on peut penser à des cas où cela ne serait ni souhaitable ni nécessaire.

<span class="footnote">

Cela utilise une classe CSS pour la sémantique. Jusqu'à présent, cette méthode semble être la meilleure, mais elle présente 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 en bas de page est-il vraiment une note de bas de page ? Ou est-ce un aparté ? Ou encore quelque chose d'entièrement différent. Peut-être n'a-t-il pas de signification particulière et doit-il être rendu en italique uniquement pour le séparer, du point de vue de la présentation, du texte qui le précède.

2. Le sens sémantique peut changer lorsqu'il n'est pas présent en force suffisante. Disons que j'ai accepté le terme "note de bas de page" sans autre raison que le fait que le texte se trouve en bas de la page. Que se passe-t-il lorsque, quelques mois plus tard, je veux ajouter plus de texte en bas de page ? Ce n'est plus une note de bas de page. Comment pouvons-nous choisir une classe sémantique qui soit moins générique que <em> mais évite ces problèmes ?

Résumé

Il semble que l'exigence de sémantique soit trop contraignante dans de nombreux cas où le désir de rendre quelque chose en italique n'est pas censé porter une signification sémantique.

En outre, le désir de séparer le style de la structure a conduit à présenter le CSS comme un remplacement de l'ISO. <i> alors qu'il y a des occasions où cela serait en fait moins utile. Il me reste donc l'humble <i> et je me demande si ce raisonnement est la raison pour laquelle elle est laissée dans la spécification HTML5.

Existe-t-il de bons articles de blog ou des articles sur ce sujet ? Peut-être par ceux qui ont pris part à la décision de conserver/créer la <i> tag ?

Answer 1

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

1. Si vous voulez mettre en valeur une phrase, utilisez <em> .
2. El <i> a un nouvelle signification de HTML5 Cette balise représente "un passage de texte dans une voix ou une humeur différente". Vous devriez donc utiliser cette balise pour des choses telles que des pensées, des 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, de chansons ou de films ; utilisez la balise <cite> pour cela).
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 le plus large, à savoir p.intro { font-style: italic; }

Answer 2

<i> n'est pas faux parce qu'il est non sémantique. Il est mauvais (généralement) parce qu'il est présentatif. La séparation des préoccupations signifie que les informations de présentation doivent être transmises par CSS.

L'attribution de noms en général peut être délicate, et les noms de classes ne font pas exception, mais c'est néanmoins ce que vous devez faire. Si vous utilisez l'italique pour qu'un bloc se démarque du corps du texte, le nom de classe "flow-distinctive" sera peut-être approprié. Pensez à la réutilisation : les noms de classe servent à catégoriser - où voulez-vous faire la même chose ? Cela devrait vous aider à identifier un nom approprié.

<i> est inclus dans HTML5, mais on lui donne une sémantique spécifique. Si la raison pour laquelle vous marquez quelque chose en italique répond à l'une des sémantiques identifiées dans la spécification, il serait approprié d'utiliser <i>. Sinon, non.

Answer 3

Je ne suis pas un expert mais je dirais que si vous voulez vraiment être sémantique, vous devriez 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 humains le verront en italique) et l'élément property y href sont liés à une définition de ce qu'est l'italique (pour les machines).

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

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

Answer 4

Tl;dr

La bonne façon de rendre un texte italique est d'ignorer le problème jusqu'à ce que vous arriviez au CSS, puis de le styliser en fonction de la sémantique de la présentation. Les deux premières options que vous avez proposées peuvent être correctes en fonction des circonstances. Les deux dernières sont mauvaises.

Explication plus longue

Ne vous souciez pas de la présentation lorsque vous écrivez le balisage. Ne pensez pas en termes d'italique. Pensez en termes de sémantique. S'il faut mettre l'accent sur l'accentuation, alors c'est une em . Si c'est tangentiel au contenu principal, alors c'est un aside . Peut-être qu'il sera en gras, peut-être qu'il sera en italique, peut-être qu'il sera vert fluo. Cela n'a pas d'importance lorsque vous écrivez le balisage.

Lorsque vous parvenez au CSS, il se peut que vous ayez déjà un élément sémantique pour lequel il est logique de mettre l'italique pour toutes ses occurrences dans votre site. em est un bon exemple. Mais peut-être que vous voulez que tous aside > ul > li sur 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 Chèvre mécontent i est sémantique en HTML5. La sémantique me semble cependant un peu étroite. L'utilisation sera probablement rare.

La sémantique de em ont été modifiées dans HTML5 pour mettre l'accent sur l'accentuation. strong peut également être utilisé pour montrer l'importance. strong peut être en italique plutôt qu'en gras si c'est le style que vous souhaitez lui donner. 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 à arrêter de penser en fonction des défauts. (Bien que il y a quelques mises en garde .)

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

class="footnote" émule la sémantique des balises, ce qui est également incorrect. Votre CSS pour la note de bas de page ne doit pas être complètement unique pour votre note de bas de page. Votre site aura l'air trop désordonné si chaque partie est stylisée différemment. Vous devriez avoir des modèles visuels dispersés dans vos pages que vous pouvez transformer en classes CSS. Si le style de vos notes de bas de page et de vos guillemets est très similaire, vous devriez regrouper les similitudes dans une seule classe plutôt que de vous répéter sans cesse. Vous pourriez envisager d'adopter les pratiques de l'OOCSS (liens ci-dessous).

La séparation des préoccupations et la sémantique sont importantes pour HTML5. Les gens ne réalisent pas toujours 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 la présentation (CSS) et la sémantique du comportement (Javascript). Elles ont toutes leur propre sémantique distincte à laquelle il est important de prêter attention pour la maintenabilité et pour rester DRY.

Ressources de l'OOCSS

• CSS orienté objet
• Introduction au CSS orienté objet (OOCSS)
• Comment écrire un CSS orienté objet
• Démarrer avec le CSS orienté objet (OOCSS)
• CSS orienté objet : Quoi, comment et pourquoi
• Plonger dans le CSS orienté objet

Answer 5

Peut-être n'a-t-il pas de signification particulière et ne doit-il être rendu en italique que pour le séparer, du point de vue de la 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 partie du texte est un peu bizarre parce que je l'ai mis en italique sans raison.

Mais je comprends votre point de vue. Il n'est pas rare que les designers produisent des designs qui varient visuellement, sans varier de manière significative. Je l'ai constaté le plus souvent avec les boîtes : les concepteurs nous proposent des boîtes avec diverses combinaisons de couleurs, de coins, de dégradés et d'ombres portées, sans qu'il y ait de relation entre les styles et le sens du contenu.

Comme il s'agit de styles relativement complexes (avec les problèmes associés à Internet Explorer) réutilisés à différents endroits, nous créons des classes telles que box-1 , box-2 afin que nous puissions réutiliser les styles.

L'exemple spécifique consistant à rendre un texte en italique est trop trivial pour qu'on s'en préoccupe. Il vaut mieux laisser ce genre de détails à l'appréciation des détraqués de la sémantique.