À la fin de ce chapitre, vous saurez comment mettre en évidence la structure d'un document avec des en-têtes hiérarchisés et des paragraphes. Vous pourrez même commencer un petit projet.
Éditez le fichier test.html et remplacez le contenu qui s'y trouve par le texte suivant :
<h1>En-tête de niveau 1</h1>
<h2>En-tête de niveau 2</h2>
<h3>En-tête de niveau 3</h3>
<h4>En-tête de niveau 4</h4>
<h5>En-tête de niveau 5</h5>
<h6>En-tête de niveau 6</h6>
<p>Paragraphe</p>Astuce : Inutile de tout saisir à la main : faites un copier-coller ! Pour ce faire, sélectionnez le texte voulu, appuyez sur Ctrl+C, basculez vers Bloc-notes et appuyez sur Ctrl+V.
Enregistrez votre travail, visualisez le fichier dans votre navigateur et observez. Vous venez de créer des en-têtes de niveau 1 à 6 et un paragraphe contenant le mot « Paragraphe ».
Astuce : Pour aller encore plus vite, enregistrez votre travail en appuyant sur Ctrl+s, basculez d'une application à l'autre avec Alt+Tab et actualisez votre navigateur en appuyant sur F5.
Lorsque vous mettez un texte en forme dans un traitement de texte, vous faites ressortir les divers niveaux d'en-tête en jouant avec la taille des caractères, le gras, l'italique, la couleur, etc. En somme, vous appliquez des styles et ce sont ces derniers qui servent à différencier vos niveaux d'en-tête par la suite.
Le HTML fonctionne d'une toute autre façon. Il ne sert pas d'abord à styler le contenu d'un texte, mais à en décrire la structure logique. Si le texte à baliser est un paragraphe, alors on le balise avec l'élément p. S'il s'agit d'un en-tête de niveau 1, alors on le balise avec l'élément h1, d'un en-tête de niveau 2, avec l'élément h2, etc.
Le HTML est conçu pour mettre en évidence la structure logique d'un document. La technologie spécialement conçue pour modifier l'apparence visuelle d'une page Web est le langage de style CSS.
Le jeu de balises du HTML permet de créer jusqu'à 6 niveaux d'en-têtes. Dans la pratique, vous en utiliserez rarement plus de 3.
Les éléments h1 à h6 fonctionnent comme les titres dans une table des matières. De même qu'il n'y aurait pas de sens à commencer un dénombrement à 1.3 pour sauter ensuite à 1.5 sans qu'il y ait de 1.4 entre les deux, de même en est-il pour l'ordonnance logique des niveaux d'en-têtes.
Concrètement, voici à quoi pourrait ressembler un balisage correct avec des paragraphes et des en-têtes de niveau 1 à 4 :
<h1>Titre du livre</h1>
<h2>Introduction</h2>
<p>…</p>
<h2>1. Chapitre premier</h2>
<h3>1.1 Première section</h3>
<h4>1.1.1 Article premier</h4>
<p>…</p>
<h4>1.1.2 Article second</h4>
<p>…</p>
<h3>1.2 Deuxième section</h3>
<h4>1.2.1 Article premier</h4>
<p>…</p>
<h4>1.2.2 Article second</h4>
<p>…</p>
<h2>3. Chapitre troisième</h2>
<h3>3.1 Première section</h3>
<p>…</p>
<h3>3.2 Deuxième section</h3>
<p>…</p>
<h2>Conclusion</h2>
<p>…</p>Logiquement, on peut donc sauter de h4 à h2 sans passer par un h3. Mais on ne peut pas se dispenser d'un h3 intermédiaire et sauter de h2 à h4 sans faire violence à la manière dont les éléments d'en-têtes ont été conçus pour fonctionner.
Rappelez-vous : les navigateurs ne tiennent pas compte des retours à la ligne, des tabulations et des espaces multiples. Profitez-en pour disposez vos lignes de code de manière à ce qu'il soit facile de s'y retrouver.
Le HTML n'est pas un langage de présentation, mais un langage de balisage. Il sert à mettre en évidence la structure logique d'un texte et non à appliquer des styles. Des concepteurs mal formés détournent certains éléments HTML de leur nature pour des fins de présentation ou de mise en page. Ne les imitez pas.
Vous en savez maintenant assez pour commencer à créer une version HTML de votre curriculum vitæ. Ce sera un très bon exercice pour assimiler la matière vue jusqu'à présent.
Une suggestion : pensez à donner un nom significatif à votre fichier. Par exemple, le format cv-aaaa-mm-jj.html vous permettra de savoir à la fois qu'il s'agit d'un CV et à quand il remonte.
À jour le 4 mars 2006