Un document HTML contient des informations. Un exemple de document minimal est donné ici.

Ces informations sont structurées en une hiérarchie, c'est à dire que chaque élément, à l'exception de l'élément html, est imbriqué dans un autre élément que l'on appelle son parent. On parle alors d'arbre du document html pour décrire cet imbrication entre les éléments html qui servent de parent et les éléments html qu'ils contiennent qu'on appelle enfants.

Le contenu du document est en général principalement décrit dans l'élément body qui inclut, le plus souvent de nombreux autres éléments (ses enfants).

Exemple simplifié de hiérarchie:

Source HTML L'arbre correspondant
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Le titre de la page qui sera affiché dans la barre du navigateur</title>
</head>
<body>
	<div id="page">
		<h1>Commencer par un titre de page</h1>
		<div id="contenu">
			<div class="section">
				<h2>Puis un titre de section</h2>
 				<p>Un peu de blabla bla</p>
 			</div>
			<div class="section">
				<h2>Un autre titre d'une autre section</h2>
 				<p>Encore un peu de blabla bla</p>
				<img alt="une image ce serait bien ici" src="image.png">
 			</div>
		</div>
		<div id="menuGauche">
		<ul>
			<li>item 1</li>
			<li>item 2</li>
		</ul>
		</div>
	</div>
	<div id="footer">
		<p>le footer qu'il vous faut changer</p>
		<img alt="un logo" class="logo" src="logo.png">
	</div>
</body>
</html>
arborescence plus visible