La mise en valeur
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.
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>.
Son utilisation est très simple : encadrez les mots à mettre en valeur avec 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
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> <h1>La montagne</h1> <h2>Chez moi</h2> <p>J'aime les <em>diots</em> et la <em>polente</em>.</p> <p>J'aime la montagne et ma Vallée. <br /> La Maurienne, on y est bien. </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.
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
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> <h1>La montagne</h1> <h2>Chez moi</h2> <p>J'aime les <em>diots</em> et la <em>polente</em>.</p> <p>J'aime la <strong>montagne</strong> et ma Vallée. <br /> La Maurienne, on y est bien. </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 ressortir davantage.
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.
La balise <mark> permet de faire ressortir visuellement une portion de texte. L'extrait 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
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> <h1>La montagne</h1> <h2>Chez moi</h2> <p>J'aime les <em>diots</em> et la <em>polente</em>.</p> <p>J'aime la <strong>montagne</strong> et ma <mark>Vallée</mark>. <br /> La Maurienne, on y est bien. </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'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.
Je vais peut-être vous sembler un peu lourd mais il est très important qu'on se comprenne bien car les débutants font souvent la même grosse erreur à ce stade. Ils ont vu les balises <em>, <strong>, <mark>… et ils se disent : « Chouette, j'ai découvert comment mettre en italique, en gras et comment surligner du texte en HTML ! ».
Et pourtant… ce n'est pas à cela que servent ces balises ! Je sais, je sais, vous allez me dire « Oui mais quand j'utilise <strong> le texte apparaît en gras, donc c'est pour mettre en gras. » et pourtant, c'est une erreur de croire que cette balise sert à cela.
Le rôle des balises est d'indiquer le sens du texte. Ainsi, <strong> indique à l'ordinateur « Ce texte est important ». C'est tout.
Et pour montrer que le texte est important, l'ordinateur décide de le mettre en gras (mais un autre navigateur pourrait aussi bien l'écrire en rouge !). La plupart des navigateurs affichent les textes importants en gras, mais rien ne les y oblige.
Je ne comprends pas. À quoi cela sert-il que l'ordinateur sache qu'un texte est important ?
Il n'est pas assez intelligent pour comprendre !
Détrompez-vous ! De nombreux programmes analysent le code 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.
Bien entendu, c'est une explication grossière et il ne faut pas croire qu'utiliser la balise <strong> à tout-va améliorera votre référencement. Il faut simplement faire confiance aux ordinateurs : ils comprennent ce qu'un texte « important » veut dire et peuvent se servir de cette information.
Mais alors, comment fait-on pour mettre spécifiquement en gras, pour écrire en rouge, et tout et tout ?
Tout cela se fait en CSS. Souvenez-vous :
Nous verrons le CSS plus loin, pour l'instant nous nous concentrons sur le HTML et ses balises, qui ont chacune un sens particulier.
On peut donc aussi choisir d'indiquer les mots importants dans une page, sans en modifier l'aspect. Si on fait ça, seuls les moteurs et autres robots verront les mots importants.
Créé avec HelpNDoc Personal Edition: Générateur d'aides CHM gratuit