open

Styler du Texte en CSS ou mettre en valeur du Texte en HTML ?

#1 Quelle est la différence ? open

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 ? open

Pour styler du Texte en CSS on a essentiellement :

  1. la propriété font-family qui permet de choisir la police de caractères.
  2. la propriété color qui permet de choisir la couleur du texte.
  3. la propriété font-size qui permet de choisir la taille du texte.
  4. la propriété font-style qui permet de mettre un texte en italique.
  5. 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 ? open

  1. Les titres h1 à h6.
  2. L'élément em.
  3. L'élément strong.

On va étudier l'ensemble de ces éléments et 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 c'est à dire du sens donné à une partie du document lorqu'elle est balisée avec un élément strong ou un élément em.

#4 Styler du texte avec font-style open

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.

Tester le code

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 où 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.

Tester le code

#5 Mettre en valeur du texte avec em open

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 ? Et 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.

Tester le code.

#6 Styler du texte avec font-weight open

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.

Tester le code

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 avec l'exemple sur la propriété font-style avec la valeur normal.

Tester le code

#7 Mettre en valeur du texte avec strong open

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.

Tester le code

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 :

  1. L'élément strong est pris en compte par les moteurs de recherche. C'est un des moyens de donner de l'importance à des mots-clés sur lesquels vous voulez positionner votre page.
  2. La propriété font-weight:bold intervient uniquement sur le rendu visuel.

#8 Utiliser le font-size open

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).

Tester le code

Si c'est le cas vous continuez sinon si vous êtes sous Chrome :

  1. Vous cliquez sur les trois petits points en haut et à droite.
  2. Vous allez dans Paramètres puis Apparence.
  3. Vous choisissez la taille de police Moyenne (recommandé).
  4. Maintenant vous cliquez sur bouton "Tester le code" ci-dessus pour comparer les deux tailles de la police de catactè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.
  5. Maintenant au niveau du navigateur vous retournez dans Paramètres puis Apparence et vous choisissez la taille de police à "Très Grande".
  6. 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 des em. 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é par rapport à 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.

Tester le code

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.

Tester le code