Ce chapitre, vous permettra de mettre en évidence la structure d'un document HTML avec des en-têtes hiérarchisés et des paragraphes. Vous allez commencer à pouvoir écrire un document et le formater en utilisant HTML.
Éditez le fichier test.html et remplacez le contenu qui s'y trouve par le texte suivant :
<h1>Ce titre est le plus gros</h1>
<h2>Celui là est moins important</h2>
<h3>Mais plus imporant que celui là</h3>
<h4>Encore plus petit</h4>
<h5>Toujours plus petit</h5>
<h6>C'est le dernier niveau de titre</h6>
<p>Et là c'est une balise pour insérer les paragraphes.</p>Astuce : Pour ne pas oublier de fermer vos balises, écrivez la balise d'ouverture puis la balise de fermeture et enfin le texte. 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. Utlisez votre clavier plutôt que la souris. Vous travaillerez plus rapidemment.
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. Il permet d'éditer facilement un document en caractérisant le contenu. Si on écrit une citation, on utliisera une balise de citation, si on écrit un auteur d'un document, on utlisera la balise pour les auteurs, et ainsi de suite. Le HTML n'a pas vocation à définir l'apparence visuel d'un document, à savoir les couleurs utilisées, les polices et le positionnement. La technologie spécialement conçue pour modifier l'apparence visuelle d'une page Web est le langage de style CSS, qui permet de créer des feuilles de style .
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 alourdissez votre code et cela rend la maintenance et les mises à jour de votre site beaucoup plus difficile.
Vous en savez maintenant assez pour commencer à créer un premier projet en HTML.