Structure HTML
Toute page HTML commence par la déclaration DOCTYPE et suit une structure de base avec les éléments <html>, <head> et <body>.
| Élément | Description | Exemple |
|---|---|---|
<!DOCTYPE html> | Déclare le document comme HTML5 | Première ligne de tout fichier HTML |
<html> | Élément racine contenant tout le document | <html lang="fr">...</html> |
<head> | En-tête avec métadonnées, titre, liens CSS | <head><title>Page</title></head> |
<body> | Corps du document, contenu visible | <body><h1>Bonjour</h1></body> |
<meta> | Balise auto-fermante pour métadonnées | <meta charset="UTF-8"> |
<title> | Titre affiché dans l'onglet du navigateur | <title>Mon Site</title> |
<link> | Lien vers une ressource externe (CSS, favicon) | <link rel="stylesheet" href="style.css"> |
<style> | Bloc de styles CSS intégrés | <style>body { margin: 0; }</style> |
<script> | Inclut ou exécute du JavaScript | <script src="app.js"></script> |
<noscript> | Contenu affiché si JS est désactivé | <noscript>Activez JS</noscript> |
Exemple complet
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bienvenue !</h1>
<script src="app.js"></script>
</body>
</html>Titres (h1 - h6)
Les titres structurent le contenu en hiérarchie. <h1> est le titre principal (un seul par page), jusqu'à <h6>.
| Balise | Niveau | Exemple |
|---|---|---|
<h1> | Titre principal | <h1>Titre principal</h1> |
<h2> | Sous-titre de section | <h2>Section</h2> |
<h3> | Sous-section | <h3>Sous-section</h3> |
<h4> | Titre de groupe | <h4>Groupe</h4> |
<h5> | Titre de sous-groupe | <h5>Sous-groupe</h5> |
<h6> | Niveau le plus bas | <h6>Détail</h6> |
Astuce SEO
Utilisez un seul <h1> par page et respectez la hiérarchie (pas de saut de h2 à h4). Cela améliore l'accessibilité et le référencement.
Texte & Paragraphes
| Balise | Description | Exemple |
|---|---|---|
<p> | Paragraphe | <p>Texte ici.</p> |
<br> | Saut de ligne (auto-fermante) | Ligne 1<br>Ligne 2 |
<hr> | Ligne horizontale de séparation | <hr> |
<pre> | Texte préservant l'espacement | <pre> espace </pre> |
Liens (a)
L'élément <a> crée des hyperliens vers d'autres pages, fichiers ou ancres.
| Attribut | Description | Exemple |
|---|---|---|
href | URL de destination | <a href="page.html"> |
target | Où ouvrir le lien | _blank, _self, _parent, _top |
rel | Relation avec la page cible | noopener noreferrer, nofollow |
download | Télécharger au lieu de naviguer | <a href="file.pdf" download> |
title | Infobulle au survol | <a href="/" title="Accueil"> |
HTML
<!-- Lien externe -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Externe</a>
<!-- Ancre interne -->
<a href="#section2">Aller à la section 2</a>
<h2 id="section2">Section 2</h2>
<!-- Téléchargement -->
<a href="doc.pdf" download="document.pdf">Télécharger PDF</a>Images (img)
L'élément <img> est auto-fermé et affiche une image. L'attribut alt est obligatoire pour l'accessibilité.
| Attribut | Description | Valeurs |
|---|---|---|
src | Chemin vers l'image | URL ou chemin relatif |
alt | Texte alternatif (obligatoire) | Description de l'image |
width | Largeur en pixels | Nombre entier |
height | Hauteur en pixels | Nombre entier |
loading | Chargement différé | lazy, eager |
srcset | Images responsives | Liste de sources avec densité |
HTML
<img src="photo.jpg" alt="Description" width="300" height="200" loading="lazy">
<!-- Image responsive -->
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Paysage"
>
Important
Toujours inclure l'attribut alt pour les lecteurs d'écran. Utilisez loading="lazy" pour les images hors écran afin d'améliorer les performances.
Listes
| Balise | Description | Exemple |
|---|---|---|
<ul> | Liste à puces (unordered) | <ul><li>Item</li></ul> |
<ol> | Liste numérotée (ordered) | <ol><li>Item</li></ol> |
<li> | Élément de liste | <li>Texte</li> |
<dl> | Liste de définitions | <dl><dt><dd></dl> |
<dt> | Terme à définir | <dt>HTML</dt> |
<dd> | Définition du terme | <dd>Langage de balisage</dd> |
HTML
<ul>
<li>Pomme</li>
<li>Orange</li>
</ul>
<ol start="5" type="A">
<li>Premier</li>
<li>Deuxième</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>Tableaux
Les tableaux affichent des données sous forme de lignes et colonnes.
| Balise | Description |
|---|---|
<table> | Conteneur principal du tableau |
<thead> | En-tête du tableau |
<tbody> | Corps du tableau |
<tfoot> | Pied de tableau |
<tr> | Ligne du tableau |
<th> | Cellule d'en-tête (gras) |
<td> | Cellule de données |
| Attribut | Description | Exemple |
|---|---|---|
colspan | Fusionner des colonnes | <td colspan="2"> |
rowspan | Fusionner des lignes | <td rowspan="3"> |
scope | Portée de l'en-tête | col, row |
HTML
<table>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Âge</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">Total : 1 personne</td>
</tr>
</tbody>
</table>Formulaires
Les formulaires permettent la collecte de données utilisateur.
Éléments de formulaire
| Balise | Description |
|---|---|
<form> | Conteneur du formulaire |
<input> | Champ de saisie (auto-fermant) |
<label> | Étiquette liée à un champ |
<select> | Liste déroulante |
<option> | Option dans une liste |
<optgroup> | Groupe d'options |
<textarea> | Zone de texte multi-lignes |
<button> | Bouton d'action |
<fieldset> | Groupe logique de champs |
<legend> | Titre d'un fieldset |
<datalist> | Suggestions prédéfinies pour un input |
<output> | Résultat d'un calcul |
Types d'input
| Type | Description | Exemple |
|---|---|---|
text | Texte simple | <input type="text"> |
password | Mot de passe masqué | <input type="password"> |
email | Saisie d'email (validation auto) | <input type="email"> |
number | Nombre avec contrôles | <input type="number" min="0" max="100"> |
tel | Numéro de téléphone | <input type="tel"> |
url | Saisie d'URL | <input type="url"> |
search | Champ de recherche | <input type="search"> |
date | Sélecteur de date | <input type="date"> |
time | Sélecteur d'heure | <input type="time"> |
datetime-local | Date et heure locales | <input type="datetime-local"> |
month | Sélecteur mois/année | <input type="month"> |
week | Sélecteur semaine | <input type="week"> |
range | Curseur (slider) | <input type="range" min="0" max="100"> |
color | Sélecteur de couleur | <input type="color"> |
file | Sélection de fichier | <input type="file" accept="image/*"> |
hidden | Champ invisible | <input type="hidden" value="abc"> |
checkbox | Case à cocher | <input type="checkbox"> |
radio | Bouton radio (sélection unique) | <input type="radio" name="choix"> |
Attributs des inputs
| Attribut | Description |
|---|---|
name | Nom du champ (clé dans les données envoyées) |
value | Valeur par défaut du champ |
placeholder | Texte d'aide grisé |
required | Champ obligatoire |
disabled | Champ désactivé |
readonly | Champ en lecture seule |
min / max | Valeurs min/max (nombre, date) |
minlength / maxlength | Longueur min/max du texte |
pattern | Expression régulière de validation |
autofocus | Focus automatique au chargement |
autocomplete | Autoriser l'autocomplétion |
multiple | Autoriser plusieurs valeurs |
HTML
<form action="/submit" method="POST">
<fieldset>
<legend>Informations</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" placeholder="nom@example.com">
<label for="mdp">Mot de passe :</label>
<input type="password" id="mdp" name="mdp" minlength="8">
<label for="pays">Pays :</label>
<select id="pays" name="pays">
<option value="">-- Choisir --</option>
<option value="FR">France</option>
<option value="BE">Belgique</option>
</select>
<textarea name="message" rows="4" cols="50"></textarea>
<button type="submit">Envoyer</button>
</fieldset>
</form>Éléments sémantiques
Les éléments sémantiques donnent un sens au contenu, améliorant l'accessibilité et le SEO.
| Balise | Description |
|---|---|
<header> | En-tête d'une section ou de la page |
<nav> | Bloc de navigation |
<main> | Contenu principal (unique par page) |
<section> | Section thématique du contenu |
<article> | Contenu autonome (article, post) |
<aside> | Contenu secondaire (sidebar) |
<footer> | Pied d'une section ou de la page |
<figure> | Contenu illustré (image, graphique) |
<figcaption> | Légende d'une figure |
<details> | Contenu pliable/dépliable |
<summary> | Résumé d'un élément details |
<mark> | Texte surligné/mis en avant |
<time> | Date ou heure (machine-readable) |
<progress> | Barre de progression |
<meter> | Jauge / mesure scalaire |
HTML
<header>
<nav><a href="/">Accueil</a></nav>
</header>
<main>
<article>
<h2>Mon Article</h2>
<time datetime="2026-01-15">15 janvier 2026</time>
<p>Contenu...</p>
<figure>
<img src="photo.jpg" alt="Description">
<figcaption>Légende</figcaption>
</figure>
</article>
<aside><h3>Articles connexes</h3></aside>
</main>
<footer><p>© 2026</p></footer>Formatage de texte
| Balise | Description | Rendu |
|---|---|---|
<strong> | Texte important (gras sémantique) | Gras |
<b> | Gras sans importance sémantique | Gras |
<em> | Accentuation (italique sémantique) | Italique |
<i> | Italique sans importance sémantique | Italique |
<mark> | Texte surligné | Surligné |
<small> | Texte de petite taille | Petit |
<del> | Texte supprimé (barré) | |
<ins> | Texte inséré (souligné) | Inséré |
<s> | Texte obsolète (barré) | |
<sub> | Indice (subscript) | H2O |
<sup> | Exposant (superscript) | x2 |
<code> | Code en ligne | code |
<kbd> | Entrée clavier | Ctrl+C |
<samp> | Sortie d'un programme | Error |
<var> | Variable mathématique | x + y |
<abbr> | Abréviation | HTML |
<blockquote> | Citation longue | Citation en bloc |
<q> | Citation courte | Citation inline |
<cite> | Titre d'une œuvre | Titre cité |
Médias
| Balise | Description | Attributs clés |
|---|---|---|
<video> | Lecteur vidéo intégré | src, controls, autoplay, muted, loop, poster |
<audio> | Lecteur audio intégré | src, controls, autoplay, muted, loop |
<source> | Source alternative (dans video/audio) | src, type |
<iframe> | Page web intégrée | src, width, height, allowfullscreen, loading |
<svg> | Graphiques vectoriels SVG | viewBox, width, height |
<canvas> | Surface de dessin (via JS) | width, height |
<picture> | Conteneur pour sources d'image | Contient <source> et <img> |
HTML
<!-- Vidéo -->
<video controls width="640" poster="thumb.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Votre navigateur ne supporte pas la vidéo.
</video>
<!-- Audio -->
<audio controls loop>
<source src="musique.mp3" type="audio/mpeg">
</audio>
<!-- Iframe (YouTube) -->
<iframe width="560" height="315" src="https://youtube.com/embed/ID"
allowfullscreen loading="lazy"></iframe>
<!-- Canvas -->
<canvas id="monCanvas" width="400" height="300"></canvas>
<!-- SVG -->
<svg viewBox="0 0 100 100" width="100">
<circle cx="50" cy="50" r="40" fill="purple"/>
</svg>Attributs universels
| Attribut | Description | Exemple |
|---|---|---|
id | Identifiant unique de l'élément | <div id="header"> |
class | Classe(s) CSS (une ou plusieurs) | <div class="container active"> |
style | Styles CSS en ligne | <p style="color: red;"> |
title | Infobulle au survol | <span title="Info"> |
data-* | Données personnalisées | <div data-user-id="42"> |
hidden | Masque l'élément | <div hidden> |
tabindex | Ordre de navigation clavier | <button tabindex="0"> |
contenteditable | Rend l'élément éditable | <div contenteditable> |
draggable | Rend l'élément glissable | <img draggable="true"> |
lang | Langue de l'élément | <span lang="en"> |
Les data attributes
Les attributs data-* stockent des données personnalisées accessibles via JS : element.dataset.userId pour data-user-id="42".
Sélecteurs CSS
Les sélecteurs ciblent les éléments HTML pour leur appliquer des styles.
| Sélecteur | Description | Exemple |
|---|---|---|
* | Sélecteur universel | * { margin: 0; } |
type | Par nom de balise | p { color: red; } |
.class | Par classe | .container { max-width: 1200px; } |
#id | Par ID unique | #header { position: fixed; } |
A B | Descendant | div p { } |
A > B | Enfant direct | nav > a { } |
A + B | Frère adjacent | h2 + p { } |
A ~ B | Frères suivants | h2 ~ p { } |
[attr] | Avec l'attribut | [target] { } |
[attr="val"] | Attribut = valeur | [type="text"] { } |
:hover | Survol souris | a:hover { color: red; } |
:active | Clic en cours | button:active { } |
:focus | Focus clavier | input:focus { } |
:first-child | Premier enfant | li:first-child { } |
:last-child | Dernier enfant | li:last-child { } |
:nth-child(n) | Enfant position n | li:nth-child(2n) { } |
:nth-of-type(n) | ne de son type | p:nth-of-type(odd) { } |
:not(sel) | Sauf ce sélecteur | :not(.hidden) { } |
::before | Pseudo-élément avant | h2::before { content: "→"; } |
::after | Pseudo-élément après | a::after { content: " ↗"; } |
::first-line | Première ligne | p::first-line { font-weight: bold; } |
::first-letter | Première lettre | p::first-letter { font-size: 2em; } |
::selection | Texte sélectionné | ::selection { background: purple; } |
Spécificité
Priorité : !important > inline > #id > .class > type > *. Utilisez le moins de spécificité possible.
Modèle de boîte (Box Model)
| Propriété | Description | Exemple |
|---|---|---|
width / height | Taille du contenu | width: 200px; |
min-width / max-width | Taille min/max | max-width: 1200px; |
min-height / max-height | Hauteur min/max | min-height: 100vh; |
padding | Espace intérieur | padding: 16px 24px; |
border | Bordure | border: 1px solid #ccc; |
border-radius | Arrondi des coins | border-radius: 8px; |
margin | Espace extérieur | margin: 0 auto; |
box-sizing | Inclure padding/border dans la taille | box-sizing: border-box; |
overflow | Débordement | overflow: hidden; |
overflow-x / overflow-y | Débordement par axe | overflow-x: auto; |
CSS
* { box-sizing: border-box; }
.card {
width: 300px;
padding: 20px;
margin: 16px 0;
border: 1px solid #ddd;
border-radius: 8px;
}Flexbox
Modèle de disposition unidimensionnel pour aligner et distribuer l'espace entre les éléments.
| Propriété | Description | Valeurs courantes |
|---|---|---|
display | Active Flexbox | flex, inline-flex |
flex-direction | Direction des éléments | row, column, row-reverse, column-reverse |
justify-content | Alignement horizontal | flex-start, center, space-between, space-around, space-evenly |
align-items | Alignement vertical | flex-start, center, flex-end, stretch, baseline |
align-self | Alignement d'un enfant | Mêmes valeurs que align-items |
flex-wrap | Renvoi à la ligne | nowrap, wrap, wrap-reverse |
gap | Espace entre éléments | gap: 16px; |
flex-grow | Agrandissement | 1 (grandit), 0 (non) |
flex-shrink | Réduction | 1 (rétrécit), 0 (non) |
flex-basis | Taille de base | auto, 0, 200px |
flex | Raccourci grow shrink basis | flex: 1, flex: 0 1 auto |
order | Ordre d'affichage | Nombre entier (défaut: 0) |
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }Grid
Modèle bidimensionnel pour créer des mises en page en lignes et colonnes.
| Propriété | Description | Exemple |
|---|---|---|
display | Active Grid | display: grid; |
grid-template-columns | Définit les colonnes | 200px 1fr 1fr |
grid-template-rows | Définit les lignes | auto 1fr auto |
gap | Espace entre cellules | gap: 20px; |
grid-column | Position de colonne | grid-column: 1 / 3; |
grid-row | Position de ligne | grid-row: 1 / 2; |
grid-area | Nommage de zone | grid-area: header; |
grid-template-areas | Layout visuel nommé | "header header" "sidebar main"; |
grid-auto-rows | Taille des lignes auto | minmax(100px, auto) |
justify-items | Alignement cellule H | start, center, end, stretch |
align-items | Alignement cellule V | start, center, end, stretch |
justify-content | Alignement grille H | start, center, space-between |
align-content | Alignement grille V | start, center, space-between |
CSS
.layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 32px;
}
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
Unité fr
1fr 2fr donne 1/3 à la première colonne, 2/3 à la seconde.
Position
| Valeur | Description | Décalage |
|---|---|---|
static | Défaut (flux normal) | Ignoré |
relative | Relatif à sa position | Décalage visible, espace préservé |
absolute | Parent positioned le plus proche | Hors du flux normal |
fixed | Fixé par rapport à la fenêtre | Reste en place au scroll |
sticky | Alternance relative/fixed | Se fixe au scroll |
CSS
.navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
}
.sidebar {
position: sticky;
top: 72px;
height: calc(100vh - 72px);
}
.overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
z-index: 2000;
}Responsive Design
| BREAKPOINT | Appareil | @media |
|---|---|---|
< 480px | Mobile petit | @media (max-width: 479px) |
< 768px | Mobile / Tablette | @media (max-width: 767px) |
< 1024px | Tablette | @media (max-width: 1023px) |
< 1200px | Desktop | @media (max-width: 1199px) |
> 1200px | Grand écran | @media (min-width: 1200px) |
CSS
.grid {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: 1fr 1fr 1fr; }
}Animations et transitions
| Propriété | Description | Exemple |
|---|---|---|
transition | Transition douce | transition: all 0.3s ease; |
transition-property | Propriétés à animer | background, transform; |
transition-duration | Durée | 0.3s, 300ms |
transition-timing-function | Courbe | ease, linear, ease-in-out |
transition-delay | Délai | 0.1s |
animation | Applique @keyframes | animation: fadeIn 0.5s ease forwards; |
@keyframes | Définit les étapes | @keyframes fade { from { opacity:0; } } |
transform | Forme/position | rotate(45deg) scale(1.2); |
Transformations courantes
| Fonction | Description | Exemple |
|---|---|---|
translate(x, y) | Déplacement | transform: translate(20px, -10px); |
scale(x, y) | Agrandissement | transform: scale(1.5); |
rotate(angle) | Rotation | transform: rotate(45deg); |
skew(x, y) | Inclinaison | transform: skew(5deg, 2deg); |
matrix() | Combinée | transform: matrix(1,0,0,1,0,0); |
CSS
.btn {
transition: all 0.25s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(139,92,246,0.3);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeIn 0.5s ease forwards; }
@keyframes spin {
to { transform: rotate(360deg); }
}
.loader { animation: spin 1s linear infinite; }Variables CSS (Custom Properties)
CSS
:root {
--primary: #8b5cf6;
--text: #f0f0ff;
--bg: #0f0f1a;
--radius: 8px;
--spacing: 16px;
}
.card {
background: var(--bg);
color: var(--text);
border-radius: var(--radius);
padding: var(--spacing);
}
.box {
color: var(--custom, #333);
}Typographie
| Propriété | Description | Exemple |
|---|---|---|
font-family | Famille de polices | font-family: 'Inter', sans-serif; |
font-size | Taille | 1rem, clamp(1rem, 3vw, 2rem) |
font-weight | Épaisseur | 400, 700, 800 |
font-style | Style | normal, italic |
line-height | Interligne | 1.6, 150% |
letter-spacing | Espace lettres | 0.5px, -0.02em |
text-align | Alignement | left, center, right, justify |
text-decoration | Décoration | none, underline, line-through |
text-transform | Casse | uppercase, lowercase, capitalize |
text-overflow | Dépassement | ellipsis, clip |
white-space | Espaces | nowrap, pre, pre-wrap |
word-break | Casse mots | break-all, break-word |
text-shadow | Ombre texte | 2px 2px 4px rgba(0,0,0,0.3); |
direction | Sens | ltr, rtl |
Couleurs et arrière-plans
| Propriété | Description | Exemple |
|---|---|---|
color | Couleur texte | color: #fff; |
background-color | Couleur fond | background-color: rgba(0,0,0,0.5); |
background | Raccourci | background: url('img.jpg') center/cover; |
background-image | Image de fond | background-image: url('bg.png'); |
background-size | Taille image | cover, contain |
background-position | Position | center, top left |
background-repeat | Répétition | no-repeat, repeat-x |
background-attachment | Scroll | fixed, scroll |
opacity | Transparence | 0.5 |
box-shadow | Ombre | 0 4px 24px rgba(0,0,0,0.3); |
backdrop-filter | Filtre arrière | backdrop-filter: blur(20px); |
filter | Filtre visuel | filter: grayscale(100%); |
CSS
.gradient {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
}
.gradient-text {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.glass {
background: rgba(255,255,255,0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.1);
}Référence rapide CSS
| Propriété | Description | Valeurs courantes |
|---|---|---|
display | Affichage | block, inline, flex, grid, none |
visibility | Visibilité | visible, hidden |
cursor | Curseur | pointer, default, not-allowed |
z-index | Empilement | Entier (positioned uniquement) |
object-fit | Ajustement image | cover, contain, fill |
pointer-events | Interactions souris | auto, none |
clip-path | Découpe | circle(50%), polygon() |
aspect-ratio | Ratio | 16/9, 1 |
user-select | Sélection | none, all |
list-style | Listes | none, disc, decimal |
outline | Contour | 2px solid purple; |
appearance | Apparence native | none |
CSS Fonctions utiles
calc() : calculs (calc(100% - 40px)). min() / max() : valeur bornée. clamp() : valeur entre min et max. var() : variable custom. url() : ressource externe.
Variables
| Mot-clé | Portée | Réassignable | Hérité |
|---|---|---|---|
let | Bloc { } | Oui | Non |
const | Bloc { } | Non | Non |
var | Fonction | Oui | Non |
JavaScript
let nom = "Alice"; // Réassignable
const age = 25; // Non réassignable
var ancien = true; // À éviter
// Destructuring
const [a, b] = [1, 2];
const { nom: n, age: a } = { nom: "Bob", age: 30 };
// Template literals
const msg = `Bonjour ${nom}, ${age} ans`;
// Spread operator
const arr2 = [...arr, 3, 4];
const obj2 = { ...obj, nouveau: true };
const vs let
Utilisez const par défaut. let uniquement pour la réassignation. Évitez var.
Types de données
| Type | Description | Exemple |
|---|---|---|
string | Chaîne de caractères | "Bonjour", 'Hello', `Template` |
number | Nombre | 42, 3.14, NaN, Infinity |
boolean | Vrai / Faux | true, false |
null | Valeur absente | let x = null; |
undefined | Sans valeur | let x; // undefined |
object | Collection clé-valeur | { nom: "Alice" } |
array | Tableau ordonné | [1, 2, 3] |
function | Fonction | () => {} |
symbol | Identifiant unique | Symbol("id") |
bigint | Grand entier | 9007199254740991n |
JavaScript
typeof "hello" // "string"
typeof 42 // "number"
typeof true // "boolean"
typeof null // "object" (bug historique)
typeof undefined // "undefined"
typeof [] // "object"
typeof {} // "object"
Array.isArray([]) // true
"hello".length // 5
42.toString() // "42"
parseInt("42") // 42
parseFloat("3.14") // 3.14
String(42) // "42"
Number("42") // 42
Boolean(1) // trueOpérateurs
| Catégorie | Opérateurs | Description |
|---|---|---|
| Aritmétique | + - * / % ** | Addition, soustraction, multiplication, division, modulo, puissance |
| Affectation | = += -= *= /= %= | Affectation combinée |
| Comparaison | == === != !== | Égalité (faible/stricte), différence |
| Logique | && || ! | ET, OU, NON |
| Ternaire | ? : | Condition inline |
| Nul coalescent | ?? | Valeur alternative si null/undefined |
| Optional chaining | ?. | Accès sécurisé |
| Type | typeof instanceof | Vérification type |
JavaScript
5 == "5" // true (conversion)
5 === "5" // false (types différents)
const v = null ?? "défaut"; // "défaut"
const v2 = 0 ?? "défaut"; // 0
const ville = user?.address?.city; // undefined si nul
const role = age >= 18 ? "majeur" : "mineur";Conditions
| Structure | Description |
|---|---|
if / else if / else | Condition principale |
switch | Multiple valeurs |
?: (ternaire) | Condition inline |
JavaScript
if (age >= 18) {
console.log("Majeur");
} else if (age >= 16) {
console.log("Presque majeur");
} else {
console.log("Mineur");
}
switch (jour) {
case "lundi":
case "mardi":
console.log("Début semaine");
break;
case "vendredi":
console.log("Week-end !");
break;
default:
console.log("Autre jour");
}
const r = score >= 10 ? "Réussite" : "Échec";Boucles
| Boucle | Usage | Syntaxe |
|---|---|---|
for | Classique avec compteur | for (let i = 0; i < 10; i++) {} |
while | Tant que condition vraie | while (condition) {} |
do...while | Au moins une fois | do {} while (condition); |
for...of | Valeurs d'un itérable | for (const item of array) {} |
for...in | Clés d'un objet | for (const key in obj) {} |
break | Sort de la boucle | break; |
continue | Itération suivante | continue; |
JavaScript
for (let i = 0; i < 5; i++) {
console.log(i);
}
const fruits = ["pomme", "banane", "cerise"];
for (const fruit of fruits) {
console.log(fruit);
}
const user = { nom: "Alice", age: 25 };
for (const cle in user) {
console.log(cle, user[cle]);
}Fonctions
| Syntaxe | Description |
|---|---|
function nom() {} | Déclaration de fonction |
const nom = function() {} | Expression de fonction |
const nom = () => {} | Fonction fléchée (arrow function) |
param = valeur | Paramètres par défaut |
...args | Paramètres rest (tableau) |
() => expression | Retour implicite |
JavaScript
function saluer(nom) {
return `Bonjour ${nom} !`;
}
const add = (a, b) => a + b;
const accueillir = (nom = "Visiteur") => `Bonjour ${nom}`;
const somme = (...nombres) => {
return nombres.reduce((a, b) => a + b, 0);
};
somme(1, 2, 3); // 6
const executer = (fn) => fn();
executer(() => "Hello !");Tableaux - Méthodes
Les méthodes de tableaux sont essentielles pour manipuler des collections de données.
| Méthode | Description | Retourne |
|---|---|---|
.push() | Ajoute un élément en fin | Nouvelle longueur |
.pop() | Retire le dernier élément | Élément retiré |
.shift() | Retire le premier élément | Élément retiré |
.unshift() | Ajoute un élément en début | Nouvelle longueur |
.splice() | Ajoute/supprime à une position | Éléments supprimés |
.slice() | Extrait une portion | Nouveau tableau |
.concat() | Fusionne des tableaux | Nouveau tableau |
.includes() | Présence d'un élément | true / false |
.indexOf() | Index du premier trouvé | Nombre ou -1 |
.find() | Premier élément satisfaisant le test | Élément ou undefined |
.findIndex() | Index du premier trouvé | Nombre ou -1 |
.filter() | Filtre les éléments | Nouveau tableau |
.map() | Transforme chaque élément | Nouveau tableau |
.forEach() | Exécute pour chaque | undefined |
.reduce() | Réduit à une seule valeur | Valeur accumulée |
.sort() | Trie les éléments | Tableau trié (muté) |
.reverse() | Inverse l'ordre | Tableau inversé (muté) |
.flat() | Aplatit un tableau | Nouveau tableau |
.some() | Au moins un passe le test | true / false |
.every() | Tous passent le test | true / false |
.join() | Joint en chaîne | String |
.keys() | Index | Iterator |
.values() | Valeurs | Iterator |
.entries() | Paires [index, valeur] | Iterator |
Array.from() | Crée depuis un itérable | Nouveau tableau |
Array.isArray() | Vérifie si tableau | true / false |
JavaScript
const nums = [1, 2, 3, 4, 5];
// Filter : garde les pairs
const pairs = nums.filter(n => n % 2 === 0); // [2, 4]
// Map : double chaque valeur
const doubled = nums.map(n => n * 2); // [2, 4, 6, 8, 10]
// Reduce : somme
const sum = nums.reduce((acc, n) => acc + n, 0); // 15
// Find
const found = nums.find(n => n > 3); // 4
// Chaining
const result = nums
.filter(n => n > 2)
.map(n => n * 10)
.reduce((a, b) => a + b, 0); // 120
// Sort
const letters = ["c", "a", "b"];
letters.sort(); // ["a", "b", "c"]
nums.sort((a, b) => b - a); // Décroissant
// Push / Pop
nums.push(6); // Ajoute 6 en fin
nums.pop(); // Retire le dernier
// Slice
const sub = nums.slice(1, 3); // Éléments index 1 et 2
// Splice
nums.splice(1, 2); // Supprime 2 éléments à partir de l'index 1
nums.splice(1, 0, 99); // Insère 99 à l'index 1
// Join
"hello".split("").join("-"); // "h-e-l-l-o"Objets
JavaScript
const user = {
nom: "Alice",
age: 25,
saluer() {
return `Je suis ${this.nom}`;
}
};
// Accès
user.nom; // "Alice"
user["age"]; // 25
user.saluer(); // "Je suis Alice"
// Ajouter / Modifier
user.email = "alice@mail.com";
user.age = 26;
// Supprimer
delete user.age;
// Vérifier
"nom" in user; // true
user.hasOwnProperty("nom"); // true
// Clés / Valeurs
Object.keys(user); // ["nom", "email"]
Object.values(user); // ["Alice", "alice@mail.com"]
Object.entries(user); // [["nom","Alice"], ["email","alice@mail.com"]]
// Destructuring
const { nom, email } = user;
// Spread
const copie = { ...user, age: 30 };| Méthode | Description |
|---|---|
Object.keys(obj) | Retourne un tableau des clés |
Object.values(obj) | Retourne un tableau des valeurs |
Object.entries(obj) | Retourne un tableau de paires [clé, valeur] |
Object.assign(target, ...sources) | Copie les propriétés |
Object.freeze(obj) | Empêche la modification |
Object.keys(obj).length | Nombre de propriétés |
DOM (Document Object Model)
Le DOM permet de manipuler le contenu HTML via JavaScript.
| Méthode | Description | Retourne |
|---|---|---|
getElementById("id") | Cible par ID | Élément ou null |
querySelector(".sel") | Premier élément correspondant | Élément ou null |
querySelectorAll(".sel") | Tous les éléments correspondants | NodeList |
getElementsByClassName("cls") | Par classe | HTMLCollection |
getElementsByTagName("tag") | Par balise | HTMLCollection |
createElement("tag") | Crée un élément | Nouvel élément |
createTextNode("text") | Crée un nœud texte | Nœud texte |
appendChild(el) | Ajoute un enfant | L'élément ajouté |
prepend(el) | Ajoute au début | L'élément ajouté |
append(el) | Ajoute à la fin | L'élément ajouté |
insertBefore(new, ref) | Insère avant un référent | L'élément ajouté |
removeChild(el) | Supprime un enfant | Élément supprimé |
replaceChild(new, old) | Remplace un enfant | Ancien élément |
cloneNode(deep) | Clone un élément | Copie de l'élément |
closest(".sel") | Plus proche ancêtre correspondant | Élément ou null |
matches(".sel") | Vérifie si l'élément correspond | true / false |
| Propriété | Description |
|---|---|
textContent | Texte brut de l'élément |
innerHTML | Contenu HTML interne |
innerText | Texte visible (avec style) |
outerHTML | HTML complet de l'élément |
className | Chaîne de classes |
classList | API de classes (add, remove, toggle, contains) |
id | ID de l'élément |
style | Objet de styles en ligne |
dataset | Objet des attributs data-* |
parentNode | Élément parent |
children | Éléments enfants |
firstElementChild | Premier enfant |
lastElementChild | Dernier enfant |
nextElementSibling | Frère suivant |
previousElementSibling | Frère précédent |
offsetWidth / offsetHeight | Taille avec padding/border |
clientWidth / clientHeight | Taille avec padding (sans bordure/scroll) |
JavaScript
// Sélectionner
const btn = document.querySelector("#myBtn");
const items = document.querySelectorAll(".item");
// Créer et ajouter
const div = document.createElement("div");
div.textContent = "Bonjour !";
div.classList.add("card");
document.body.appendChild(div);
// Classes
div.classList.add("active");
div.classList.remove("hidden");
div.classList.toggle("visible");
div.classList.contains("active"); // true
// Styles
div.style.color = "red";
div.style.backgroundColor = "#333";
// Data attributes
div.dataset.userId = "42";
console.log(div.dataset.userId); // "42"
// Parcourir
items.forEach(item => {
console.log(item.textContent);
});Événements
| Événement | Description |
|---|---|
click | Clic souris |
dblclick | Double clic |
mousedown / mouseup | Bouton enfoncé / relâché |
mouseenter / mouseleave | Souris entre / quitte l'élément |
mousemove | Mouvement souris |
mouseover /mouseout | Souris au-dessus / dehors |
keydown / keyup | Touche enfoncée / relâchée |
keypress | Touche pressée (obsolète) |
submit | Envoi de formulaire |
change | Valeur modifiée et validée |
input | Modification de valeur (temps réel) |
focus / blur | Focus / perte de focus |
scroll | Défilement |
resize | Redimensionnement fenêtre |
load | Ressource chargée |
DOMContentLoaded | DOM prêt (sans images) |
touchstart / touchend | Début / fin touche tactile |
touchmove | Mouvement tactile |
drag / dragstart / dragend | Glisser-déposer |
copy / paste | Copier / Coller |
JavaScript
const btn = document.querySelector("button");
// addEventListener
btn.addEventListener("click", (e) => {
console.log(e.target);
console.log(e.type);
e.preventDefault(); // Empêche le comportement par défaut
});
// Clavier
document.addEventListener("keydown", (e) => {
console.log(e.key); // "Enter", "Escape", "a"...
console.log(e.code); // "Enter", "KeyA"...
console.log(e.altKey); // true si Alt enfoncé
console.log(e.ctrlKey); // true si Ctrl enfoncé
console.log(e.shiftKey); // true si Shift enfoncé
});
// Supprimer un écouteur
function handler(e) { console.log("click"); }
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);
// Événement au document
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM prêt !");
});JSON
JSON (JavaScript Object Notation) est un format d'échange de données universel.
| Méthode | Description | Exemple |
|---|---|---|
JSON.stringify(obj) | Objet vers chaîne JSON | '{"nom":"Alice"}' |
JSON.parse(str) | Chaîne JSON vers objet | { nom: "Alice" } |
JavaScript
// Sérialiser
const user = { nom: "Alice", age: 25 };
const json = JSON.stringify(user);
console.log(json); // '{"nom":"Alice","age":25}'
// Avec indentation
const pretty = JSON.stringify(user, null, 2);
// Désérialiser
const obj = JSON.parse(json);
console.log(obj.nom); // "Alice"
// Sauvegarder / Charger du localStorage
localStorage.setItem("user", JSON.stringify(user));
const saved = JSON.parse(localStorage.getItem("user"));Async / Await & Fetch
JavaScript est asynchrone par nature. Ces outils gèrent les opérations qui prennent du temps (réseau, timers).
| Concept | Description |
|---|---|
Promise | Objet représentant un résultat futur |
async | Déclare une fonction asynchrone |
await | Attend la résolution d'une Promise |
fetch() | Requête HTTP |
setTimeout() | Exécute après un délai |
setInterval() | Exécute à intervalle régulier |
clearTimeout() | Annule un setTimeout |
clearInterval() | Annule un setInterval |
Promise.all() | Attend toutes les promises |
Promise.race() | La première qui résout |
Promise.allSettled() | Attend que toutes soient terminées |
JavaScript
// Promise
const maPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Succès !");
// reject(new Error("Erreur !"));
}, 2000);
});
maPromise
.then(result => console.log(result))
.catch(err => console.error(err));
// Async / Await
async function chargerData() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
} catch (err) {
console.error("Erreur :", err);
}
}
// Fetch POST
const response = await fetch("/api/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nom: "Alice" })
});
// Promises en parallèle
const [users, posts] = await Promise.all([
fetch("/api/users").then(r => r.json()),
fetch("/api/posts").then(r => r.json())
]);
async/await
await ne fonctionne que dans une fonction async. Il simplifie la lecture du code asynchrone par rapport à .then().
Gestion d'erreurs
| Mot-clé | Description |
|---|---|
try | Bloc de code à essayer |
catch (err) | Gère l'erreur si elle survient |
finally | S'exécute toujours (avec ou sans erreur) |
throw | Lance une erreur personnalisée |
JavaScript
try {
const data = JSON.parse(input);
} catch (err) {
console.error("JSON invalide:", err.message);
} finally {
console.log("Toujours exécuté");
}
// Lancer une erreur
function diviser(a, b) {
if (b === 0) {
throw new Error("Division par zéro !");
}
return a / b;
}
// Types d'erreurs
throw new TypeError("Type incorrect");
throw new ReferenceError("Variable non définie");
throw new RangeError("Valeur hors limites");
throw new SyntaxError("Syntaxe incorrecte");
Bonnes pratiques
N'utilisez jamais try/catch pour contrôler le flux. Utilisez-le uniquement pour les erreurs imprévues (réseau, JSON, accès DOM). Toujours catcher les erreurs dans les fonctions async.