Essentiels web

Structure HTML

Structure minimale

HTML

<!DOCTYPE html>
<html lang="fr">
<head></head>
<body></body>
</html>

Structure avec main

HTML

<header>Titre</header>
<main>Contenu</main>
<footer>Informations legales</footer>

Structure complète de page

HTML

<header>
    <h1>Titre du site</h1>
    <nav>Liens</nav>
</header>

<main>
    <section>
        <h2>Section</h2>
        <p>Texte</p>
    </section>
</main>

<footer>
    <p>Mentions légales</p>
</footer>

Variantes possibles : plusieurs sections, articles, aside.

Utiliser <section> pour regrouper un thème

HTML

<section>
    <h2>Fonctionnalités</h2>
    <p>Description du bloc.</p>
</section>

Bon usage : un titre interne obligatoire.

Utiliser <article> pour un contenu autonome

HTML

<article>
    <h2>Actualité</h2>
    <p>Texte indépendant.</p>
</article>

Bon usage : contenu pouvant exister seul (RSS, partage...).

Utiliser <aside> pour du contenu connexe

HTML

<aside>
    <h2>À lire aussi</h2>
    <ul>
        <li>Lien 1</li>
        <li>Lien 2</li>
    </ul>
</aside>

Bon usage : contenu secondaire lié au principal.

Utiliser <nav> pour une navigation

HTML

<nav aria-label="Navigation principale">
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Bon usage : uniquement pour des liens de navigation.

Utiliser <figure> + <figcaption>

HTML

<figure>
    <img src="img.jpg" alt="Description">
    <figcaption>Légende de l’image</figcaption>
</figure>

Bon usage : images, graphiques, extraits de code, citations.

Utiliser <blockquote> pour une citation

HTML

<blockquote cite="https://source.com">
    <p>Texte cité.</p>
</blockquote>

Bon usage : citation longue, avec source si possible.

Utiliser <address> pour des coordonnées

HTML

<address>
    Contact : <a href="mailto:contact@example.com">contact@example.com</a>
</address>

Bon usage : coordonnées d’une personne ou organisation.

Utiliser <details> + <summary>

HTML

<details>
    <summary>Voir plus</summary>
    <p>Contenu caché.</p>
</details>

Bon usage : FAQ, contenu secondaire.

Accessibilité

Image informative

HTML

<img src="img.jpg" alt="Description">

Image décorative

HTML

<img src="shape.svg" aria-hidden="true" alt="">

Variantes possibles : alt vide pour décoratif.

Bouton accessible

HTML

<button aria-label="Ouvrir le menu">☰</button>

Bon usage : aria-label quand le texte n’est pas explicite.

Zone avec titre associé

HTML

<section aria-labelledby="t1">
    <h2 id="t1">Titre de section</h2>
    <p>Contenu.</p>
</section>

Bon usage : aria-labelledby pour relier un titre.

Formulaire avec label lié

HTML

<label for="email">Email</label>
<input id="email" type="email">

Bon usage : jamais de placeholder seul.

Champ obligatoire annoncé

HTML

<label for="name">Nom</label>
<input id="name" aria-required="true">

Bon usage : aria-required pour lecteurs d’écran.

Liste de navigation structurée

HTML

<nav aria-label="Navigation principale">
    <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Bon usage : aria-label pour préciser le rôle.

Skip link : aller au contenu

HTML

<a href="#main" class="skip">Aller au contenu</a>

CSS

.skip {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-100%);
}

.skip:focus { transform: translateY(0); }

Bon usage : toujours premier, visible uniquement au focus clavier.

État dynamique ARIA

HTML

<button id="menuBtn" aria-expanded="false" aria-controls="menuPanel">
    Menu
</button>

<nav id="menuPanel" hidden>
    <ul>
        <li><a href="#">Lien 1</a></li>
        <li><a href="#">Lien 2</a></li>
    </ul>
</nav>

JS

menuBtn.onclick = () => {
    const expanded = menuBtn.getAttribute("aria-expanded") === "true";
    menuBtn.setAttribute("aria-expanded", !expanded);
    menuPanel.hidden = expanded;
};

Bon usage : aria-expanded reflète toujours l’état réel du menu.

Élément décoratif ignoré

HTML

<div class="card">
    <span class="icon" aria-hidden="true">★</span>
    <h3>Titre</h3>
    <p>Texte utile.</p>
</div>

CSS

.icon {
    font-size: 2rem;
    color: #ccc;
}

Bon usage : aria-hidden="true" sur les éléments purement visuels.

Tableau accessible

HTML

<table>
    <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Alice</th>
            <td>24</td>
        </tr>
    </tbody>
</table>

Bon usage : scope="col" / scope="row".

SEO

Titre & Description SEO

HTML

<title>Titre de la page</title>
<meta name="description" content="Texte clair adaptée au contenu.">

Canonical

HTML

<link rel="canonical" href="https://example.com/page">

Bon usage : une seule URL canonique par page.

Meta robots

HTML

<meta name="robots" content="index, follow">

Variantes possibles : noindex, nofollow, noarchive…

Open Graph de base

HTML

<meta property="og:title" content="Titre de la page">
<meta property="og:description" content="Résumé clair.">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

Bon usage : cohérent avec title + meta description.

Hreflang pour versions linguistiques

HTML

<link rel="alternate" href="https://example.com/fr/page" hreflang="fr">
<link rel="alternate" href="https://example.com/en/page" hreflang="en">

Bon usage : une entrée par langue / région.

Données structurées JSON-LD

HTML

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Nom du site",
    "url": "https://example.com"
}
</script>

Bon usage : adapté au type de contenu (Article, Product…).

Favicons & Manifest

Icons & Manifest

Safari

HTML index

<link rel="icon" href="./favicon.svg" type="image/svg+xml">
<link rel="icon" href="./favicon.ico" sizes="any">

HTML sous pages

<link rel="icon" href="../favicon.svg" type="image/svg+xml">
<link rel="icon" href="../favicon.ico" sizes="any">

Safari ne supporte pas WebP comme favicon. SVG + ICO est recommandé.

iOS

HTML index

<link rel="apple-touch-icon" href="./apple-touch-icon.png">

HTML sous pages

<link rel="apple-touch-icon" href="../apple-touch-icon.png">

iOS ignore SVG et WebP. PNG est obligatoire.

Chrome Edge Firefox

HTML index

<link rel="icon" href="./favicon.svg" type="image/svg+xml">
<link rel="icon" href="./favicon.ico" sizes="any">

HTML sous pages

<link rel="icon" href="../favicon.svg" type="image/svg+xml">
<link rel="icon" href="../favicon.ico" sizes="any">

SVG est recommandé. ICO reste le fallback universel.

WebP optionnel

HTML index

<link rel="icon" href="./assets/icon.webp" type="image/webp">

HTML sous pages

<link rel="icon" href="../assets/icon.webp" type="image/webp">

WebP n’est pas supporté par Safari et iOS. À utiliser en complément.

Manifest

HTML index

<link rel="manifest" href="./site.webmanifest">

HTML sous pages

<link rel="manifest" href="../site.webmanifest">

À utiliser uniquement si le site est une PWA.

Layout

Stack vertical

HTML

<div class="stack">
    <div>Bloc 1</div>
    <div>Bloc 2</div>
    <div>Bloc 3</div>
</div>

CSS

.stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Grid responsive

HTML

<div class="auto-grid">
    <div>Bloc 1</div>
    <div>Bloc 2</div>
    <div>Bloc 3</div>
    <div>Bloc 4</div>
</div>

CSS

.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Variantes possibles : minmax personnalisé.

Layout masonry : tailles libres, sans symétrie

HTML

<div class="masonry">
    <div class="item">Bloc 1</div>
    <div class="item">Bloc 2 plus long</div>
    <div class="item">Bloc 3 encore plus long avec plus de texte</div>
    <div class="item">Bloc 4</div>
</div>

CSS

.masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: masonry;
    gap: 1rem;
}

Bon usage : chaque bloc a sa propre hauteur, aucun alignement forcé.

Typographie

Texte compact non cassable

HTML

<span class="compact">Label important</span>

CSS

.compact {
    white-space: nowrap;      /* empêche tout retour à la ligne */
    font-weight: 600;         /* poids lisible */
    letter-spacing: 0.02em;   /* léger tracking */
    line-height: 1.2;         /* hauteur compacte */
    overflow: hidden;         /* évite les débordements */
    text-overflow: ellipsis;  /* ajoute ... si trop long */
    display: inline-block;    /* permet un contrôle précis */
    max-width: 100%;          /* évite de casser la mise en page */
}

Bon usage : badges, tags, labels, boutons, éléments courts non cassables.

Hauteur de ligne lisible

CSS

.txt {
    line-height: 1.5;
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
}

Variantes possibles : 1.4 → 1.7.

Bon usage : légendes, labels, infos secondaires.

Échelle typographique

CSS

:root {
    --fs-1: clamp(0.85rem, 1.5vw, 1rem);
    --fs-2: clamp(1rem, 2vw, 1.25rem);
    --fs-3: clamp(1.25rem, 3vw, 1.5rem);
    --fs-4: clamp(1.5rem, 4vw, 2rem);
}

Bon usage : cohérence typographique sur tout le site.

Images

Image optimisée

HTML

<img src="img.webp" alt="Texte">

Image responsive

HTML

<img src="img-800.webp" srcset="img-400.webp 400w, img-800.webp 800w" alt="Texte">

Variantes possibles : srcset, sizes.

Performance

Préconnecter un domaine

HTML

<link rel="preconnect" href="https://cdn.example.com">

Précharger une police

HTML

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Variantes possibles : preload, preconnect.

JS minimal

Toggle simple

HTML

<button id="t">Toggle</button>
<div id="box">Texte</div>

JS

t.onclick = () => box.classList.toggle("open");

CSS

.open {
    display: block;
}

Variantes possibles : toggle class.

Patterns essentiels

Wrapper

CSS

.wrapper {
    max-width: 60ch;
    margin-inline: auto;
}

Center

CSS

.center {
    display: grid;
    place-content: center;
}

Variantes possibles : flex, grid.

Micro‑UX

Highlight au clic

CSS

.click:active {
    background: #eee;
}

Ripple minimal

CSS

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple:active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.1);
}

Variantes possibles : highlight, ripple.