Les balises HTML, la structure de base d'une page web

Le HTML, ou HyperText Markup Langage, peut se traduire par « langage de balisage d’hypertexte ». Mais pourquoi parle-t-on d'un langage de « balisage » ? Explications.


Publié le 15/02/2013 • Modifié le 16/11/2022

Temps de lecture : 6 min.

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

Lis cet article et gagne facilement 10 Lumniz en te connectant !

Il n’y a pas de Lumniz à gagner car tu as déjà consommé cet élément. Ne t'inquiète pas, il y a plein d'autres contenus intéressants à explorer et toujours plus de Lumniz à gagner.

->   En savoir plus

Le HTML sert à coder les pages web, et ce qui caractérise d’abord ces pages, c’est qu’elles sont reliées entre elles selon le principe des liens hypertextes, ce qui explique pourquoi on parle d'un « langage d’hypertexte ».

Un langage de « balisage »

Au bord de la mer, des balises flottant sur l’eau peuvent délimiter l’espace en mer d’un chenal à bateaux. De même, le « balisage » d’une page HTML va délimiter et structurer les parties de cette page, en appliquant à chacune de ces parties diverses propriétés qui seront interprétées de manière différente par le navigateur selon le type de balises utilisées. Bien sûr, il ne va pas s’agir ici de bouées en plastique, mais de chaînes de caractères qui vont délimiter des parties de la page, des portions de texte ou des images, pour leur appliquer différentes propriétés, mais aussi pour les structurer les unes par rapport aux autres.

Les différents types de balises

On distingue des balises « ouvrantes », qui indiquent le début de la portion de page web à délimiter, et des balises « fermantes », qui en indiquent la fin. Les balises ouvrantes sont toujours de la forme <exemple> et les balises fermantes de la forme </exemple> où « exemple » indique le nom de la balise. Tous les éléments du contenu d’une page HTML sont encadrés par une balise ouvrante et une balise fermante, à part quelques exceptions (dont les plus notables sont la balise <br/>, qui permet d’aller à la ligne, la balise <img> qui permet d’insérer une image dans la page HTML, et les balises <meta> et <link> sur lesquelles je reviendrai plus tard).

S’imbriquer sans se croiser

Une balise ouvrante et sa balise fermante correspondante forment donc pour ainsi dire un conteneur enserrant du contenu. Ces conteneurs s’imbriquent comme des poupées russes : <exemple1>contenu<exemple2>contenu</exemple2></exemple1>

Mais si les balises s’imbriquent, elles ne peuvent en revanche pas se croiser. Par exemple, une structure de ce type est interdite : <exemple1>contenu<exemple2>contenu</exemple1></exemple2>

Les attributs des balises

Afin de définir des propriétés supplémentaires, on peut ajouter un ou plusieurs « attributs » à une balise. Les attributs se placent toujours dans les balises ouvrantes, ils sont suivis du signe égal et de leur valeur entre guillemets :

<nom-de-la-balise nom-de-l-attribut="valeur-de-l-attribut">

contenu

</nom-de-la-balise>

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>.

Les balises de premier niveau

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>) :

<!DOCTYPE html>

<html>

 

  <head>

  </head>

 

  <body>

  </body>

 

</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.

BaliseDescription
<html>balise principale
<head>en-tête de la page
<body>corps de la page

Les balises d'en-tête

La déclaration du jeu de caractères

 

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 » : <meta charset="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.

<!DOCTYPE html>

<html>

 

  <head>

    <meta charset="utf-8">

    <title>Titre de la page</title>

  </head>

 

  <body>

  </body>

 

</html>

Les autres balises d'en-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 »
BaliseDescription
<title>titre de la page
<style>code CSS
<script>code JavaScript
<link>liaison avec une feuille de style
<meta>métadonnées de la page web

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, comme 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.

Créer une première page HTML

Voici un exemple pour créer une 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.

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 :

<!DOCTYPE html>

<html>

 

  <head>

    <metacharset="utf-8">

    <title>Ceci est le titre de ma première page HTML</title>

  </head>

 

  <body>

    <p>Ceci est le premier paragraphe de texte de ma page.</p>

    <p>Ceci est le deuxième paragraphe de texte de ma page.</p>

    <p>Ceci est le troisième paragraphe de texte de ma page.</p>

  </body>

 

</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>.

Ce contenu est proposé par