HTML : les codes essentiels

Jean-Philippe Argaud, jean-philippe.argaud@ifrance.com,
Version 3.1, 17 Novembre 1998

Avant de rentrer dans le détail des commandes (ou tags) du langage HTML, nous donnons ici quelques indications générales. En premier lieu, le langage HTML est un langage de description de la structure du document, et non pas de sa forme visuelle ou imprimée. Cela veut dire qu'il faut se préoccuper (essentiellement) de la structure de son texte, et pas (ou le moins possible) de son rendu visuel final. Ce point est essentiel pour bien utiliser le HTML et assurer une excellente portabilité des textes ainsi produits, qui ne dépendront plus d'un logiciel ou d'un système d'exploitation spécifiques pour leur utilisation. Cela assure plus précisément une plus grande pérennité des textes, ce qui est essentiel si l'on pense en termes de conservation et transmission de l'information.

De manière pratique, tous les tags HTML se présentent sous la forme d'un code d'ouverture noté <...> associé à un code de fermeture </...>. Certains codes d'ouverture ne sont associé à aucun code de fermeture (comme <HR>) ou peuvent ne pas se fermer même s'ils ont un code de fermeture associé (comme <P> ou <LI>) car la fermeture est la plupart du temps non ambigue.

Les liens hypertextes

Les liens hypertextes permettent de relier un page à d'autres, en local ou sur le réseau Internet, par la référence appropriée à une adresse sous la forme :

<A HREF="adresse ou nom de page">

mot ou groupe de mots

</A>

mot ou groupe de mots

Un lien hypertexte en local ne nécessite que la position relative de l'autre page HTML dans l'arborescence de fichiers et de répertoires du disque dur. Le lien apparaît comme un groupe de mots soulignés en bleu usuellement.

C'est cet outil de liaison dynamique entre pages qui transforme le réseau Internet en une gigantesque "toile d'araignée" (Web en anglais) de pages HTML inter-connectées en 1 clic de souris, et qui en fait sa puissance en tant qu'"encyclopédie mondiale".

Les niveaux de titre

Les titres se définissent à l'aide de codes <H*>, du premier niveau au sixième :

<H1> et </H1> : encadrent un titre de niveau 1
<H2> et </H2> : encadrent un titre de niveau 2
<H3> et </H3> : encadrent un titre de niveau 3
...

Les titres sont soit alignés à gauche, soit à droite, soit centré, selon le code rajouté : <H* ALIGN=LEFT>, <H* ALIGN=RIGHT>, <N* ALIGN=CENTER>. Par défaut, ils sont alignés à gauche.

Les paragraphes

La gestion des paragraphes se fait avec deux types de codes :

<P> : définit le début d'un paragraphe (qui se ferme avec </P>, qui n'est pas indispensable)
<BR> : passe à la ligne.

Sauf nécessité, il faut toujours utiliser <P> pour définir un paragraphe. Attention, il est inutile de terminer un paragraphe par <BR> puisque le suivant passe automatiquement à la ligne. Ce tag <BR> est rarement utile, il vaut mieux l'éviter sauf besoin véritable explicite.

Le paragraphe est soit aligné à gauche, soit à droite, soit centré, selon le code rajouté : <P ALIGN=LEFT>, <P ALIGN=RIGHT>, <P ALIGN=CENTER>. Par défaut, il est aligné à gauche.

L'enrichissement

L'enrichissement peut se faire de deux manières différentes, structurelle (conseillée) ou visuelle (déconseillée). L'enrichissement structurel s'indique en entourant le texte choisi des codes suivants :

<STRONG> et </STRONG> pour la mise en évidence forte, ce qui donne ceci (visuellement souvent rendu en gras)
<EM> et </EM> l'insistance ou l'accentuation de propos, ce qui donne ceci (visuellement souvent rendu en italique)

L'enrichissement visuel, c'est-à-dire le gras, l'italique,... s'indique en entourant le texte choisi des codes suivants :

<B> et </B> pour le gras, ce qui donne du gras
<I> et </I> pour l'italique, ce qui donne de l'italique
<S> et </S> pour le barré, ce qui donne ~~ceci~~
<TT> et </TT> pour les caractères à espacement fixe, ce qui donne ceci
<U> et </U> pour le soulignement, ce qui donne ceci (c'est particulièrement déconseillé car c'est la marque usuelle des liens)

Autres codes

Pour qu'un document HTML soit complet, il doit présenter un entête et un pied de page conformes, contenant en particulier les ouvertures et fermetures d'élements de titre et de corps du document. Un entête type a la forme suivante, avec le code BGCOLOR="#FFFFFF" qui permet de demander un fond blanc :

<HTML> <HEAD> <TITLE> . . . </TITLE> <HEAD> <BODY BGCOLOR="#FFFFFF">

et une fin de texte type a la forme :

</BODY> </HTML>

Les principaux autres codes utiles sont les suivants :

<HR> permet d'insérer une ligne horizontale en grisé. Une extension courante est la ligne franche, obtenue en rajoutant un attribut NOSHADE, par la commande <HR NOSHADE>.
<UL> <LI>... <LI>... </UL> est une série de codes qui permettent d'insérer des listes à puces, comme celles qui débutent les listes de ce document. Il y a une puce par code <LI>. Attention, la liste ne s'ouvre par <UL> et ne se ferme par </UL> qu'une seule fois par série de puces !
<OL> <LI>... <LI>... </OL> est une série de codes qui permettent eux d'insérer des listes numérotées. Il y a un numéro par code <LI>. Remarque identique pour les ouverture et fermeture.
  permet par exemple d'insérer un espace insécable avant un ":" ou un ";" (il ne faut alors par de séparation entre   et le signe qui suit, comme par exemple  :), & permet d'insérer un "&".
<PRE>...<PRE> permet d'insérer une zone de texte préformatté, qui sera affichée comme un paragraphe de listing de programmation par exemple.
Il existe d'autres codes permettant d'insérer des caractères particuliers. On se réfèrera pour cela aux documents de définition du HTML 3.2 ou 4.0, aux adresses http://www.htmlhelp.com/ ou http://www.w3.org/TR/ du W3C, comité normatif du HTML.