Aide-memoire

HTML

Les balises et habitudes essentielles pour structurer une page propre, lisible et accessible.

Projet videStructureFormulairesAccessibilite
doc

Structure de base

<!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 ici
</body>
</html>
txt

Balises principales

  • <h1>titre principal
  • <p>paragraphe
  • <a>lien
  • <img>image avec texte alternatif
  • <ul>liste non ordonnee
att

Attributs

classidhrefsrcalttitletargetreltypeplaceholder
form

Formulaires

<form action="#" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Envoyer</button>
</form>
inputtextareaselectbuttonlabel
tbl

Tableaux

<table>
  <thead><tr><th>Nom</th></tr></thead>
  <tbody><tr><td>Alice</td></tr></tbody>
</table>
seo

Meta & SEO

<meta name="description" content="Mon site">
<meta property="og:title" content="Titre partage">
sem

Semantique

headernavmainsectionarticleasidefooter
a11y

Accessibilite

  • Mettre un alt utile sur les images.
  • Utiliser des labels explicites pour les champs.
  • Garder une hierarchie logique des titres.
  • Ajouter ARIA seulement quand le HTML natif ne suffit pas.
use

Cas concret : carte article

<article>
  <h3>Titre de l'article</h3>
  <p>Resume court et utile.</p>
  <a href="/blog/article">Lire la suite</a>
</article>

Titre de l'article

Resume court et utile pour comprendre le contenu en un coup d'oeil.

Lire la suite
nav

Cas concret : navigation

<nav aria-label="Navigation principale">
  <a href="/">Accueil</a>
  <a href="/services">Services</a>
  <a href="/contact">Contact</a>
</nav>
msg

Cas concret : formulaire contact

<form>
  <label for="nom">Nom</label>
  <input id="nom" name="nom" required>

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Envoyer</button>
</form>
fig

Cas concret : image avec legende

<figure>
  <img src="site.jpg" alt="Capture du site">
  <figcaption>Accueil du site</figcaption>
</figure>
Image
Accueil du site
data

Cas concret : tableau lisible

<table>
  <caption>Tarifs</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
Tarifs
OffrePrix
Site vitrine890 EUR
Maintenance49 EUR/mois
todo

Checklist avant livraison

  • Un seul <h1> par page.
  • Chaque image informative a un alt.
  • Chaque champ de formulaire a un label.
  • Les liens ont un texte explicite.
  • La page contient un <main>.