La structure d'un document HTML

HTML (HyperText Markup Language) est le langage qui décrit le contenu et le sens d’une page web : ceci est un titre, ceci est un paragraphe, ceci est un lien. L’apparence (couleurs, mise en page) viendra plus tard avec CSS, et les interactions avec JavaScript.

Balises, éléments et attributs

Un élément HTML s’écrit généralement avec une balise ouvrante, un contenu et une balise fermante :

<!-- balise ouvrante, contenu, balise fermante -->
<p>Bonjour tout le monde</p>

<!-- un attribut précise l'élément : nom="valeur" -->
<a href="contact.html">Nous contacter</a>

Certains éléments sont vides : ils n’ont ni contenu ni balise fermante, par exemple <meta>, <img>, <br> ou <input>.

Les éléments s’imbriquent comme des poupées russes : on ferme toujours en premier ce qu’on a ouvert en dernier.

<p>Un mot <strong>important</strong> ici.</p>   <!-- correct -->
<p>Un mot <strong>important</p></strong>        <!-- incorrect -->

Le squelette minimal

Voici la base de toute page moderne :

<!DOCTYPE html>                 <!-- mode standard du navigateur -->
<html lang="fr">                <!-- langue principale de la page -->
  <head>
    <meta charset="UTF-8">      <!-- encodage : accents corrects -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mon premier site</title>  <!-- texte de l'onglet et des moteurs de recherche -->
  </head>
  <body>
    <h1>Bienvenue</h1>
    <p>Ceci est ma première page.</p>
  </body>
</html>

Ligne par ligne :

• <!DOCTYPE html> n’est pas une balise mais une déclaration : elle indique au navigateur d’utiliser le mode standard.
• <html lang="fr"> est la racine du document. L’attribut lang aide les lecteurs d’écran à choisir la bonne prononciation et les moteurs de recherche à classer la page.
• <head> regroupe les métadonnées, invisibles dans la page : encodage, réglage d’affichage mobile (viewport), titre de l’onglet, plus tard les liens vers les feuilles CSS.
• <body> contient tout ce que l’utilisateur voit.

L’arbre du document

Le navigateur transforme ce texte en un arbre (le DOM) : html a deux enfants, head et body, qui ont eux-mêmes des enfants. Retenir cette image vous aidera beaucoup en CSS et en JavaScript.

Bonnes habitudes

• Indentez le code : chaque niveau d’imbrication est décalé de deux espaces.
• Écrivez les balises et attributs en minuscules et entourez les valeurs de guillemets.
• Ajoutez des commentaires avec <!-- ... --> ; ils ne s’affichent pas.
• Enregistrez le fichier en UTF-8 avec l’extension .html, puis ouvrez-le dans votre navigateur.

HTML est tolérant : une erreur ne fait pas planter la page, le navigateur devine. C’est pratique, mais cela cache les erreurs. Prenez l’habitude d’écrire un code propre dès le départ.