📘 Résumé des balises HTML¶

🔹 Qu'est-ce qu'une balise ouvrante et une balise fermante ?¶

Une balise ouvrante indique le début d’un élément HTML. Exemple : <p>
Une balise fermante indique la fin de cet élément. Exemple : </p>
Ensemble, elles encadrent le contenu : <p>Bonjour</p>

📄 Balises avec ouverture et fermeture¶

Voici une liste de balises qui doivent être ouvertes et fermées :

<html> ... </html> : la page web
<head> ... </head> : description de la page
<body> ... </body> : le contenu de la page
<h1> ... </h1> à <h6> ... </h6> : les niveaux de titres
<p> ... </p> : paragraphe
<a> ... </a> : lien cliquable
<ul> ... </ul> : liste à puces
<ol> ... </ol> : liste numérotée
<li> ... </li> : item de liste
<main> ... </main> : bloc principal de la page
<nav> ... </nav> : navigation de la page
<header> ... </header> : bloc de tête
<footer> ... </footer> : bloc de pied de page
<button> ... </button> : bouton cliquable

Il existe d'autres balises que nous verrons plus tard, mais ceci est une liste des principales.

Exemple :

<p>Ceci est un paragraphe.</p>

<a href="https://dinf.ca/">Ce texte est cliquable et se rend à dinf.ca</a>

Ces balises doivent être fermées, car elles peuvent avoir des balises enfant et se fermer plus loin. Tant que la balise de fermeture n'est pas atteinte, le navigateur continue dans le style de cette balise.

Voici un exemple d'une liste à puces, avec 4 items de liste :

<ul>
    <li>Chat</li>
    <li>Chien</li>
    <li>Lapin</li>
    <li>Perruche</li>
</ul>

✅ Balises auto-fermantes (simples)¶

Voici une liste de balises qui n'ont pas de fermeture :

<br> : saut de ligne
<hr> : ligne horizontale
<img> : image
<input> : champ de formulaire
<meta> : métadonnées
<link> : feuille de style

Exemple :

<img src="pitou.jpg" alt="Image de pitou">

Ces balises n'ont pas besoin de fermeture, car elles sont complètes en elles-mêmes et ne peuvent contenir de balise enfant.

✨ Comprendre les balises est essentiel pour bien structurer une page web !