Mettre votre Texte en Forme
Comme je l'ai écrit précédemment, le langage HTML doit être utilisé uniquement pour afficher du contenu dans une page Web, alors qu'il faut utiliser des feuilles de styles CSS pour définir son design. Pour cette raison, la mise en forme du texte est à la limite entre le HTML et le CSS. Par exemple, changer la couleur d'une phrase, n'en change pas la substance ni le sens et doit ainsi être réalisé à l'aide d'une feuille de style. Néanmoins, mettre du texte en gras afin d'ajouter une emphase doit se faire en HTML puisqu'il s'agit d'en modifier son interprétation.
Ajouter une Emphase
Si vous souhaitez ajouter une emphase sur un mot, une phrase ou un paragraphe, vous pouvez utiliser les balises <em> et <strong>. La balise <em> est utilisée pour marquer l'emphase, tandis que la balise <strong> la renforce. La plupart des navigateurs affichent du texte avec emphase en italique et en gras pour une forte emphase. Toutefois, le rendu des navigateurs Web n'est pas toujours le même et il est plus prudent de le spécifier à l'aide d'une feuille de style CSS.
<p>Vous devez <em>toujours</em> créer des sites Web optimisés pour n'importe quel navigateur Web.</p>
Vous devez toujours créer des sites Web optimisés pour n'importe quel navigateur Web.
<p>Ce site Web est conforme aux <strong>standards W3C</strong>.</p>
Ce site Web est conforme aux standards W3C.
Il est important d'éviter d'employer l'emphase quand vous ne voulez obtenir qu'un effet visuel; dans ce cas, utilisez une feuille de style CSS.
Les Références
Contrairement à ce que peut laisser entendre son nom, la balise <cite> ne sert pas à afficher une citation mais une référence à une source, comme un livre, un film ou un tableau. Elle a pour conséquence de mettre le texte en italique :
<p>Avant de poser une question à un hacker, lisez bien <cite>Comment poser les questions de manière intelligente</cite> de Eric S. Raymond.</p>
Avant de poser une question à un hacker, lisez bien Comment poser les questions de manière intelligente de Eric S. Raymond.
Les Citations
Afin d'afficher une citation, le langage HTML fournit deux balises : <blockquote> pour les longues citations qui requièrent un ou plusieurs paragraphes, et <q> pour les citations courtes. Le premier exemple est un extrait de 1984 de George Orwell utilisant la balise <blockquote>, alors que le second exemple est une citation courte, à l'intérieur d'un paragraphe, effectuée à l'aide de la balise <q> :
<blockquote cite="http://cf.geocities.com/coolmicro2/html/orwell_1984.html#_Toc120363792"><p>Il regarda l'énorme face. Il lui avait fallu quarante ans pour savoir quelle sorte de sourire se cachait sous la moustache noire. Ô cruelle, inutile incompréhension ! Obstiné ! volontairement exilé de la poitrine aimante ! Deux larmes empestées de gin lui coulèrent de chaque côté du nez. Mais il allait bien, tout allait bien. La lutte était terminée. Il avait remporté la victoire sur lui-même. Il aimait Big Brother.</p></blockquote>
Il regarda l'énorme face. Il lui avait fallu quarante ans pour savoir quelle sorte de sourire se cachait sous la moustache noire. Ô cruelle, inutile incompréhension ! Obstiné ! volontairement exilé de la poitrine aimante ! Deux larmes empestées de gin lui coulèrent de chaque côté du nez. Mais il allait bien, tout allait bien. La lutte était terminée. Il avait remporté la victoire sur lui-même. Il aimait Big Brother.
<p>Comme George Orwell l'écrit dans <cite>1984</cite> : <q cite="http://cf.geocities.com/coolmicro2/html/orwell_1984.html#_Toc120363788">Qui commande le passé commande l'avenir; qui commande le présent commande le passé</q>.</p>
Comme George Orwell l'écrit dans 1984 : Qui commande le passé commande l'avenir; qui commande le présent commande le passé
.
Le Texte en Indice et en Exposant
Il est parfois utile de pouvoir mettre du texte en indice ou en exposant, par exemple dans des équations mathématiques, des formules chimiques ou autres notations scientifiques. Le langage HTML permet de le faire à l'aide des balises <sup> et <sub>. Voici quelques exemples :
<p>1 km = 1000 m = 10<sup>3</sup> m</p>
1 km = 1000 m = 103 m
<p>La molécule d'eau a pour formule chimique H<sub>2</sub>O.</p>
La molécule d'eau a pour formule chimique H2O.
Le Texte en Gras, en Italique, Souligné et la Taille et Couleur du Texte
La W3C recommande l'utilisation du HTML uniquement pour afficher du contenu dans une page Web et l'utilisation des feuilles de styles CSS pour tous les effets visuels. C'est pourquoi la mise en gras ou en italique pose parfois problème. La règle est la suivante : lorsque le but est purement artistique, utilisez les feuilles de style CSS, sinon utilisez les balises <strong> et <em>, selon la force que l'on veut donner au texte en question.
Que deviennent les balises <b> et <i> dans tout ça ?
Les Webmasters utilisent souvent les balises <b> et <i> pour mettre du texte respectivement en gras et en italique. La plupart du temps ces balises sont adoptées pour donner de l'importance au texte. Pourtant, <b> et <i> sont bel et bien des balises dont le seul but est de créer une mise en forme purement visuelle. Bien qu'elles ne soient pas considérées comme dépréciées ni obsolètes par la W3C, leur utilisation est déconseillée.
Il est tout de même à noter qu'il existe un flou quant à leur utilité. En effet, d'après les recommandations de la W3C, puisque les balises <b> et <i> ne servent qu'à changer l'apparence du texte sans en modifier le sens, il est prérable de remplacer leur utilisation par l'emploi de feuilles de styles CSS.
Le Soulignement, la Taille et la Couleur du Texte
Si les balises <b> et <i> ne sont pas dépréciées ni obsolètes, les balises <u>, pour du texte souligné, et <font>, pour modifier taille, couleur ou police de caractères du texte, le sont. Vous devez donc avoir recours aux feuilles de style CSS pour souligner du texte ou en changer la taille, la couleur ou la police de caractères.
© Copyright 2005, 2006, 2007 Erwan Monier