Le squelette d'une page HTML

Exemple basique

Une page html bien formée commence par le DOCTYPE. Aujourd'hui, on écrit simplement la ligne suivante pour signaler qu'il s'agit de HTML5 :

<!DOCTYPE html>

On trouvera ensuite la balise <html> qui est l'élément racine du document. à l'intérieur, deux balises très importantes : <head> qui contiendra le titre (dans la balise <title>), les meta-données (dans des balises <meta>), et d'autres informations (comme les feuilles de style, dans des balises <style> ou <link>, cf. CSS) et la balise <body>, qui contiendra la partie visible du document, et donc le contenu principal.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page (Apparaît sur l'onglet du navigateur)</title>
</head>
<body>
    Contenu visible de la page
</body>
</html>

Une page plus complète

<!DOCTYPE html>

 <!-- Balise html : Noeud racine du document HTML -->
<html lang="fr">

  <!-- Balise head :
       pour le titre du document,
       les meta-données,
       et les fichiers annexes (surtout CSS) -->
  <head>

    <!-- Jeu de caractère utilisé dans
         l'éditeur de texte ayant édité ce fichier -->
    <meta charset="utf-8" />

    <!-- Titre du document -->
    <title>Titre apparaissant dans l'onglet</title>

    <!-- Gestion du zoom du document -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Association d'une feuille de style -->
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

    <!-- Association d'un fichier JavaScript
         ⚠️ selon la spec HTML il doit être ici... -->
    <script src="main.js"></script>
  </head>

  <!-- Balise body : partie du document visible dans le navigateur -->
  <body>

    <!-- Association d'un fichier JavaScript
         ⚠️ selon la spec HTML il NE doit PAS être ici, mais en pratique, il faut le mettre ici ! -->
    <script src="main.js"></script>
  </body>
</html>

:::