Afficher du Texte

Une bonne page Web doit avant tout avoir un contenu intéressant. La plupart des informations sur le Web étant textuelles, il est primordial de savoir afficher du texte en HTML. Par ailleurs, une page Web bien organisée, avec un titre, des en-têtes et de nombreux paragraphes, est facile à lire. La structure de vos pages ne doit surtout pas ressembler à celle d'un livre, avec de longs blocs de texte, car lire sur un écran d'ordinateur est bien plus fatiguant. Pour cette raison, le langage HTML propose des balises pour afficher des en-têtes, des paragraphes ou encore des lignes horizontales pour séparer des sections de texte.

Les Paragraphes

Les paragraphes sont une part essentielle d'un page Web puisque sans paragraphes vos documents ne seraient que de longs blocs de texte, particulièrement difficiles à lire. Voici un exemple d'utilisation de la balise de paragraphe <p> :

<p>Voici un exemple de paragraphe.</p><p>Voici un exemple de paragraphe.</p>

Voici un exemple de paragraphe.

Les En-Têtes de Sections

Pour une organisation claire de vos pages Web, il est fortement conseillé d'utiliser des en-têtes de sections qui servent de titres et sous-titres dans vos documents. Le langage HTML permet d'utiliser 6 niveaux d'en-têtes de sections, numérotées de 1 à 6 (1 étant la plus grande), à l'aide des balises <h1>,<h2>,<h3>,<h4>,<h5> et <h6>. Les navigateurs Web affichent les en-têtes de sections en gras avec des polices de caractère plus ou moins grande, selon le niveau de l'en-tête.

<h1>En-Tête de Section H1</h1>

En-Tête de Section H1

<h2>En-Tête de Section H2</h2>

En-Tête de Section H2

<h3>En-Tête de Section H3</h3>

En-Tête de Section H3

<h4>En-Tête de Section H4</h4>

En-Tête de Section H4

<h5>En-Tête de Section H5</h5>

En-Tête de Section H5

<h6>En-Tête de Section H6</h6>

En-Tête de Section H6

Il est à souligner que les en-têtes de sections ne doivent pas simplement mettre du texte en gras ou ajuster la taille de votre police de caractère. Elles doivent représenter la structure logique de vos documents et contenir vos mots-clés. La plupart des moteurs de recherche les considèrent avec un grand soin lors de l'indexation de pages Web. Pour être sûr que vous les avez utilisées correctement, rédigez un résumé de votre document à partir de ses en-têtes de sections et vérifiez qu'il reflète efficacement l'organisation et le contenu de votre page Web.

Les Retours à la Ligne

Il est aussi possible d'effectuer un simple retour à la ligne à l'aide de la balise <br/>, identique à la touche Entrée de votre clavier sous n'importe quel traitement de texte. Contrairement aux paragraphes, le retour à la ligne n'entraîne pas pour autant de saut de ligne.

<p>Exemple d'un paragraphe avec<br/>un retour à la ligne.</p>

Exemple d'un paragraphe avec
un retour à la ligne.

Vous pouvez remarquer que le retour à la ligne n'a pas de balise de fermeture. À la place, la balise se termine par />, qui tient lieu de fermeture. Même si un grand nombre de guides HTML adopte la balise <br>, la W3C recommande dans sa dernière version HTML l'utilisation de <br/>.

Les Espaces Insécables

Dans certains cas, il faut empêcher de séparer deux mots en fin de ligne. Pour cela, on utilise un espace insécable, codé en langage HTML par &nbsp (de l'anglais Non-Breaking SPace). Les espaces insécables sont utiles, entre autres, pour séparer un nombre écrit en chiffres du mot auquel il se rapporte. Cela s'applique particulièrement aux noms d'unités et de monnaies, à plus forte raison quand ces unités sont exprimées sous forme de symboles. Ils sont aussi utiles avant les signes de ponctuation : ; ! et ?.

<p>Exemple d'utilisation de l'espace insécable : le rayon de la Terre est 6378 km.</p>

Exemple d'utilisation de l'espace insécable : le rayon de la Terre est 6378 km.

Il vous suffit de réduire la largeur de la fenêtre de votre navigateur pour constater le résultat.

Les Lignes Horizontales

La balise <hr/> permet de tracer une ligne horizontale qui peut séparer des sections, par exemple le pied de page d'un document. Tout comme la balise de retour à la ligne, la balise de ligne horizontale n'a pas de balise de fermeture mais elle doit se terminer par />.

<p>Voici un exemple de deux paragraphes séparés par une ligne horizontale.</p>
<hr/>
<p>Voici un exemple de deux paragraphes séparés par une ligne horizontale.</p>

Voici un exemple de deux paragraphes séparés par une ligne horizontale.

Le Texte Préformaté

Si vous voulez afficher du texte préformaté, il vous suffit d'utiliser la balise <pre>. Tout ce que vous écrivez entre les balises <pre> et </pre> sera alors affiché tel quel, espaces, sauts de ligne et retours à la ligne inclus.

<pre>
Cet exemple montre du texte pr&eacute;format&eacute;.
     ^        ^            ^
   sujet    verbe     objet direct
</pre>

Cet exemple montre du texte préformaté.
     ^        ^            ^
   sujet    verbe     objet direct

Le principal intérêt de la balise de texte préformaté est qu'elle applique une police à pas fixe, c'est-à-dire que la largeur du l et la même que celle du X ce qui peut faciliter l'alignement de mots ou de données.

<< Les Caractères Spéciaux

Mettre votre Texte en Forme >>