La balise <html> et le doctype

Les premières balises, entre lesquelles toutes les autres viennent s’insérer, sont la balise ouvrante <html>, qui se place au début du fichier juste après le « doctype », et la balise </html> qui se place à la fin.

Le « doctype », qui constitue la déclaration initiale d’un document HTML, indique au navigateur la version du langage utilisé pour qu’il puisse l’interpréter selon les normes de la version concernée.

En effet, depuis ma naissance au début des années 1990, j’ai beaucoup grandi et évolué. Au début des années 2010, le HTML5 commence à être utilisé, et sa standardisation devrait être achevée au milieu des années 2010.

En HTML5, la syntaxe de la déclaration du doctype (qui indique que le document doit être interprété selon les standards du HTML5) est très simple (comparée aux anciennes déclarations…) :

<!DOCTYPE html>

Tous les fichiers HTML commencent donc par la déclaration du doctype suivie par la balise ouvrante <html> et ils se terminent tous par la balise fermante </html>.
 

Ma tête, mon corps

Entre la balise ouvrante <html> et la balise fermante </html>, le document est scindé en deux parties, la tête d’abord, le corps ensuite, délimités par les balises du même nom en anglais (<head> et <body>) :

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.   <head>
  5.   </head>
  6.  
  7.   <body>
  8.   </body>
  9.  
  10. </html>

Le corps du document, constitué par le code placé entre les balises <body>, détermine tout le contenu visible par l’internaute à l’intérieur de la fenêtre du navigateur : les textes, les liens, les images, éventuellement les sons et les vidéos.

Mais si ton corps est visible, les pensées que tu formes dans ta tête sont invisibles. De même, les informations d’en-tête de ton document contenues entre les balises <head> ne sont pas directement visibles dans la fenêtre du navigateur, même si certaines d’entre elles ont une incidence sur la manière dont le contenu visible va s’afficher.
 

Ma tête, ses balises principales

La déclaration du jeu de caractères

html head

Parmi les informations contenues entre les balises <head> et </head>, la première est destinée aux navigateurs. Il s’agit de leur indiquer le type d’encodage qui a été utilisé pour coder la page HTML. On emploie pour cela unebalise <meta>avec l’attribut charset (« charset » signifie « jeu de caractères »).

En effet, on peut utiliser une multitude de jeux de caractères pour écrire du texte avec un ordinateur. Jusqu’en 2007, le jeu de caractères le plus répandu pour les pages web était l’ASCII (American Standard Code for Information Interchange). L’ASCII ne permettant l’écriture que d’un nombre très limité de langues en dehors de l’anglais, le type d’encodage désormais préconisé pour les pages HTML est le UTF-8 qui permet d’écrire l’ensemble des caractères internationaux, comme par exemple le « é » du français et les autres caractères accentués.

On renseignera donc l’attribut charset de la balise <meta> avec la valeur « utf-8 » :

<metacharset="utf-8">

La balise <title>

Mais la plus importante des balises trouvant leur place dans la tête du document (« head ») est certainement la balise <title>. Il s’agit du titre de la page (« title » signifie « titre » en anglais), qui s’affiche dans la bordure en haut de la fenêtre du navigateur, et qui s’affiche également en tête des résultats des recherches que tu fais sur les moteurs de recherche comme Google.

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.   <head>
  5.     <metacharset="utf-8">
  6.     <title>Titre de la page</title>
  7.   </head>
  8.  
  9.   <body>
  10.   </body>
  11.  
  12. </html>

Les autres balises dans ma tête

Bien d’autres balises peuvent apparaître entre la balise ouvrante <head>et la balise fermante </head>, mais je ne vais pas en parler ici. Je vais simplement citer les principales au cas où tu voudrais aller plus loin et compléter ce que tu viens d’apprendre en faisant des recherches ailleurs sur le web :

  • des balises <style> contenant des règles de mise en forme des éléments visibles dans la page
  • des balises <script> contenant des petits programmes (scripts) destinés à apporter davantage d’animation et d’interactivité (ces scripts sont généralement écrits en langage JavaScript)
  • des balises <link> pour lier la page HTML à d’autres fichiers (comme des feuilles de style ou des pages de scripts externes par exemple)
  • d’autres balises <meta> dont le contenu s’adresse aux navigateurs ou aux robots des moteurs de recherche, avec d’autres attributs que l’attribut « charset »

Mais passons sans plus tarder aux balises les plus importantes de l’autre partie d’un fichier HTML, mon corps, délimité par les balises <body> et </body>.
 

Mon corps, ses balises principales

Parmi les sous-balises principales de la balise <body>, la balise <div> constitue le conteneur ou la boîte de base pour structurer la page HTML.

Ensuite viennent des balises ayant un usage plus particulier.

Nous allons successivement aborder celles permettant l’insertion de texte, d’images et de liens.

Mais avant d’avoir fini de passer en revue toutes ces possibilités, tu vas tout de suite pouvoir créer ta première page HTML avec la balise de base permettant d’insérer du texte, à savoir la balise <p> permettant l’insertion d’un paragraphe.

<p> se place au début d’un paragraphe et </p> se place à la fin du paragraphe.
 

Ta première page HTML

Pour créer ta première page HTML, ouvre le Bloc-notes sur ton PC (ou TextEdit sur Mac), et recopie le code suivant, que tu peux entièrement comprendre à présent :

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.   <head>
  5.     <metacharset="utf-8">
  6.     <title>Ceci est le titre de ma première page HTML</title>
  7.   </head>
  8.  
  9.   <body>
  10.     <p>Ceci est le premier paragraphe de texte de ma page.</p>
  11.     <p>Ceci est le deuxième paragraphe de texte de ma page.</p>
  12.     <p>Ceci est le troisième paragraphe de texte de ma page.</p>
  13.   </body>
  14.  
  15. </html>

Ensuite, enregistre ton fichier sous le nom « mapremierepage.html ». Tu peux bien sûr choisir un autre nom à partir du moment où tu n’oublies pas l’indispensable extension « .html ». N’oublie pas non plus de choisir le codage UTF-8. Tu peux à présent ouvrir ta première page dans ton navigateur (Fichier > Ouvrir). Et voilà !
 

Une page HTML est comme un arbre

Les balises HTML s’imbriquent les unes dans les autres. Pour exprimer ces rapports d’imbrication, on emploie souvent la métaphore de l’arbre généalogique.

Ainsi, on peut présenter les rapports qu’entretiennent les balises de ta première page HTML comme des liens de parenté.

Les ancêtres d’une balise sont toutes les balises placées plus bas dans les branches de l’arbre par rapport à cette balise, quelque soit le degré d’éloignement dans l’arborescence et quelque soit le nombre de niveaux intermédiaires entre elles et cette balise.

Les descendantes d’une balise sont toutes les balises placées plus haut dans les branches de l’arbre par rapport à cette balise, quelque soit le degré d’éloignement dans l’arborescence et quelque soit le nombre de niveaux intermédiaires entre elles et cette balise.

Le parent d’une balise est la balise placée directement en dessous d’elle dans l’arbre, celle dans laquelle elle est imbriquée.

L’enfant d’une balise est la balise placée directement au-dessus d’elle dans l’arbre, il s’agit d’une balise qu’elle imbrique.

Les balises sœurs sont des balises qui se trouvent au même niveau dans l’arborescence et ont le même parent.

arbre html

Dans ta première page HTML :

  • La balise <html> est l’ancêtre de toutes les autres balises et plus précisément le parent des balises <head> et <body>.
  • Les balises <head> et <body> sont les enfants de la balise <html>.
  • La balise <head> est le parent des balises <meta> et <title>.
  • Les balises <meta> et <title> sont des balises sœurs. Elles sont les descendantes des balises <html> et <head> et plus précisément les enfants de la balise <head>.
  • La balise <body> est le parent des balises <p>.
  • Les balises <p> sont des balises sœurs. Elles sont les descendantes des balises <html> et <body> et plus précisément les enfants de la balise <body>.

 

Découvrez aussi comment insérer du texte avec le langage HTML.

Textes rédigés par Pascal Szidon / Illustrations par Lea Taloc

Publié le 15/02/13

Modifié le 12/11/19

Retrouve ce contenu dans :