Cheatsheets
Cheatsheets
Références rapides pour les commandes et syntaxes essentielles.
HTML
HTML Cheatsheet
Petit pense-bête des balises HTML les plus utiles, triées par catégories.
# Structure de base
| Balise | Utilité |
|---|---|
<html> | Racine du document HTML |
<head> | Contient les métadonnées, liens, scripts |
<body> | Contient le contenu visible de la page |
<!DOCTYPE html> | Indique la version HTML utilisée |
<title> | Définit le titre affiché dans l'onglet du navigateur |
# Texte & typographie
| Balise | Utilité |
|---|---|
<h1> → <h6> | Titres de différents niveaux |
<p> | Paragraphe |
<br> | Saut de ligne |
<hr> | Ligne horizontale de séparation |
<b> | Met en gras (visuel uniquement) |
<strong> | Met en avant (importance sémantique) |
<i> | Italique visuel |
<em> | Mise en emphase sémantique |
<u> | Souligner |
<mark> | Surligner un texte |
<small> | Réduit la taille du texte |
<sup> / <sub> | Exposant / indice |
<blockquote> | Citation longue |
<q> | Citation courte |
<abbr> | Abréviation avec info |
<code> | Code inline |
<pre> | Bloc de code préformaté |
# Liens & navigation
| Balise | Utilité |
|---|---|
<a href=""> | Lien hypertexte |
<nav> | Conteneur de navigation |
<link> | Lien vers des ressources (CSS, favicon, etc.) |
# Médias
| Balise | Utilité |
|---|---|
<img src="" alt=""> | Image avec texte alternatif |
<figure> / <figcaption> | Regroupe une image et sa légende |
<video> | Lecture vidéo native |
<audio> | Lecture audio native |
<source> | Spécifie plusieurs formats |
<iframe> | Intégrer un contenu externe |
<canvas> | Zone de dessin 2D ou 3D |
<svg> | Graphiques vectoriels |
<picture> | Image responsive avec plusieurs sources |
# Listes & tableaux
| Balise | Utilité |
|---|---|
<ul> | Liste non ordonnée |
<ol> | Liste ordonnée |
<li> | Élément de liste |
<dl> / <dt> / <dd> | Liste de définitions |
<table> | Tableau |
<thead> / <tbody> / <tfoot> | Sections du tableau |
<tr> | Ligne du tableau |
<th> | Cellule d'en-tête |
<td> | Cellule de données |
<caption> | Légende du tableau |
# Formulaires
| Balise | Utilité |
|---|---|
<form> | Conteneur du formulaire |
<input> | Champ de saisie (texte, email, mot de passe, etc.) |
<textarea> | Zone de texte multi-ligne |
<button> | Bouton cliquable |
<select> / <option> | Liste déroulante |
<label> | Étiquette liée à un champ |
<fieldset> / <legend> | Regroupe des champs liés |
<output> | Affiche le résultat d'un calcul |
<datalist> | Liste de suggestions pour un champ |
# Sémantique & accessibilité
| Balise | Utilité |
|---|---|
<header> | En-tête de page ou de section |
<footer> | Pied de page |
<main> | Contenu principal |
<section> | Section thématique |
<article> | Contenu indépendant (ex: post de blog) |
<aside> | Contenu annexe |
<details> / <summary> | Bloc déroulant |
<time> | Heure ou date |
<address> | Coordonnées de contact |
<meta> | Métadonnées (SEO, charset, etc.) |
# Scripts & intégrations
| Balise | Utilité |
|---|---|
<script> | Inclut du JavaScript |
<noscript> | Contenu affiché si JS désactivé |
<style> | CSS inline dans le document |
<template> | Contenu HTML non affiché (JS peut l'utiliser) |
<slot> | Zone d'injection pour Web Components |
# Head & métadonnées
| Balise | Utilité |
|---|---|
<meta charset="UTF-8"> | Définit l'encodage |
<meta name="viewport"> | Gère l'affichage mobile |
<meta name="description"> | Description SEO |
<link rel="stylesheet"> | Feuille de style CSS |
<link rel="icon"> | Favicon du site |
Astuce : HTML5 se base sur la sémantique — choisis la balise qui décrit le rôle du contenu, pas juste son apparence.