Au sein de vos
paragraphes, certains mots sont parfois plus importants que d'autres et
vous aimeriez les faire ressortir. HTML vous propose différents moyens
de mettre en valeur le texte de votre page.
Mettre un peu en valeur
Pour mettre
un peu en valeur votre texte, vous devez utiliser la balise
<em> </em>.
Son utilisation est très simple : entourez les mots à mettre en valeur
par ces balises, et c'est bon ! Je reprends un peu l'exemple de tout à
l'heure, et j'y mets quelques mots en évidence :
Code : HTML - Sélectionner 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <html>
<head>
<meta charset="utf-8" />
<title>Emphase</title>
</head>
<body>
<p>
Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test, alors <em>soyez indulgents</em> s'il vous plaît, j'apprends petit à petit comment ça marche.
</p>
</body>
</html>
|
Comme vous pouvez le voir, utiliser la balise
<em> a pour conséquence de mettre le texte en
italique.
En fait, c'est le navigateur qui choisit comment afficher les mots. On
lui dit que les mots sont assez importants et pour faire ressortir cette
information, il change l'apparence du texte en utilisant l'italique.
Mettre bien en valeur
Pour mettre un texte bien en valeur, on utilise la balise
<strong> qui signifie "fort", ou "important" si vous préférez. Elle s'utilise exactement de la même manière que
<em> :
Code : HTML - Sélectionner 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <html>
<head>
<meta charset="utf-8" />
<title>Forte emphase</title>
</head>
<body>
<p>
Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test, alors <strong>soyez indulgents</strong> s'il vous plaît, j'apprends petit à petit comment ça marche.
</p>
</body>
</html>
|
Vous voyez sûrement le texte s'afficher en gras. Là encore, le gras n'est qu'une
conséquence. Le navigateur a choisi d'afficher en gras les mots importants pour les faire plus ressortir.
La balise
<strong>
ne signifie pas "mettre en gras" mais "important". On pourra décider
plus tard en CSS d'afficher les mots "importants" d'une autre façon que
le gras si on le souhaite.
Marquer le texte
La balise
<mark>
permet de faire ressortir visuellement une portion de texte. Le texte
n'est pas forcément considéré comme important mais on veut qu'il se
distingue bien du reste du texte. Cela peut être utile pour faire
ressortir un texte pertinent après une recherche sur votre site par
exemple.
Code : HTML - Sélectionner 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <html>
<head>
<meta charset="utf-8" />
<title>Marquage du texte</title>
</head>
<body>
<p>
Bonjour et bienvenue sur mon site !<br />
Ceci est mon premier test, alors <mark>soyez indulgents</mark> s'il vous plaît, j'apprends petit à petit comment ça marche.
</p>
</body>
</html>
|
Par défaut,
<mark>
a pour effet de surligner le texte. On pourra changer l'affichage en
CSS (décider de surligner dans une autre couleur, décider d'encadrer le
texte, etc.). C'est le même principe que ce que je vous disais pour les
balises précédentes : elles indiquent le
sens des mots et non pas comment ceux-ci doivent s'afficher.
N'oubliez pas : HTML pour le fond, CSS pour la forme
Le rôle des balises est d'indiquer le sens
du texte. Ainsi, <strong>
indique à l'ordinateur "Ce texte est important". C'est tout, même si
pour vous le le texte apparaît en gras (c'est une erreur
de croire que cette balise sert à ça).
À quoi ça sert que l'ordinateur sache qu'un texte est important ? De
nombreux programmes analysent les codes source des pages web, à commencer
par les robots de moteurs de recherche. Ces robots parcourent le web
en lisant le code HTML de tous les sites. C'est le cas des robots de
Google et de Bing par exemple. Les mots-clés "importants" ont tendance
à avoir plus de valeur à leurs yeux, donc si quelqu'un fait une recherche
sur ces mots il a plus de chances de tomber sur votre site.
Mais alors, comment on fait pour mettre spécifiquement
en gras, pour écrire en rouge, et tout et tout ? Tout cela se fait en
CSS. Souvenez-vous :
- Le HTML définit le fond (contenu, logique des éléments)
- Le CSS définit la forme (apparence)