🏷️ Légende :
Standard Balise classique
Sémantique Balise sémantique HTML5
🏗️
Structure de Base
<!DOCTYPE html>
Déclaration du type de document. Indique au navigateur que c'est du HTML5.
<!DOCTYPE html>
<html>
Élément racine de la page HTML. Contient tout le document.
<html lang="fr">
...
</html>
<head>
Contient les métadonnées du document (titre, liens CSS, etc.).
<head>
<title>Ma page</title>
</head>
<body>
Contient tout le contenu visible de la page.
<body>
<h1>Contenu</h1>
</body>
<div>
Conteneur générique sans signification sémantique. Utilisé pour grouper des éléments.
<div class="container">
<p>Contenu</p>
</div>
<span>
Conteneur en ligne générique. Utilisé pour styliser une partie de texte.
<p>Texte avec <span class="important">mise en avant</span></p>
🎯
Balises Sémantiques HTML5
<header>Sémantique
En-tête de la page ou d'une section. Contient généralement logo, titre, navigation.
<header>
<h1>Mon Site</h1>
<nav>...</nav>
</header>
<nav>Sémantique
Section de navigation contenant des liens de navigation principaux.
<nav>
<a href="/">Accueil</a>
<a href="/about">À propos</a>
</nav>
<main>Sémantique
Contenu principal unique de la page. Une seule balise <main> par page.
<main>
<article>...</article>
</main>
<article>Sémantique
Contenu indépendant et réutilisable (article de blog, news, commentaire).
<article>
<h2>Titre article</h2>
<p>Contenu...</p>
</article>
<section>Sémantique
Section thématique du contenu. Regroupe du contenu lié par un même thème.
<section>
<h2>Nos services</h2>
<p>Description...</p>
</section>
<aside>Sémantique
Contenu complémentaire lié au contenu principal (sidebar, encart).
<aside>
<h3>Liens utiles</h3>
<ul>...</ul>
</aside>
<footer>Sémantique
Pied de page contenant infos auteur, copyright, liens.
<footer>
<p>© 2024 Mon Site</p>
</footer>
<figure>Sémantique
Contenu auto-suffisant avec légende optionnelle (image, diagramme, code).
<figure>
<img src="photo.jpg" alt="Photo">
<figcaption>Ma photo</figcaption>
</figure>
<figcaption>Sémantique
Légende pour un élément <figure>.
<figcaption>Description de l'image</figcaption>
<time>Sémantique
Représente une date ou une heure de manière lisible par les machines.
<time datetime="2024-12-18">18 décembre 2024</time>
<mark>Sémantique
Met en surbrillance du texte important ou pertinent.
<p>Le mot <mark>important</mark> est surligné</p>
✍️
Balises de Texte
<h1> à <h6>
Titres de niveau 1 à 6. h1 est le plus important, h6 le moins.
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<p>
Paragraphe de texte. Crée un bloc de texte avec espacement avant/après.
<p>Ceci est un paragraphe de texte.</p>
<strong>
Texte avec forte importance. Affiché en gras par défaut.
<p>Ce mot est <strong>important</strong></p>
<em>
Texte avec emphase. Affiché en italique par défaut.
<p>Ce mot est <em>accentué</em></p>
<b>
Texte en gras sans importance particulière (purement visuel).
<p>Texte <b>en gras</b></p>
<i>
Texte en italique sans emphase (terme technique, mot étranger).
<p>Le mot <i>rendezvous</i> est français</p>
<small>
Texte en petits caractères (mentions légales, copyright).
<p><small>Copyright 2024</small></p>
<del>
Texte supprimé/barré. Indique une modification.
<p>Prix: <del>50€</del> 30€</p>
<ins>
Texte inséré/souligné. Indique un ajout.
<p>Prix: <ins>30€</ins></p>
<sub>
Texte en indice (formules chimiques, mathématiques).
<p>H<sub>2</sub>O</p>
<sup>
Texte en exposant (puissances, notes de bas de page).
<p>x<sup>2</sup></p>
<br>
Saut de ligne. Balise auto-fermante.
<p>Ligne 1<br>Ligne 2</p>
<hr>
Ligne de séparation horizontale. Balise auto-fermante.
<p>Avant</p>
<hr>
<p>Après</p>
<pre>
Texte préformaté. Conserve espaces et retours à la ligne.
<pre>
Texte
avec espaces
</pre>
<code>
Fragment de code informatique.
<p>Utilise <code>console.log()</code></p>
<blockquote>
Citation longue avec indentation.
<blockquote>
<p>Citation importante</p>
</blockquote>
<q>
Citation courte en ligne (ajoute des guillemets).
<p>Il a dit <q>Bonjour</q></p>
<abbr>
Abréviation ou acronyme avec définition au survol.
<abbr title="HyperText Markup Language">HTML</abbr>
📋
Balises de Listes
<ul>
Liste non ordonnée (avec puces).
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
<ol>
Liste ordonnée (numérotée).
<ol>
<li>Première étape</li>
<li>Deuxième étape</li>
</ol>
<li>
Élément de liste (dans ul ou ol).
<li>Un élément de liste</li>
<dl>
Liste de définitions (termes et descriptions).
<dl>
<dt>HTML</dt>
<dd>Langage de balisage</dd>
</dl>
<dt>
Terme dans une liste de définitions.
<dt>CSS</dt>
<dd>
Description/définition dans une liste de définitions.
<dd>Feuilles de style</dd>
📝
Balises de Formulaires
<form>
Formulaire pour collecter des données utilisateur.
<form action="/submit" method="post">
...
</form>
<input>
Champ de saisie. Type défini par l'attribut "type".
<input type="text" name="nom">
<input type="email" name="email">
<input type="password">
<label>
Étiquette pour un champ de formulaire.
<label for="nom">Nom :</label>
<input type="text" id="nom">
<textarea>
Zone de texte multiligne.
<textarea name="message" rows="5"></textarea>
<button>
Bouton cliquable (submit, reset, button).
<button type="submit">Envoyer</button>
<select>
Liste déroulante de sélection.
<select name="pays">
<option>France</option>
<option>Belgique</option>
</select>
<option>
Option dans une liste <select>.
<option value="fr">France</option>
<fieldset>
Groupe de champs de formulaire liés.
<fieldset>
<legend>Infos personnelles</legend>
...
</fieldset>
<legend>
Légende pour un <fieldset>.
<legend>Titre du groupe</legend>
📊
Balises de Tableaux
<table>
Tableau de données.
<table>
<tr>
<td>Cellule</td>
</tr>
</table>
<thead>
En-tête du tableau (contient les titres de colonnes).
<thead>
<tr>
<th>Nom</th>
</tr>
</thead>
<tbody>
Corps du tableau (contient les données).
<tbody>
<tr>
<td>Données</td>
</tr>
</tbody>
<tfoot>
Pied du tableau (totaux, récapitulatifs).
<tfoot>
<tr>
<td>Total</td>
</tr>
</tfoot>
<tr>
Ligne de tableau (table row).
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<th>
Cellule d'en-tête (table header). Affichée en gras.
<th>Nom</th>
<th>Âge</th>
<td>
Cellule de données (table data).
<td>Jean</td>
<td>25</td>
<caption>
Légende/titre du tableau.
<table>
<caption>Liste des élèves</caption>
...
</table>
🎬
Balises Multimédia
<img>
Image. Balise auto-fermante. Attributs src (source) et alt (texte alternatif) obligatoires.
<img src="photo.jpg" alt="Description">
<audio>
Lecteur audio (MP3, WAV, OGG).
<audio controls>
<source src="musique.mp3" type="audio/mp3">
</audio>
<video>
Lecteur vidéo (MP4, WebM, OGG).
<video controls width="400">
<source src="video.mp4" type="video/mp4">
</video>
<source>
Source de média pour <audio> ou <video>. Permet plusieurs formats.
<source src="video.mp4" type="video/mp4">
<iframe>
Intègre une page web externe (YouTube, Google Maps).
<iframe src="https://example.com"
width="600" height="400"></iframe>
<svg>
Graphique vectoriel scalable (dessins, icônes).
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"/>
</svg>
<canvas>
Zone de dessin graphique via JavaScript.
<canvas id="monCanvas" width="400" height="300">
</canvas>
🔧
Balises de Métadonnées
<title>
Titre de la page (affiché dans l'onglet du navigateur).
<title>Ma Page Web</title>
<meta>
Métadonnées (charset, viewport, description, keywords).
<meta charset="UTF-8">
<meta name="description" content="Mon site">
<link>
Lien vers ressource externe (CSS, favicon, fonts).
<link rel="stylesheet" href="style.css">
<style>
CSS interne (dans le <head>).
<style>
body { background: blue; }
</style>
<script>
JavaScript interne ou lien vers fichier JS externe.
<script src="script.js"></script>
<script>
console.log('Hello');
</script>
<base>
URL de base pour tous les liens relatifs de la page.
<base href="https://example.com/">
🔗
Autres Balises Importantes
<a>
Lien hypertexte vers une autre page ou une ancre.
<a href="https://google.com">Google</a>
<a href="#top">Haut de page</a>
<details>
Widget d'affichage/masquage de contenu (accordéon).
<details>
<summary>Cliquez pour voir</summary>
<p>Contenu caché</p>
</details>
<summary>
Titre visible d'un élément <details>.
<summary>Titre visible</summary>
<dialog>
Boîte de dialogue ou fenêtre modale.
<dialog open>
<p>Message dans la modale</p>
</dialog>
<progress>
Barre de progression.
<progress value="70" max="100">70%</progress>
<meter>
Jauge de mesure dans une plage connue.
<meter value="0.7" min="0" max="1">70%</meter>
<address>
Informations de contact (adresse, email, téléphone).
<address>
Contact: <a href="mailto:info@site.com">info@site.com</a>
</address>
<!-- ... -->
Commentaire HTML (invisible pour l'utilisateur).
<!-- Ceci est un commentaire -->