<!DOCTYPE html>
<html>
<!-- Élément racine -->
<head>
<!-- Élément encadrant les informations destinées au navigateur: n’apparaît pas sur la page -->
<meta charset="utf-8">
<!-- Élément spécifiant une information de type méta comme l’encodage -->
<title>Title</title>
<!-- Élément encadrant le titre de la page, apparaissant en tête de l’onglet -->
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Élément spécifiant un lien une ressource externe, telle qu’une feuille de style CSS -->
</head>
<body>
<!-- Élément encadrant le corps de la page -->
<header>
<!-- Élément encadrant un en-tête -->
<h1>Title</h1>
<!-- Élément encadrant le titre de niveau 1 (h eader 1) -->
<nav>
<!-- Élément encadrant les liens internes vers toutes les pages du site web (navigation) -->
<a href="page1.html">Page 1</a>
<!-- Élément encdrant les hyperliens, dont l’adresse est spécifié dans l’attribute 'href' -->
<a href="page2.html">Page 2</a>
<a href="page3.html">Page 3</a>
<a href="page4.html">Page 4</a>
</nav>
</header>
<main>
<!-- Élément encadrant le contenu principal de la page -->
<div>
<!-- Élément d’encadrement neutre de type block, non sémantique -->
<h2>Title 2</h2>
<!-- Élément encadrant un titre de niveau 2 (h eader 2) -->
<h3>Title 3</h3>
<!-- Élément encadrant un titre de niveau 3 (h eader 3) -->
<p>
<!-- Élément encadrant un titre de niveau un paragraph -->
Lorem ipsum dolor sit amet, <em>consectetur</em> <!-- Élément encadrant un texte accentué -->
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
<strong>dolore</strong> <!-- Élément encadrant un texte en gras --> magna aliqua.
Ut enim ad minim veniam, quis
<!-- Élément encadrant une citation -->
<blockquote>
Quote
</blockquote>
<span>nostrud</span><!-- Élément d’encadrement neutre de type inline, non sémantique --> exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit
anim id est laborum.<sup><a href="#fn1">1</a></sup><!-- Élément encadrant un exposant -->
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg">
<!-- Élément permettant d’intégrer une image -->
</p>
<h3>My list</h3>
<ul>
<!-- Élément encadrant une liste -->
<li>Item 1</li>
<!-- Élément encadrant un point de la liste -->
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<p id="fn1">[1] Here is my first footnote.</p>
</main>
<script type="text/javascript" src="path/to/script.js"></script>
<!-- Élément permettant de lié / écrire du code javascript -->
</body>
</html>