Premiers pas avec les balises html

Publié le : 7 mai 2025 - Mis à jour le : 6 août 2026

Pour faire ses premiers pas avec les balises du langage HTML (hypertext markup language), nous allons d'abord faire quelques exercices simples, pour vous montrer pas à pas comment se structurent une page web et ces éléments html.

Nous avons vu, dans le premier exercice « bonjour », que si nous changeons l'extension txt en html d'un simple fichier texte, nous obtenons un fichier qui s'ouvre automatiquement avec un navigateur web.
Mais cette manipulation n'est pas suffisante pour qualifier ce fichier de page web valide et répondant parfaitement au standard html.

Premières balises

Pour construire une page web conforme au format html, nous devons utiliser un marquage spécifique.
Ce marquage s'effectue avec des balises ; c'est ce que nous nommons habituellement « programmation ou codage html ».

Pour être précis, nous ne programmons pas, mais nous balisons du contenu. La programmation est la saisie d'une suite d'instructions qui seront exécutées par un processeur. Ce qui n'est pas le cas avec le html.

Nous insérons ces balises autour du texte que nous désirons voir s'afficher dans le navigateur.

• Les balises structurent le contenu d'un document.
• Elles sont encadrées par les signes inférieur et supérieur (< et >).
• Elles indiquent au navigateur comment rendre ou formater le contenu (paragraphe, élément de liste, titre…).
• Elles fonctionnent généralement par paires : une balise d'ouverture (<balise>) et une balise de fermeture (</balise>).

Exemple simple avec la balise <p>

Reprenez le premier exercice de la série de ce cours.
Éditez le fichier « bonjour.html » avec le « Bloc-Notes » (ouvrir avec) ; rassurez-vous, nous utiliserons un éditeur de code dans les prochains exercices.
Modifiez le texte « Bonjour ! » comme ceci :

<p>Bonjour !</p>

En faisant cela, vous mettez la phrase « Bonjour ! » à l'intérieur d'un balisage de paragraphe :

1. Vous saisissez d'abord la balise ouvrante <p>,
2. vous tapez le texte du paragraphe (Bonjour !),
3. puis vous saisissez </p> (balise fermante).

Vous venez de créer votre premier élément html !

Structure d'un élément html

En pratique, un élément html est l'ensemble formé par sa balise ouvrante, le contenu et sa balise fermante.

Les éléments html servent à structurer un document html et son contenu.

Maintenant, enregistrez votre fichier et ouvrez-le avec votre navigateur.
Vous voyez toujours votre phrase « Bonjour ! » et les balises n'apparaissent pas.
En effet, votre navigateur interprète le balisage pour lui-même mais représente votre phrase comme étant un paragraphe.

Voici un autre exemple d'un élément de paragraphe que vous pouvez ajouter à la suite du premier :

<p>Bonjour !</p>
<p>Le serpent siffle et serpente entre les pierres.</p>

Pour recopier le code, il suffit de sélectionner celui-ci avec la souris et de faire contrôle c (touches ctrl+c).
Ensuite, faites contrôle v (ctrl+v) pour coller le code dans votre éditeur.

Enregistrez votre fichier, et mettez à jour la page bonjour.html sur le navigateur.

Par la suite, nous allons utiliser toute une variété de balises pour formater notre document HTML. Toute balise ouverte doit être refermée.

Les balises HTML c'est comme les panneaux du code de la route.
« Vous avez réussi votre code de la route ?
Alors vous pouvez réussir à apprendre le code HTML. »

Notions de norme ou standard HTML

Nous avons balisé correctement nos paragraphes et pourtant, notre fichier html n'est pas valide selon le standard html du W3C (Word Wide Web Consorsium).
Voici la réponse de l'outil de test de code html Nu Html Checker (https://validator.nu/).

En effet, un fichier informatique doit répondre à des règles de formatage précises.
Pour notre fichier html, qui est aussi notre page web, nous devons au minimum :

• Définir l'élément html racine et préciser la langue (warning 1),
• indiquer la version du langage HTML utilisée (erreur 1),
• structurer notre contenu avec : une partie « entête » qui doit contenir au moins le titre de la page (erreur 2).

Pour l'instant, il faut enregistrer nos fichiers avec l'extension html.
Vous apprendrez plus tard qu'il existe d'autres extensions possibles (php, xml…).

Pour rendre conforme notre fichier, il faut lui ajouter d'autres éléments html. Cette opération s'effectue en ajoutant des balises de marquage de document html, qui vont encadrer et « habiller » nos deux paragraphes.

Voici une image simple illustrant des imbrications d'éléments html comme des boîtes.

D'une manière plus ludique, nous pouvons dire que le codage html est l'art d'imbriquer intelligemment des boîtes les unes dans les autres (mais pas un imbroglio résultant d'un assemblage bancal de boîtes comme nous pouvons le voir sur de nombreux sites [wordpress] mal codés).

Corriger notre balisage

En tenant compte du rapport d'erreur, nous allons ajouter les balises nécessaires à la conformité de notre code.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon premier fichier html</title>
</head>
<p>Bonjour !</p>
<p>Le serpent siffle et serpente entre les pierres.</p>
</html>

À vous de saisir les nouvelles balises !

Explication :

1. La déclaration « !DOCTYPE html » indique la version du langage HTML utilisé (ici html5) et corrige l'erreur 1,
2. les balises <html> et </html > forment l'élément supérieur du document (corrige partiellement le warning 1),
3. si la balise <html> contient un attribut qui spécifie la langue du document elle se transforme en <html lang="fr"> (correction complète du warning 1),
4. les balises <head> et </head> forment l'entête du document et corrigent en partie l'erreur 2,
5. l'élément enfant « title » de « head » contient le titre du document et corrige complètement l'erreur 2.

Pour l'instant, notre contenu utile est situé après la balise fermante </head> et avant la balise fermante </html>.

Si nous soumettons notre nouveau code au valideur, il est maintenant considéré comme conforme au standard html5.

Structure de base d'une page web

Élément body

L'élément « body » va compléter la structure de notre page web, en lui attribuant un espace dédié au contenu utile :

• Les balises <body> et </body> contiennent donc le corps du document (partie visible par le visiteur),
• il ne peut y avoir qu'un seul élément body dans un document html,
• l'élément body peut contenir tous les autres éléments html (sauf head et html naturellement) comme p, ul, a, code, main, footer…

De cette façon, nous obtenons une structure de base bien formée et compréhensible par tous les navigateurs.

Balises structurantes

Toutes pages web doivent être construites avec ces balises de bases. Nous les appelons balises structurantes d'un document html.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon premier fichier html</title>
</head>
<body>
</body>
</html>

Coloration syntaxique

Comme nous allons ajouter de plus en plus de balises, la lecture de notre contenu (texte, images, listes…) deviendra fastidieuse sur notre « Bloc-Notes ». Nous aurons du mal à distinguer la partie utile de la partie balisage.

Désormais, nous allons utiliser l'un des éditeurs de texte préconisé dans la page « installer son atelier de codage ».
Vous allez rapidement vous rendre compte de l'intérêt de la coloration syntaxique des éditeurs de code informatique.

Passons à la pratique maintenant.
Recopier le code suivant dans Gedit, NotePad++ ou TextEdit… (en fonction de la configuration de votre ordinateur).

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon premier fichier html</title>
</head>
<body>
<p>Bonjour !</p>
<p>Le serpent siffle et serpente entre les pierres.</p>
<p>L'oiseau chante sur la plus haute branche.</p>
</body>
</html>

Enregistrez le code sous « bonjour.html ». Une fois l'enregistrement terminer, vous voyez apparaître la coloration syntaxique ; les balises et autres éléments du langage HTML sont colorés de façon à les identifier rapidement.

Ce qu'il faut retenir

• Les balises structurent et formatent le contenu d'un document html.
• Elles sont encadrées par les signes inférieur et supérieur (< et >) et fonctionnent généralement par paires (exemple : <p> et </p>.
• Un élément html est l'ensemble formé par sa balise ouvrante, son contenu et sa balise fermante.
• Le document html doit contenir l'information indiquant la norme utilisée pour sa rédaction (<!DOCTYPE html> pour le html5).
• Une page web est conforme à la norme HTML si le document html qui lui correspond contient les balises structurantes de base (html, head, title et body).