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 :
html
<!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.
html
<!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
html
<!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>:::