Les balises HTML classiques constituent les fondations du langage HTML. Elles permettent d'afficher du texte, des
images, des liens, des listes, des tableaux ou encore des formulaires. Bien qu'elles ne soient pas “sémantiques”
au sens strict, elles jouent un rôle essentiel dans la mise en page et l'interaction des contenus web.
h1 à h6
Balise de titre de niveau 1. Elle représente le titre principal d'une page. 📖 Documentation MDN
Balises de titres hiérarchiques.
Titre h1
Titre h2
Titre h3
Titre h4
Titre h5
Titre h6
Titre h1
Titre h2
Titre h3
Titre h4
Titre h5
Titre h6
img
Balise d'image. Permet d'afficher une image dans la page. 📖 Documentation MDN
Affiche une image.
p, br, hr
Texte de paragraphe, saut de ligne, ligne horizontale.
Ceci est un paragraphe. Avec un saut de ligne.
Un autre paragraphe après une ligne horizontale.
Ceci est un paragraphe. Avec un saut de ligne.
Un autre paragraphe après une ligne horizontale.
a
Balise de lien hypertexte. Permet de naviguer vers une autre page ou ressource. 📖 Documentation MDN
Balises pour la création de formulaires interactifs.
div et span
Balise de division. Utilisée pour regrouper d'autres éléments HTML. 📖 Documentation MDN
Conteneurs génériques pour mise en page (bloc et inline).
Une div
Texte avec un span rouge intégré.
Une div
Texte avec un span rouge intégré.
table, thead, tbody, tfoot, tr, th, td, caption
Tableaux de données avec titres, pieds et légendes.
Exemple de tableau
Nom
Âge
Alice
24
Bob
30
Fin du tableau
Exemple de tableau
Nom
Âge
Alice
24
Bob
30
Fin du tableau
Balises HTML obsolètes (dépréciées)
⚠️ Ces balises ne sont plus recommandées. Utilisées uniquement à titre pédagogique.
Texte centré avec
Texte bleu avec
Texte centré avec
Texte bleu avec Texte défilant avec
Balises Sémantiques HTML5
Les balises sémantiques améliorent la lisibilité du code HTML en indiquant clairement le rôle des éléments dans la
structure de la page. Voici des exemples concrets de leur usage stylisé et responsive.
header
Représente l'en-tête d'une page ou d'une section. Généralement utilisé pour les logos, menus de navigation ou
titres principaux.
aside
Contenu secondaire comme une barre latérale. Utilisé pour les menus, infos contextuelles, etc.
Contenu principal
Cette section contient le contenu principal de la page.
Contenu principal
Cette section contient le contenu principal de la page.
main
Contient le contenu principal de la page, sans les éléments répétés (comme les en-têtes ou les pieds de page).
Bienvenue
Ceci est le contenu central affiché sur une page.
Bienvenue
Ceci est le contenu central affiché sur une page.
section
Regroupe des contenus logiquement liés dans une page. Peut contenir un titre.
Nos services
Développement web
Design UX/UI
Formation
article
Représente un contenu indépendant (article de blog, commentaire, actu…)
Pourquoi apprendre le HTML ?
Le HTML est la base de toute page web. Il permet de structurer l'information de manière claire.
Pourquoi apprendre le HTML ?
Le HTML est la base de toute page web. Il permet de structurer l'information de manière claire.
figure et figcaption
Encadre un média (image, schéma, graphique) et sa légende.
Logo de React
Logo de React
header et nav — Exemple de barre de navigation
LOGO
LOGO
footer
Représente le pied de page d'un document ou d'une section, incluant des infos légales, liens, copyright…
Explorateur HTML Visuel
Balises classiques HTML5
Les balises HTML classiques constituent les fondations du langage HTML. Elles permettent d'afficher du texte, des
images, des liens, des listes, des tableaux ou encore des formulaires. Bien qu'elles ne soient pas “sémantiques”
au sens strict, elles jouent un rôle essentiel dans la mise en page et l'interaction des contenus web.
h1 à h6
Balise de titre de niveau 1. Elle représente le titre principal d'une page. 📖 Documentation MDN
⚠️ Ces balises ne sont plus recommandées. Utilisées uniquement à titre pédagogique.
<center>Texte centré avec <center></center>
<font color="blue">Texte bleu avec <font></font><br/>
<marquee>Texte défilant avec <marquee></marquee>
Texte centré avec <center>
Texte bleu avec <font> Texte défilant avec <marquee>
Balises Sémantiques HTML5
Les balises sémantiques améliorent la lisibilité du code HTML en indiquant clairement le rôle des éléments dans la
structure de la page. Voici des exemples concrets de leur usage stylisé et responsive.
header
Représente l'en-tête d'une page ou d'une section. Généralement utilisé pour les logos, menus de navigation ou
titres principaux.
Contenu secondaire comme une barre latérale. Utilisé pour les menus, infos contextuelles, etc.
<aside>
<button onclick="alert('Accueil')">🏠 Accueil</button>
<button onclick="alert('Profil')">👤 Profil</button>
<button onclick="alert('Paramètres')">⚙️ Paramètres</button>
</aside>
<main>
<h3>Contenu principal</h3>
<p>Cette section contient le contenu principal de la page.</p>
</main>
Contenu principal
Cette section contient le contenu principal de la page.
main
Contient le contenu principal de la page, sans les éléments répétés (comme les en-têtes ou les pieds de page).
<main>
<h3>Bienvenue</h3>
<p>Ceci est le contenu central affiché sur une page.</p>
</main>
Bienvenue
Ceci est le contenu central affiché sur une page.
section
Regroupe des contenus logiquement liés dans une page. Peut contenir un titre.
Nos services
Développement web
Design UX/UI
Formation
article
Représente un contenu indépendant (article de blog, commentaire, actu…)
<article>
<h3>Pourquoi apprendre le HTML ?</h3>
<p>Le HTML est la base de toute page web. Il permet de structurer l'information de manière claire.</p>
</article>
Pourquoi apprendre le HTML ?
Le HTML est la base de toute page web. Il permet de structurer l'information de manière claire.
figure et figcaption
Encadre un média (image, schéma, graphique) et sa légende.
<figure style="text-align:center;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png" width="80"/>
<figcaption>Logo de React</figcaption>
</figure>