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-family
qui permet de choisir la police de caractères. - La propriété
color
qui permet de choisir la couleur du texte. - La propriété
font-size
qui permet de choisir la taille du texte. - La propriété
font-style
qui permet de mettre un texte en italique. - La propriété
font-weight
qui 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
strong
est 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:bold
intervient 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 points
en haut et à droite. - Vous allez dans
Paramètres
puisApparence
. - 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ètres
puisApparence
et 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
em
a 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.