Logo - laConsole

Apprendre HTML : Balises de Premier Niveau

Une page HTML comporte au minimum les balises <doctype>, <html>, <head> et <body>. Elles sont situées au plus haut niveau d'arborescence de la page.

Icône de calendrier
Débutant
8 chapitres

Type du document avec <!DOCTYPE>

La balise <!DOCTYPE> est la première balise HTML à écrire systématiquement au début de chaque document HTML.

Son rôle est de spécifier quel est le type du document, permettant aux navigateur de savoir quel langage de la vaste famille SGML il devra interpréter. Pour cela on ajoutera à l’intérieur un attribut html, sans valeur.

Cette balise a une syntaxe bien particulière puisqu’elle commence par un point d’exclamation.

copié ! 
<!DOCTYPE html>

Conteneurs de la page

Balise <html>

La balise <html> contient l’intégralité d’un document HTML. Elle intervient comme une sorte de conteneur global pour l’ensemble du site web.

copié ! 
<!DOCTYPE html>
<html></html>

On prendra l’habitude de lui ajouter un attribut lang afin de spécifier la langue utilisée pour le contenu de la page web.

La valeur de cet attribut est un code sur deux ou trois caractères (généralement en minuscules). Par exemple :

  • fr pour le français
  • en pour l’anglais
  • …
copié ! 
<!DOCTYPE html>
<html lang="fr"></html>

Balise <head>

La balise <head> contient l’ensemble des métadonnées (informations d’en-tête) de la page web.

Tout ce qui est contenu dans cette balise est en quelque sorte invisible. On y place par exemple :

  • Le favicon d’une page web
  • Des informations utiles au SEO
  • Des liens vers des fichiers CSS ou JavaScript
  • …
copié ! 
<!DOCTYPE html>
<html lang="fr">
	<head></head>
</html>

<head> est imbriqué à l’intérieur de la balise <html>.

Balise <body>

La balise <body> contient par définition l’ensemble du corps de la page web.

Tout ce qui est contenu dans cette balise est destiné à constituer notre interface. Il peut s’agir de textes, images, boutons…

copié ! 
<!DOCTYPE html>
<html lang="fr">
	<head></head>
	<body></body>
</html>

<body> est imbriqué à l’intérieur de la balise <html>.

Visualiser son code HTML comme un arbre

Un excellent moyen de comprendre comment est constituée l’architecture d’une page web est de la visualiser comme un arbre.

copié ! 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Démo</title>
		<meta name="description" content="Blablaba...">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<section>
			<h1>Titre de niveau 1</h1>
			<p>Lorem ipsum dolor sit <a href="#">amet</a>...</p>
			<p>Lorem ipsum dolor sit amet...</p>
		</section>
		<section>
			<img src="..." alt="...">
		</section>
	</body>
</html>
  • <html> représente le tronc de l’arbre car il s’agit de la balise de plus haut niveau.
  • <head> et <body> représentent les 2 branches primaires puisqu’elles sont directement reliées au tronc.
  • Et ainsi de suite…