Types de balises
Les balises HTML se répartissent en plusieurs types. Pour mieux les comprendre, il est pratique de les classer selon leur rôle : certaines servent à structurer la page, d’autres à afficher du texte, insérer des images, créer des formulaires, etc.
Conseil :
La liste ci-dessous n’est pas exhaustive et peut évoluer. Vous trouverez la liste complète des balises à l’adresse suivante : https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements
Définition : Structure du document
Définissent l’organisation générale de la page.
Balises :
<html>→ racine du document<head>→ informations sur le document (métadonnées, titres, liens CSS/JS)<body>→ contenu visible de la page<header>→ en-tête de la page ou d’une section<footer>→ pied de page<main>→ contenu principal<section>→ section thématique<article>→ contenu autonome (article, post)<nav>→ menu de navigation<aside>→ contenu secondaire ou complémentaire
Définition : Titres et texte
Pour structurer et formater le texte.
Balises :
<h1>à<h6>→ titres de différentes tailles<p>→ paragraphe<span>→ texte en ligne générique<strong>→ texte important (souvent gras)<em>→ texte accentué (souvent italique)<br>→ saut de ligne<hr>→ ligne horizontale / séparation
Définition : Listes
Organisent les informations sous forme de listes.
Balises :
<ul>→ liste non ordonnée<ol>→ liste ordonnée<li>→ élément de liste<dl>→ liste de définitions<dt>→ terme d’une définition<dd>→ description d’un terme
Définition : Liens et navigation
Pour créer des hyperliens ou naviguer.
Balises :
<a>→ lien hypertexte<link>→ lien vers ressources externes (CSS, favicon)<nav>→ menu de navigation (structure)
Définition : Images et médias
Pour insérer des images, vidéos ou audio.
Balises :
<img>→ image<video>→ vidéo<audio>→ audio<source>→ source pour vidéo/audio<picture>→ image responsive avec plusieurs sources
Définition : Formulaires et saisie
Pour interagir avec l’utilisateur.
Balises :
<form>→ conteneur de formulaire<input>→ champ de saisie<textarea>→ zone de texte multi-lignes<button>→ bouton<select>→ menu déroulant<option>→ option de menu déroulant<label>→ étiquette pour un champ<fieldset>/<legend>→ regrouper des champs avec légende
Définition : Tableaux
Pour organiser les données tabulaires.
Balises :
<table>→ tableau<tr>→ ligne du tableau<td>→ cellule de données<th>→ cellule d’en-tête<thead>,<tbody>,<tfoot>→ parties du tableau
Définition : Conteneurs et mise en page
Pour structurer ou grouper des éléments.
Balises :
<div>→ conteneur générique<span>→ conteneur en ligne<section>,<article>,<aside>,<header>,<footer>→ déjà vus pour structure
Définition : Scripts et style
Pour ajouter des scripts ou du CSS.
Balises :
<script>→ code JavaScript<style>→ CSS intégré<link>→ fichier CSS externe