Une vue d'ensemble compacte de tout l'arsenal HTML à votre disposition.
Structure
Document
<!DOCTYPE>Déclare
la version de HTML utilisée (HTML5). Doit être la première ligne.<!DOCTYPE html>
<html>La
racine
du document. L'attribut lang est recommandé.<html
lang="fr">
<head>Contient
les métadonnées invisibles (titre, scripts, styles).<head>...</head>
<body>Contient
tout le contenu visible de la page.<body><h1>Bonjour</h1></body>
Métadonnées
<title>Définit le
titre affiché dans l'onglet du navigateur et les résultats Google.<title>Mon Site</title>
<meta>Métadonnées
diverses : encodage, viewport, description SEO...<meta
charset="UTF-8">
<link>Lie
une
ressource externe (CSS, Favicon).<link
rel="stylesheet"
href="style.css">
<style>Définit
des styles CSS internes au document.<style>body
{
color: red; }</style>
<script>Intègre
ou référence un script JavaScript.<script
src="app.js"></script>
<base>Définit
l'URL de base pour tous les liens relatifs.<base
href="https://site.com/">
<noscript>Affiché
uniquement si JS est désactivé.<noscript>Activez JS
!</noscript>
Sections
<header>En-tête
d'une page ou d'une section.<header><h1>Logo</h1></header>
<nav>Section de
liens de navigation principale.<nav><a
href="/">Accueil</a></nav>
<main>Contenu
principal unique de la page.<main>...</main>
<article>Contenu
autonome et indépendant (post, widget).<article><h2>Titre</h2>...</article>
<section>Regroupement thématique de contenu, généralement avec un
titre.<section><h2>Intro</h2>...</section>
<aside>Contenu
indirectement lié au principal (sidebar, pub).<aside>Pub...</aside>
<footer>Pied de
page ou de section.<footer>©
2024</footer>
<address>Informations de contact de l'auteur.<address>contact@site.com</address>
<hgroup>Groupe un
titre et un sous-titre.<hgroup><h1>Titre</h1><p>Sub</p></hgroup>
Texte
Titres
<h1>Titre
principal (le plus important). 1 par page max.<h1>Titre
Page</h1>
<h2>Titre
de
section.<h2>Chapitre
1</h2>
<h3>...<h6>Sous-titres de h3 à h6 par ordre d'importance
décroissante.<h3>Sous-section</h3>
Blocs
<p>Paragraphe de
texte. Ajoute une marge par défaut.<p>Texte...</p>
<div>Conteneur
générique de bloc sans sens sémantique.<div
class="box">...</div>
<pre>Texte
préformaté. Conserve espaces et sauts de ligne.<pre>
Code </pre>
<blockquote>Citation longue (bloc).<blockquote>"..."</blockquote>
<hr>Rupture
thématique (ligne horizontale).<hr>
Inline sémantique
<strong>Importance forte (généralement gras).<strong>Attention</strong>
<em>Emphase
(généralement italique).<em>Important</em>
<mark>Texte
surligné (mise en évidence).<mark>Trouvé</mark>
<cite>Titre d'une
œuvre (livre, film).<cite>Titanic</cite>
<q>Citation
courte inline. Ajoute des guillemets.<q>Bonjour</q>
<dfn>Terme en
cours de définition.<dfn>HTML</dfn>
est...
<abbr>Abréviation
ou acronyme.<abbr
title="Super">Sup.</abbr>
<time>Date ou
heure machine-readable.<time
datetime="2024-01-01">Jan
1</time>
Inline style
<b>Gras
sans
importance sémantique.<b>Mot</b>
<i>Italique sans
emphase (terme technique, pensée).<i>Latin</i>
<u>Souligné
(non-lien), ex: faute d'orthographe.<u>Faute</u>
<s>Barré
(info
plus valide).<s>10€</s>
5€
<small>Petits
caractères (copyright, mentions légales).<small>©
2024</small>
<sub>Indice.H<sub>2</sub>O
<sup>Exposant.1<sup>er</sup>
Code
<code>Fragment de
code informatique.<code>print()</code>
<kbd>Entrée
utilisateur (clavier).<kbd>Ctrl</kbd> +
<kbd>C</kbd>
<samp>Sortie d'un
programme.<samp>Error
404</samp>
<var>Variable
mathématique ou informatique.<var>x</var>
=
2
Coupures
<br>Saut
de ligne
contraint.Ligne 1<br>Ligne
2
<wbr>Saut
de
ligne optionnel (Word Break Opportunity).Long<wbr>Mot
<span>Conteneur
générique inline sans sens sémantique.<span
class="red">Mot</span>
Liens & Médias
Liens
<a>Lien
hypertexte vers une autre page, un fichier, ou une ancre.<a href="page.html">Lien</a>
<nav>Section
contenant les liens de navigation principaux.<nav>...</nav>
Images
<img>Image
intégrée. Nécessite alt pour l'accessibilité.<img
src="img.jpg" alt="...">
<figure>Contenu
autonome avec légende optionnelle (image, code, diagramme).<figure><img...></figure>
<figcaption>Légende associée à un parent <figure>.<figcaption>Img 1</figcaption>
<picture>Conteneur pour images responsives (multi-sources).<picture>...</picture>
<source>Définit
une ressource pour <picture>, <audio> ou <video>.<source srcset="img.webp">
<map>Définit une
carte d'image (zones cliquables).<map
name="m">...</map>
<area>Zone
cliquable dans une <map>.<area
coords="0,0,10,10">
Médias
<video>Lecteur
vidéo intégré.<video src="v.mp4"
controls>
<audio>Lecteur
audio intégré.<audio src="a.mp3"
controls>
<track>Piste
texte (sous-titres) pour média.<track src="s.vtt"
kind="subtitles">
<iframe>Cadre en
ligne (affiche une autre page web).<iframe
src="https://...">
<embed>Conteneur
pour application externe ou plug-in.<embed
src="f.swf">
<object>Conteneur
générique pour ressource externe.<object
data="doc.pdf">
<param>Paramètre
pour <object>.<param name="autoplay"
value="true">
Graphiques
<canvas>Zone de
dessin bitmap scriptable (JS).<canvas
id="game">
<svg>Graphique
vectoriel (Scalable Vector Graphics).<svg><circle...></svg>
Listes & Tableaux
Listes
<ul>Liste
non
ordonnée (puces rondes).<ul><li>Item</li></ul>
<ol>Liste
ordonnée (1, 2, 3...).<ol><li>Item</li></ol>
<li>Élément de
liste (List Item).<li>Pain</li>
<dl>Liste
de
description (clé-valeur).<dl><dt>...</dt></dl>
<dt>Terme
à
définir dans une liste de description.<dt>HTML</dt>
<dd>Définition/Description du terme précédent.<dd>Langage...</dd>
<menu>Liste de
commandes (similaire à ul sémantiquement).<menu><li>Copier</li></menu>
Tableaux
<table>Conteneur
de tableau.<table>...</table>
<caption>Titre du
tableau.<caption>Prix</caption>
<thead>Groupe
d'en-tête (lignes de titres).<thead><tr>...</tr></thead>
<tbody>Corps
principal du tableau (données).<tbody>...</tbody>
<tfoot>Pied du
tableau (totaux).<tfoot>...</tfoot>
<tr>Ligne
de
tableau (Table Row).<tr><td>A</td></tr>
<th>Cellule
d'en-tête (gras, centré).<th>Nom</th>
<td>Cellule de
données standard.<td>Bob</td>
<colgroup>Groupe
de colonnes pour styling.<colgroup><col>...
<col>Définit les
attributs d'une colonne.<col span="2"
class="red">
Formulaires
Structure
<form>Conteneur
de formulaire pour l'envoi de données.<form
action="/login">
<fieldset>Groupe
d'éléments de formulaire liés.<fieldset>...</fieldset>
<legend>Titre
d'un <fieldset>.<legend>Identité</legend>
<label>Libellé
associé à un champ de formulaire.<label
for="email">Email</label>
Inputs
<input>Champ de
saisie interactif (nombreux types).<input
type="password">
<textarea>Zone de
texte multiligne.<textarea
rows="5"></textarea>
<select>Menu
déroulant d'options.<select><option>A</option></select>
<option>Option
dans un menu select.<option
value="1">Un</option>
<optgroup>Groupe
d'options dans un select.<optgroup
label="Pays">
<datalist>Liste
de suggestions pour un input.<datalist
id="villes">
Boutons
<button>Bouton
cliquable (submit, reset, button).<button>Envoyer</button>
Résultats
<output>Résultat
d'un calcul ou action utilisateur.<output
name="total">
<progress>Progression d'une tâche (téléchargement).<progress value="50" max="100">
<meter>Mesure
scalaire dans une gamme connue (disque utilisé).<meter
value="0.8">
Interactif & Autres
Interactif
<details>Widget
de divulgation (accordéon) affichant/masquant du contenu.<details><summary>Titre</summary>...</details>
<summary>Légende/Titre visible pour un élément
<details>.<summary>Plus
d'infos</summary>
<dialog>Boîte de
dialogue ou fenêtre modale.<dialog><p>Bonjour</p></dialog>
Script
<script>Code
exécutable (JavaScript).<script>console.log('Hi')</script>
<noscript>Contenu
alternatif si le script est désactivé.<noscript>Activez
JS</noscript>
<template>Contenu
inerte clonable par JavaScript.<template><div>...</div></template>
<slot>Emplacement
(placeholder) dans un Shadow DOM.<slot
name="icon"></slot>
Ruby (annotations)
<ruby>Annotation
ruby (typo asiatique).<ruby>漢<rt>kan</rt></ruby>
<rt>Texte
de
l'annotation ruby.<rt>kan</rt>
<rp>Parenthèses
pour navigateurs ne supportant pas ruby.<rp>(</rp>
Bidirectionnel
<bdi>Isolation
bidirectionnelle de texte.<bdi>Username</bdi>
<bdo>Override
bidirectionnel (force la direction).<bdo
dir="rtl">Texte</bdo>
💡 Total : 85+ balises HTML - Cette
référence
couvre toutes les balises HTML5 courantes et leur usage.
