Aide-mémoire HTML
Dernière mise à jour
Structure du document
Chaque page HTML commence par ce squelette.
| Élément | Ce qu'il fait |
|---|---|
<!DOCTYPE html> | Déclare le document comme HTML5 (première ligne) |
<html lang="en"> | Élément racine ; lang définit la langue |
<head> | Métadonnées : titre, liens, scripts - non affichés sur la page |
<meta charset="UTF-8"> | Encodage des caractères (à toujours inclure) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Mise à l'échelle responsive sur mobile |
<title> | Titre de la page affiché dans l'onglet du navigateur et les résultats de recherche |
<body> | Tout ce qui est visible sur la page se place ici |
Texte et titres
| Élément | Ce qu'il fait |
|---|---|
<h1> … <h6> | Titres, <h1> le plus important (un par page) |
<p> | Paragraphe de texte |
<br> | Saut de ligne (pas de balise fermante) |
<hr> | Séparation thématique / trait horizontal |
<strong> | Texte important (gras) |
<em> | Texte mis en valeur (italique) |
<span> | Conteneur en ligne pour styliser un fragment de texte |
<code> | Code en ligne |
<pre> | Texte préformaté (conserve les espaces) |
<blockquote> | Bloc de texte cité |
Liens et images
| Élément | Syntaxe |
|---|---|
| Lien | <a href="https://coddy.tech">Coddy</a> |
| Ouvrir dans un nouvel onglet | <a href="..." target="_blank" rel="noopener"> |
| Ancre (saut vers un id) | <a href="#section">Jump</a> |
| Image | <img src="cat.png" alt="A cat" width="200"> |
| Image responsive | <img src="..." srcset="..." sizes="..."> |
| Figure avec légende | <figure><img ...><figcaption>…</figcaption></figure> |
Listes
| Élément | Ce qu'il fait |
|---|---|
<ul> | Liste non ordonnée (à puces) |
<ol> | Liste ordonnée (numérotée) |
<li> | Élément de liste (dans <ul> ou <ol>) |
<dl> | Liste de descriptions |
<dt> / <dd> | Terme de description / détail de description |
Tableaux
| Élément | Ce qu'il fait |
|---|---|
<table> | Conteneur de tableau |
<thead> / <tbody> / <tfoot> | Groupes d'en-tête, de corps et de pied du tableau |
<tr> | Ligne de tableau |
<th> | Cellule d'en-tête (en gras, centrée) |
<td> | Cellule de données |
colspan / rowspan | Fusionner des cellules sur des colonnes / lignes |
Formulaires et champs
Les briques de base de tout formulaire qui collecte des saisies.
| Élément | Syntaxe / rôle |
|---|---|
| Formulaire | <form action="/submit" method="post"> |
| Champ texte | <input type="text" name="q" placeholder="Search"> |
| E-mail / mot de passe | <input type="email">, <input type="password"> |
| Case à cocher / bouton radio | <input type="checkbox">, <input type="radio"> |
| Nombre / date | <input type="number">, <input type="date"> |
| Étiquette | <label for="q">Search</label> |
| Multiligne | <textarea rows="4"></textarea> |
| Liste déroulante | <select><option>One</option></select> |
| Bouton | <button type="submit">Send</button> |
| Champ obligatoire | <input required> |
Balises sémantiques et de mise en page
Utilisez-les à la place des <div> génériques pour que les navigateurs, les lecteurs d'écran et les moteurs de recherche comprennent votre page.
| Élément | Ce qu'il balise |
|---|---|
<header> | Haut d'une page ou section (logo, navigation) |
<nav> | Liens de navigation |
<main> | Le contenu principal (un par page) |
<section> | Un regroupement thématique de contenu |
<article> | Contenu autonome (article, carte) |
<aside> | Barre latérale / contenu connexe |
<footer> | Bas d'une page ou section |
<div> | Conteneur de bloc générique (sans signification) |
Attributs globaux courants
| Attribut | Ce qu'il fait |
|---|---|
id | Identifiant unique d'un élément |
class | Un ou plusieurs noms de classe (pour le CSS / JS) |
style | CSS en ligne (à utiliser avec parcimonie) |
title | Texte d'infobulle au survol |
data-* | Attribut de données personnalisé, ex. data-id="42" |
hidden | Masque l'élément |
Chaque balise et attribut HTML dont vous avez besoin, regroupés par fonction. Cet aide-mémoire HTML couvre le squelette de la page, le texte et les liens, les images et les médias, les listes, les tableaux, les formulaires et les balises sémantiques qui donnent du sens à votre balisage.
Tout cela est du HTML5 standard et fonctionne dans tous les navigateurs modernes. Copiez une balise, ou ouvrez le playground HTML pour la modifier avec un aperçu en direct - aucune configuration nécessaire.
FAQ de l'aide-mémoire HTML
Cet aide-mémoire HTML est-il gratuit ?
Oui. Cet aide-mémoire HTML est gratuit à utiliser, sans inscription. Mettez-le en favori et revenez dès que vous devez retrouver une balise ou un attribut.
Quelle est la différence entre <section> et <div> ?
<section> est une balise sémantique - elle indique aux navigateurs et aux lecteurs d'écran que son contenu forme un groupe thématique porteur de sens, et elle comporte généralement un titre. <div> ne porte aucune signification et n'est qu'un conteneur générique pour le style ou les scripts. Choisissez une balise sémantique (<section>, <article>, <nav>) quand l'une convient, et ne revenez à <div> que lorsqu'aucune ne convient.Toutes les balises HTML ont-elles besoin d'une balise fermante ?
La plupart oui (
<p>...</p>), mais quelques éléments « vides » n'en ont pas car ils ne peuvent rien contenir : <img>, <br>, <hr>, <input>, <meta> et <link>. En HTML5 vous pouvez les écrire avec ou sans barre oblique finale.Puis-je m'entraîner à HTML en ligne ?
Oui. Ouvrez le playground HTML pour écrire du HTML dans votre navigateur avec un aperçu en direct - aucune installation nécessaire. Quand vous voulez de la structure, le cours HTML interactif gratuit de Coddy enseigne les balises, les formulaires et la mise en page étape par étape.
Cet aide-mémoire convient-il aux débutants ?
Oui. Il commence par le squelette de la page et les balises du quotidien que vous utiliserez en premier, puis passe aux formulaires et au balisage sémantique, pour que vous puissiez utiliser les premières sections dès le premier jour.
Ressources connexes
Plus d'aide-mémoires
