Mémo HTML Complet

Guide pratique avec exemples visuels et référence de 80+ balises

01Structure 02Métadonnées 03Texte 04Liens 05Médias 06Listes & Tableaux 07Formulaires 08Sémantique 09Accessibilité (A11y) 10SEO & Performance 11Référence 80+ balises
01

Structure de base

Squelette HTML5

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre</title>
</head>
<body>
    <!-- Contenu -->
</body>
</html>

Éléments racine

02

Métadonnées

Balises <head>

head
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description 160 car.">
<meta name="author" content="Nom">
<meta name="robots" content="index, follow">
<meta http-equiv="refresh" content="30">

<title>Titre - Site</title>
<base href="https://monsite.com/">

<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<link rel="canonical" href="https://url-officielle.com">

<style> body { margin: 0; } </style>
<script src="app.js" defer></script>
💡 Utilisez defer ou async pour les scripts afin de ne pas bloquer le rendu.
03

Texte & Formatage

Titres, paragraphes, mise en forme

Titres h1 à h6

Rendu

Titre h1 - Principal

Titre h2 - Section

Titre h3 - Sous-section

Titre h4

Titre h5
Titre h6

Formatage de texte

Rendu

strong - texte important (gras)

b - gras sans importance sémantique

em - emphase (italique)

i - italique sans emphase

u - souligné

s - texte barré (obsolète)

del - supprimé / ins - inséré

mark - surligné

small - petit texte

H2O - subscript / X2 - superscript

code - code inline

Ctrl + C - touche clavier

Sortie programme - sample output

x = 5 - variable

Citation courte inline

HTML - abréviation

Titre d'œuvre - citation

Terme - définition

Produit #123

Contact : email@site.com
Code
<strong>Important</strong>  <b>Gras</b>
<em>Emphase</em>  <i>Italique</i>
<u>Souligné</u>  <s>Barré</s>
<del>Supprimé</del>  <ins>Inséré</ins>
<mark>Surligné</mark>  <small>Petit</small>
<sub>Indice</sub>  <sup>Exposant</sup>
<code>Code</code>  <kbd>Touche</kbd>
<abbr title="...">ABR</abbr>
<time datetime="2024-01-15">15 jan</time>

Blocs de texte

Blockquote
"Une citation longue avec la balise blockquote."
— Auteur
Pre (préformaté)
Texte
    préformaté
        avec espaces conservés

Séparateurs

04

Liens & Navigation

Balise <a>

Liens
<!-- Externe -->
<a href="https://google.com">Google</a>

<!-- Nouvel onglet (sécurisé) -->
<a href="url" target="_blank" rel="noopener noreferrer">Lien</a>

<!-- Interne -->
<a href="/page.html">Page</a>
<a href="./dossier/page.html">Relatif</a>

<!-- Ancre -->
<a href="#section">Vers section</a>
<section id="section">Cible</section>

<!-- Email / Téléphone -->
<a href="mailto:contact@site.com">Email</a>
<a href="tel:+33123456789">Appeler</a>

<!-- Téléchargement -->
<a href="doc.pdf" download>Télécharger</a>
<a href="doc.pdf" download="nouveau-nom.pdf">Télécharger</a>
05

Images & Médias

Multimédia HTML5

Images
<!-- Image simple -->
<img src="photo.jpg" alt="Description obligatoire">

<!-- Dimensions + lazy loading -->
<img src="img.jpg" alt="..." width="400" height="300" loading="lazy">

<!-- Figure + légende -->
<figure>
    <img src="img.jpg" alt="...">
    <figcaption>Légende</figcaption>
</figure>

<!-- Image responsive -->
<picture>
    <source media="(min-width:800px)" srcset="large.jpg">
    <source media="(min-width:400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="...">
</picture>

<!-- Image cliquable -->
<a href="page.html"><img src="btn.png" alt="Bouton"></a>
Audio & Vidéo
<!-- Vidéo -->
<video controls width="640" poster="thumb.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track src="sous-titres.vtt" kind="subtitles" srclang="fr">
</video>

<!-- Audio -->
<audio controls loop muted>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

<!-- Iframe (YouTube, maps...) -->
<iframe src="https://youtube.com/embed/ID" allowfullscreen loading="lazy"></iframe>

<!-- Canvas / SVG -->
<canvas id="c" width="300" height="200"></canvas>
<svg width="100" height="100">...</svg>
06

Listes & Tableaux

Organisation des données

Listes

Liste non ordonnée (ul)
  • Élément 1
  • Élément 2
  • Élément 3
Liste ordonnée (ol)
  1. Premier
  2. Deuxième
  3. Troisième
Liste de définitions (dl)
HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Tableaux

Tableau complet
Liste des utilisateurs
Nom Email Rôle
Alice alice@mail.com Admin
Bob bob@mail.com User
Charlie charlie@mail.com User
3 utilisateurs
Table
<table>
    <caption>Titre du tableau</caption>
    <colgroup><col span="2"><col></colgroup>
    <thead>
        <tr><th>Col 1</th><th>Col 2</th></tr>
    </thead>
    <tbody>
        <tr><td>A</td><td>B</td></tr>
        <tr><td colspan="2">Fusionné</td></tr>
        <tr><td rowspan="2">2 lignes</td><td>X</td></tr>
    </tbody>
    <tfoot><tr><td colspan="2">Pied</td></tr></tfoot>
</table>
07

Formulaires

Inputs et validation

Tous les types d'inputs
← champ caché
Checkbox
Radio
Résultat calculé

Attributs de validation

Validation
<input required>                    <!-- Obligatoire -->
<input minlength="3" maxlength="20">  <!-- Longueur -->
<input min="0" max="100" step="5">     <!-- Nombre -->
<input pattern="[A-Za-z]{3}">       <!-- Regex -->
<input placeholder="Indice">        <!-- Placeholder -->
<input readonly>                    <!-- Lecture seule -->
<input disabled>                    <!-- Désactivé -->
<input autofocus>                   <!-- Focus auto -->
<input autocomplete="off">          <!-- Pas d'auto-complétion -->
08

HTML5 Sémantique

Structure moderne

Structure page
<body>
    <header>
        <nav>Navigation</nav>
    </header>
    
    <main>
        <article>
            <header>En-tête article</header>
            <section>Section 1</section>
            <section>Section 2</section>
            <footer>Pied article</footer>
        </article>
        <aside>Sidebar</aside>
    </main>
    
    <footer>Pied de page</footer>
</body>

Éléments interactifs

details / summary
Cliquez pour voir plus

Contenu caché révélé au clic. Très utile pour les FAQ!

Ouvert par défaut

Avec l'attribut open

dialog

Modal Dialog

Contenu de la fenêtre modale.
09

Accessibilité (A11y)

Rendre le web utilisable par tous

📖 Les 3 règles d'or

1. Contraste : Le texte et le fond doivent avoir un contraste suffisant (ratio 4.5:1).

2. Structure : Utiliser les balises sémantiques (h1-h6, nav, button) pour que les lecteurs d'écran comprennent la page.

3. Clavier : Tout doit être accessible sans souris (Tabulation).

Bonnes pratiques
<!-- Alt pour images -->
<img src="cat.jpg" alt="Chat noir qui dort sur un canapé">

<!-- Label pour formulaires -->
<label for="email">Email</label>
<input id="email" type="email">

<!-- ARIA (si HTML ne suffit pas) -->
<div role="alert" aria-live="polite">Erreur de connexion</div>
10

SEO & Performance

Optimisation pour les moteurs

Open Graph (Social)
<meta property="og:title" content="Mon Article">
<meta property="og:image" content="https://site.com/thumb.jpg">
<meta property="og:description" content="Résumé...">
Performance
<!-- Lazy loading -->
<img loading="lazy" ...>
<iframe loading="lazy" ...></iframe>

<!-- Preload (Police critique) -->
<link rel="preload" href="font.woff2" as="font">
11

Référence Complète

80+ balises HTML5

Structure

Document

<!DOCTYPE> <html> <head> <body>

Métadonnées

<title> <meta> <link> <style> <script> <base> <noscript>

Sections

<header> <nav> <main> <article> <section> <aside> <footer> <address> <hgroup>

Texte

Titres

<h1> <h2> <h3> <h4> <h5> <h6>

Blocs

<p> <div> <pre> <blockquote> <hr>

Inline sémantique

<strong> <em> <mark> <cite> <q> <dfn> <abbr> <time> <data>

Inline style

<b> <i> <u> <s> <small> <sub> <sup> <del> <ins>

Code

<code> <kbd> <samp> <var>

Coupures

<br> <wbr> <span>

Liens & Médias

Liens

<a> <nav>

Images

<img> <figure> <figcaption> <picture> <source> <map> <area>

Médias

<video> <audio> <track> <iframe> <embed> <object> <param>

Graphiques

<canvas> <svg>

Listes & Tableaux

Listes

<ul> <ol> <li> <dl> <dt> <dd> <menu>

Tableaux

<table> <caption> <thead> <tbody> <tfoot> <tr> <th> <td> <colgroup> <col>

Formulaires

Structure

<form> <fieldset> <legend> <label>

Inputs

<input> <textarea> <select> <option> <optgroup> <datalist>

Boutons

<button>

Résultats

<output> <progress> <meter>

Interactif & Autres

Interactif

<details> <summary> <dialog>

Script

<script> <noscript> <template> <slot>

Ruby (annotations)

<ruby> <rt> <rp>

Bidirectionnel

<bdi> <bdo>
💡 Total : 85+ balises HTML - Cette référence couvre toutes les balises HTML5 courantes et leur usage.

Testez vos connaissances