Le HTML (HyperText Markup Language) est un langage de balisage héritier du SGML (Standard Generalized Markup Language). Il est important de rappeler que le rôle du HTML est de structurer l’information (sémantique) et non de la mettre en forme. La présentation visuelle est, quant à elle, gérée par le CSS qui peut aussi servir à animer les pages. L’interactivité avec le contenu est essentiellement géré par JavaScript.
Ce document et les suivants se concentrent sur le HTML5, la version la plus récente et la plus utilisée du langage.
Le HTML5 structure le contenu d’une page web sous forme d’arbre hiérarchique.
L’arbre HTML5
Un document HTML est constitué d’éléments imbriqués. La racine de cet arbre est l’élément <html>. Il englobe tout le code de la page et contient deux enfants principaux.
Règles de base : imbrication et balises orphelines
L’imbrication des balises
Les éléments HTML peuvent être placés les uns à l’intérieur des autres, mais ils doivent respecter une règle stricte : le premier tag ouvert doit être le dernier fermé. Pensez-y comme à des boîtes que vous emboîtez : vous ne pouvez pas fermer une boîte extérieure avant d’avoir fermé celle qui est à l’intérieur.
<!-- Correct -->
<p>Voici du texte <strong>important</strong>.</p>
<!-- Incorrect -->
<p>Voici du texte <strong>mal imbriqué.</p></strong>
Les balises orphelines
Certaines balises n’ont pas de contenu à encadrer (elles sont auto-suffisantes) et n’ont donc pas de balise de fermeture. On les appelle balises orphelines (ou void elements en anglais). Elles s’écrivent en une seule partie. Les plus courantes sont <meta>, <link>, <img>, <br> ou encore <input>.
<meta charset="UTF-8">
<img src="photo.jpg" alt="Une belle photo">
<br>
Note : Dans les anciennes versions de HTML (comme XHTML), il était obligatoire de les fermer avec un slash (ex: <br />). En HTML5, ce slash est optionnel et généralement omis.
La partie « head » : Les méta-données
L’élément <head> contient des informations destinées au navigateur et aux moteurs de recherche. Ce contenu n’est pas affiché directement dans la page web (sauf le titre dans l’onglet).
On y trouve généralement :
- L’encodage des caractères (
<meta charset="UTF-8">). - Le titre de la page (
<title>). - Les liens vers les feuilles de style CSS.
La partie « body » : Le contenu
L’élément <body> contient tout ce qui est visible par l’utilisateur. C’est le corps de la page où l’on place les textes, images, vidéos, etc.
Exemple de structure de base
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de l'onglet</title>
</head>
<body>
<h1>Titre visible dans la page</h1>
<p>Ceci est un paragraphe de contenu.</p>
</body>
</html>