Styler du Texte en CSS ou mettre en valeur du Texte en HTML ?
#1
Quelle est la différence ?
Mettre en valeur du texte en CSS est une affaire de rendu visuel. Par exemple, vous mettez du texte en rouge. Ce texte aura probablement de l'importance pour vos visiteurs, qui verront que votre texte est en rouge, mais les moteurs de recherche eux ne verront rien.
Mettre en valeur du texte en HTML, par exemple, avec les éléments strong ou em, donne de l'importance à une partie du document, mais cette importance est vue par tous vos visiteurs : moteurs de recherche, synthétiseurs vocaux et internautes.
#2
Quelles sont les propriétés CSS qui permettent de styler du texte ?
Pour styler du Texte en CSS, on a essentiellement :
- La propriété
font-familyqui permet de choisir la police de caractères. - La propriété
colorqui permet de choisir la couleur du texte. - La propriété
font-sizequi permet de choisir la taille du texte. - La propriété
font-stylequi permet de mettre un texte en italique. - La propriété
font-weightqui permet de mettre un texte en gras.
#3
Quels sont les éléments HTML qui permettent de mettre en valeur du texte ?
- Les titres
h1àh6. - L'élément
em. - L'élément
strong.
On va étudier l'ensemble de ces éléments. On va surtout s'attacher à bien faire la différence entre ce qui relève du rendu visuel et ce qui relève de la sémantique. La sémantique, c'est le sens donné à une partie du document lorsqu'elle est balisée avec un élément strong ou un élément em.
#4
Styler du texte avec font-style
Ci-dessous, je vais styler une portion de texte avec un font-style:italic et une autre avec font-style:oblique et on va constater que le rendu visuel est le même.
Ci-dessous, je vais montrer, qu'il est possible d'avoir besoin de mettre un font-style:normal. On pourrait se demander à quoi ça peut servir puisque par défaut le font-style est déjà normal. Alors pour montrer que cela peut être utile, je vais créer une situation dans laquelle un élément reçoit en héritage la propriété font-style:italic.
Plus précisément, ci-dessous, la propriété font-style:italic est posée sur l'élément body. Les deux paragraphes qui sont contenus dans ce body reçoivent tous les deux cette propriété en héritage, car ils sont enfants de ce body.
Ensuite, je vais annuler cet héritage avec un font-style:normal sur le deuxième paragraphe. Si vous ne connaissez pas ce mécanisme, je vous conseille le tutoriel sur l'héritage en HTML / CSS qui vous expliquera tout.
#5
Mettre en valeur du texte avec em
Je vais mettre en valeur du texte en utilisant d'une part, l'élément HTML em et d'autre part, la propriété CSS font-style:italic. Si on regarde ce que ça donne, on constate que c'est le même rendu. Pourquoi ?
En fait, le navigateur a positionné un font-style:italic lorsqu'il a rencontré l'élément em. C'est sa feuille de style par défaut qui fait ça. On pourrait même dire que le navigateur a interprété la sémantique du em pour la traduire par un rendu en italique.
A nous de comprendre que ce n'est pas la même chose. Remarquer bien que les internautes ne peuvent pas faire la différence entre un font-style:italic et un élément HTML em. A qui d'autre ça peut servir ? Eh bien aux moteurs de recherche et aussi aux synthétiseurs vocaux qui écoutent votre site et qui eux détectent cette différence.
Un moteur de recherche se fichera du font-style:italic par contre, il considèrera que les mots qui sont entre les balises em ont une importance particulière.
#6
Styler du texte avec font-weight
Les différentes valeurs du font-weight qui nous intéressent sont le bold et le normal.
Il y a une autre manière de le faire, c'est d'utiliser des chiffres. On met font-weight:400 pour le normal et font-weight:700 pour le bold.
Ci-dessous, on vérifie que bold et font-weight:700, c'est visuellement la même chose.
Ci-dessous, on vérifie que l'héritage d'un font-weight:bold; est masqué par le font-weight:normal;. Le principe au niveau de l'héritage est similaire à ce que nous avons fait un peu plus haut. Je parle de l'exemple sur la propriété font-style avec la valeur normal.
#7
Mettre en valeur du texte avec strong
Je vais mettre en valeur du texte en utilisant d'une part l'élément HTML strong et d'autre part la propriété CSS font-weight:bold.
On constate que c'est le même rendu. Le navigateur, par l'intermédiaire de sa feuille de style par défaut, a positionné un font-weight:bold lorsqu'il a rencontré l'élément strong.
On fait les mêmes remarques que dans le cas précédent :
- L'élément
strongest pris en compte par les moteurs de recherche. C'est un des moyens pour donner de l'importance à des mots-clés sur lesquels vous voulez positionner votre page. - La propriété
font-weight:boldintervient uniquement sur le rendu visuel.
#8
Utiliser le font-size
On va voir deux manières d'utiliser le font-size. Une première en donnant une valeur fixe en pixels. Une deuxième en donnant une valeur relative en em. Attention, il ne s'agit pas ici de l'élément em HTML qu'on a vu au-dessus.
Je vais vous demander d'aller sur ce site et de vérifier que votre taille de police est bien de 16 pixels. Cherchez Root Font Size (à droite et vers le bas).
Si c'est le cas, vous continuez. Sinon si vous êtes sous Chrome :
- Vous cliquez sur les
trois petits pointsen haut et à droite. - Vous allez dans
ParamètrespuisApparence. - Vous choisissez la taille de police
Moyenne (recommandé). - Maintenant, vous cliquez sur bouton "Tester le code" ci-dessus pour comparer les deux tailles de la police de caractères. Pour le moment, c'est le même rendu visuel. On ne voit pas de différence de taille même si c'est assez petit.
- Maintenant, au niveau du navigateur, vous retournez dans
ParamètrespuisApparenceet vous choisissez la taille de police à "Très Grande". - Maintenant, "Tester le code" à nouveau pour comparer à nouveau les deux tailles. Ce que vous devez constater, c'est que la police en
ema suivi le changement de taille de la police du navigateur. C'est tout l'intérêt d'utiliser desem. Le rendu de votre page va s'adapter à la taille de la police du navigateur de chaque visiteur.
Toutefois, les em ont un inconvénient. Regardez le code ci-dessous. En fait, une quantité exprimée en em est un coefficient appliqué à la taille de la police de caractère du parent. Donc ci-dessous, un premier coefficient de 0.75 est appliqué au niveau du body par rapport à la taille de la police par défaut du navigateur. Puis un deuxième coefficient de 0.75 est appliqué au niveau du div par rapport à la police du body. On se retrouve dans le div article avec un coefficient de 0.75 x 0.75 soit 0.5625. Le paragraphe qui est dans le div prend cette taille de police. Il y a donc un effet de cascade de coefficient. Ce qui est souvent gênant.
LA solution ultime est d'utiliser un rem. Un rem est un coefficient qui s'appliquera par rapport à la taille de la police par défaut. Ce sera la seule référence. Vous avez ci-dessous, le même code que le précédent, mais avec des rem. Vous pouvez constater, qu'il n'y a plus cet effet de cascade de coefficient.
