Lexique des balises HTML

Je vous propose les balises HTML que l’on utilise souvent lorsqu’on crée des pages web. Pour chaque balise, je vous explique simplement à quoi elle sert, je vous montre un petit exemple pour que ce soit clair, et je vous liste ses attributs dans un tableau avec le nom, ce que ça fait, et un exemple d’utilisation. Que vous soyez débutant ou un peu plus calé, ce lexique est fait pour vous filer un coup de main rapide et pratique.

<a>

Lien hypertexte.

<a href="https://exemple.com" target="_blank">Lien</a>

Attributs

NomDescriptionExemple
href Spécifie l’URL vers laquelle le lien pointe. https://exemple.com
target Indique où ouvrir le lien (nouvel onglet, même fenêtre…). _blank
rel Définit la relation entre le document courant et la ressource liée (utile pour la sécurité). noopener noreferrer
title Texte affiché au survol du lien, améliore l’accessibilité. Aller sur le site exemple
download Indique que le lien permet de télécharger un fichier (au lieu de l’ouvrir). fichier.pdf
hreflang Langue de la page liée, utile pour le SEO multilingue. en
type Indique le type MIME de la ressource liée. application/pdf
referrerpolicy Contrôle les informations envoyées dans l'en-tête Referer lors du clic. no-referrer
ping URL(s) à contacter en arrière-plan lors d’un clic (suivi, analytique…). https://exemple.com/ping

<base>

URL de base pour les ressources relatives.

<base href="/mon-site/">

Attributs

NomDescriptionExemple
href Spécifie l’URL de base utilisée pour toutes les URL relatives du document. <base href="https://exemple.com/">
target Définit la cible par défaut pour les liens (_self, _blank, etc.). <base target="_blank">

<body>

Contenu visible de la page, y compris le texte, les images, les boutons et les scripts interactifs.

<body onload="init()">…</body>

Attributs

NomDescriptionExemple
onload Définit un script à exécuter lorsque la page est chargée. init()
onunload Définit un script à exécuter lorsque l’utilisateur quitte la page. cleanUp()
onresize Définit un script à exécuter lorsque la fenêtre est redimensionnée. handleResize()
class Classe(s) CSS appliquée(s) à l’élément. dark-theme
id Identifiant unique de l’élément. accueil
style Définit un style CSS en ligne. background: #fff

<button>

Bouton cliquable utilisé pour déclencher une action ou soumettre un formulaire.

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

Attributs

NomDescriptionExemple
type Définit le type de bouton. Peut être 'button' (bouton standard), 'submit' (soumet un formulaire) ou 'reset' (réinitialise un formulaire). submit
disabled Indique si le bouton est désactivé (non cliquable). disabled
name Nom du bouton, utilisé lors de la soumission d'un formulaire. monBouton
value Valeur associée au bouton, envoyée lors de la soumission d’un formulaire. envoyer
autofocus Permet de donner automatiquement le focus au bouton lors du chargement de la page. autofocus

<div>

Conteneur générique de contenu, utilisé pour structurer la page sans signification sémantique particulière.

<div class="container">Contenu ici</div>

Attributs

NomDescriptionExemple
class Permet d’assigner une ou plusieurs classes CSS à l’élément. container
id Identifiant unique de l’élément dans la page, utilisé pour le ciblage CSS ou JavaScript. section-principale
style Style CSS en ligne appliqué directement à l’élément. color: red; background-color: yellow;
title Texte affiché au survol de l’élément. Ceci est un conteneur

<form>

Formulaire permettant de collecter des données utilisateur et de les envoyer à un serveur.

<form action="/submit" method="post">...</form>

Attributs

NomDescriptionExemple
action URL où les données du formulaire sont envoyées lors de la soumission. /submit
method Méthode HTTP utilisée pour envoyer les données (GET ou POST). post
enctype Type d’encodage des données lors de la soumission (utile pour l’upload de fichiers). multipart/form-data
target Spécifie où ouvrir la réponse du formulaire (ex : _blank pour une nouvelle fenêtre). _self
novalidate Désactive la validation HTML5 du formulaire lors de la soumission.

<h1>

Titre principal de la page, utilisé pour structurer le contenu et améliorer le référencement SEO.

<h1>Bienvenue sur mon site</h1>

Attributs

NomDescriptionExemple
class Classe CSS pour styliser le titre. main-title
id Identifiant unique pour le titre, utile pour l’ancre ou le ciblage CSS/JS. header-main

<h2>

Titre de second niveau, utilisé pour structurer les sous-sections du contenu.

<h2>Présentation de l’entreprise</h2>

Attributs

NomDescriptionExemple
class Classe CSS pour styliser le titre. section-title
id Identifiant unique pour le titre, utile pour l’ancre ou le ciblage CSS/JS. section-presentation

<html>

Élément racine d'un document HTML. Contient tout le contenu de la page.

<html lang="fr">…</html>

Attributs

NomDescriptionExemple
lang Spécifie la langue principale du contenu du document. fr
xmlns Déclare l'espace de noms XML. http://www.w3.org/1999/xhtml
manifest Spécifie le chemin vers un fichier manifeste de cache pour les applications web hors ligne. cache.appcache

<iframe>

Permet d’intégrer une autre page web dans le document courant via une fenêtre embarquée.

<iframe src="page.html" width="600" height="400" title="Contenu intégré"></iframe>

Attributs

NomDescriptionExemple
src URL de la page à afficher dans l’iframe. page.html
width Largeur de l’iframe (en pixels ou en pourcentage). 600
height Hauteur de l’iframe (en pixels ou en pourcentage). 400
title Texte descriptif pour l’accessibilité, important pour les lecteurs d’écran. Contenu intégré
name Nom de la fenêtre cible (utile pour les liens ou formulaires). frame1
sandbox Applique des restrictions de sécurité à l’iframe (ex. empêcher les scripts, le formulaire…). allow-scripts allow-same-origin
allowfullscreen Permet à l’iframe d’être affichée en plein écran.
loading Contrôle le chargement paresseux (lazy loading) de l’iframe. lazy
referrerpolicy Définit la politique d’envoi du référant lors du chargement de l’iframe. no-referrer

<img>

Image embarquée.

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

Attributs

NomDescriptionExemple
src Spécifie le chemin vers l’image à afficher. https://exemple.com/image.jpg
alt Texte alternatif affiché si l’image ne peut pas être chargée. Améliore l’accessibilité. Description de l’image
width Définit la largeur de l’image (en pixels ou pourcentage). 300
height Définit la hauteur de l’image (en pixels ou pourcentage). 200
title Texte affiché au survol de l’image, utile pour l’accessibilité. Logo de l’entreprise
loading Indique comment l’image doit être chargée (différé, immédiat…). lazy
decoding Suggère au navigateur comment décoder l’image (auto, sync, async). async
referrerpolicy Contrôle les informations envoyées dans l'en-tête Referer lors du chargement de l’image. no-referrer
crossorigin Indique si l’image doit être récupérée avec des informations d’identification pour les requêtes cross-origin. anonymous
usemap Associe l’image à une carte d’image client. #map
ismap Indique que l’image est une carte serveur, utilisée avec un lien. ismap

<input>

Champ de saisie utilisateur.

<input type="text" name="nom">

Attributs

NomDescriptionExemple
type Définit le type de champ (texte, mot de passe, e-mail, bouton, etc.). text
name Nom du champ, utilisé lors de l’envoi du formulaire. email
value Valeur par défaut du champ ou valeur envoyée avec le formulaire. alexis@example.com
placeholder Texte d’aide affiché dans le champ quand il est vide. Entrez votre adresse email
required Indique que le champ doit être rempli pour valider le formulaire. required
readonly Empêche la modification du champ par l’utilisateur. readonly
disabled Désactive le champ (non éditable et non soumis). disabled
maxlength Nombre maximum de caractères autorisés. 100
minlength Nombre minimum de caractères requis. 5
pattern Expression régulière que la valeur doit respecter. [A-Za-z0-9]+
autocomplete Suggère si le navigateur peut remplir automatiquement le champ. on
autofocus Place automatiquement le curseur dans le champ au chargement de la page. autofocus
form Associe le champ à un formulaire spécifique via son id. form-id
step Intervalle autorisé pour les champs numériques ou de type range. 0.1
min Valeur minimale acceptée (pour les nombres, dates, etc.). 0
max Valeur maximale acceptée. 100
multiple Permet la sélection de plusieurs valeurs (ex : fichiers, emails…). multiple
accept Spécifie les types de fichiers acceptés (uniquement pour type='file'). .jpg, .png, image/*
checked Définit si la case (checkbox ou radio) est cochée par défaut. checked
size Largeur visible du champ texte (en caractères). 30
list Associe le champ à un élément <datalist> pour proposer des options. suggestions

<label>

Étiquette associée à un élément de formulaire.

<label for="nom">Nom :</label>

Attributs

NomDescriptionExemple
for Associe le label à l'élément formulaire dont l'id correspond. email-input
form Associe le label à un formulaire spécifique via son id. form-id

<li>

Élément de liste.

<li>Item</li>

Attributs

NomDescriptionExemple
value Spécifie la valeur de l'élément dans une liste ordonnée (utile pour changer la numérotation). 3
class Permet d’associer une ou plusieurs classes CSS à l’élément. important-item
id Identifiant unique pour l’élément dans la page. item-1
style Permet d’ajouter des styles CSS en ligne. color: red;

<meta>

Métadonnées comme charset ou description.

<meta charset="UTF-8">

Attributs

NomDescriptionExemple
name Spécifie le nom de la métadonnée. description
content Contenu de la métadonnée. Site web professionnel d'Alex
http-equiv Définit un en-tête HTTP équivalent. Content-Type
charset Indique le jeu de caractères utilisé dans le document. UTF-8
viewport Configure la zone d'affichage pour les appareils mobiles. width=device-width, initial-scale=1

<ol>

Liste ordonnée.

<ol><li>Item</li></ol>

<option>

Option dans une liste déroulante.

<option value="1">Option 1</option>

Attributs

NomDescriptionExemple
type Définit le style de numérotation de la liste (1, a, A, i, I). 1
start Indique la valeur de départ de la numérotation. 5
reversed Indique que la liste est numérotée en ordre décroissant. reversed

<p>

Paragraphe de texte.

<p>Texte ici.</p>

Attributs

NomDescriptionExemple
class Associe une ou plusieurs classes CSS à ce paragraphe. intro-text
id Identifiant unique pour le paragraphe dans la page. para1
style Ajoute des styles CSS en ligne au paragraphe. color: blue; font-weight: bold;
title Texte affiché au survol du paragraphe, utile pour l’accessibilité. Introduction au site

<script>

Script JavaScript à inclure.

<script src="app.js"></script>

Attributs

NomDescriptionExemple
src Spécifie le chemin vers le fichier JavaScript externe. https://exemple.com/script.js
type Indique le type MIME du script (par défaut 'text/javascript'). module
async Permet de charger le script de manière asynchrone, sans bloquer le rendu de la page. async
defer Diffère l’exécution du script jusqu’au chargement complet du document. defer
crossorigin Indique si le script doit être chargé avec des informations d’identification pour les requêtes cross-origin. anonymous
integrity Permet de vérifier l’intégrité du script via une somme de contrôle (Subresource Integrity). sha384-oqVuAfXRKap7fdgcCY5uykM6+R9Gh7g6r+P5kpO2Fw=
nomodule Indique que le script ne doit pas être exécuté par les navigateurs supportant les modules ES6. nomodule
referrerpolicy Contrôle les informations envoyées dans l’en-tête Referer lors du chargement du script. no-referrer

<select>

Liste déroulante permettant de choisir une option.

<select><option>Option 1</option><option>Option 2</option></select>

Attributs

NomDescriptionExemple
name Nom du contrôle utilisé lors de l’envoi du formulaire. choix
multiple Permet la sélection de plusieurs options. multiple
size Nombre visible d’options sans défilement. 5
disabled Désactive le contrôle (non modifiable). disabled
required Indique que la sélection est obligatoire pour valider le formulaire. required
autofocus Place automatiquement le focus sur ce contrôle au chargement de la page. autofocus
form Associe le contrôle à un formulaire spécifique via son id. form-id

<span>

Conteneur en ligne (inline).

<span>Texte</span>

Attributs

NomDescriptionExemple
class Associe une ou plusieurs classes CSS à cet élément en ligne. highlight
id Identifiant unique pour l’élément dans la page. texte-important
style Ajoute des styles CSS en ligne à l’élément. color: red; font-weight: bold;
title Texte affiché au survol de l’élément, utile pour l’accessibilité. Texte important

<table>

Représente un tableau de données.

<table><thead>...</thead><tbody>...</tbody></table>

Attributs

NomDescriptionExemple
border Définit l’épaisseur de la bordure de la table (en pixels). 1
cellpadding Espace entre le contenu de la cellule et sa bordure. 5
cellspacing Espace entre les cellules de la table. 2
summary Fournit un résumé textuel du contenu et de la structure de la table (utile pour l’accessibilité). Table des horaires de train
width Largeur de la table (en pixels ou en pourcentage). 100%
class Associe une ou plusieurs classes CSS à la table. tableau-principal
id Identifiant unique pour la table dans la page. tab1
style Ajoute des styles CSS en ligne à la table. border-collapse: collapse;

<tbody>

Section principale du tableau contenant les données.

<tbody><tr><td>Alex</td><td>45</td></tr></tbody>

Attributs

NomDescriptionExemple
class Associe une ou plusieurs classes CSS à ce groupe de lignes de tableau. corps-tableau
id Identifiant unique pour le groupe de lignes dans la page. tbody1
style Ajoute des styles CSS en ligne au groupe de lignes. background-color: #f9f9f9;

<td>

Cellule standard dans une ligne de tableau.

<td>Valeur</td>

Attributs

NomDescriptionExemple
colspan Nombre de colonnes que la cellule doit occuper. 2
rowspan Nombre de lignes que la cellule doit occuper. 3
headers Liste des id des cellules d’en-tête associées, pour l’accessibilité. header1 header2
scope Indique la portée de la cellule (row, col, rowgroup, colgroup). col
abbr Abréviation ou forme courte de l’en-tête de la cellule. Nbr
class Associe une ou plusieurs classes CSS à la cellule. cellule-important
id Identifiant unique pour la cellule dans la page. td1
style Ajoute des styles CSS en ligne à la cellule. text-align: center;

<textarea>

Zone de saisie de texte multilignes dans un formulaire.

<textarea name="message" rows="4" cols="50">Texte ici</textarea>

Attributs

NomDescriptionExemple
name Nom du contrôle utilisé lors de l’envoi du formulaire. message
rows Nombre de lignes visibles dans la zone de texte. 5
cols Nombre de colonnes visibles dans la zone de texte. 40
maxlength Nombre maximum de caractères autorisés. 500
placeholder Texte d’aide affiché quand la zone est vide. Écrivez votre message ici
readonly Empêche la modification par l’utilisateur. readonly
disabled Désactive la zone de texte. disabled
required Indique que la saisie est obligatoire. required
wrap Contrôle le retour à la ligne automatique (soft, hard, off). soft
autocomplete Suggère au navigateur d’activer la saisie automatique. on
form Associe la zone à un formulaire spécifique via son id. form-id

<th>

Cellule d’en-tête dans un tableau (titre de colonne ou ligne).

<th>Nom</th>

Attributs

NomDescriptionExemple
colspan Nombre de colonnes que la cellule d’en-tête doit occuper. 2
rowspan Nombre de lignes que la cellule d’en-tête doit occuper. 3
headers Liste des id des cellules associées, pour l’accessibilité. header1 header2
scope Indique la portée de la cellule d’en-tête (row, col, rowgroup, colgroup). col
abbr Abréviation ou forme courte de l’en-tête. Nbr
class Associe une ou plusieurs classes CSS à la cellule d’en-tête. header-important
id Identifiant unique pour la cellule dans la page. th1
style Ajoute des styles CSS en ligne à la cellule d’en-tête. text-align: center; font-weight: bold;

<thead>

Section d’en-tête du tableau, contenant les titres de colonnes.

<thead><tr><th>Nom</th><th>Âge</th></tr></thead>

Attributs

NomDescriptionExemple
class Associe une ou plusieurs classes CSS au groupe d’en-têtes de tableau. entete-tableau
id Identifiant unique pour ce groupe d’en-têtes dans la page. thead1
style Ajoute des styles CSS en ligne au groupe d’en-têtes. background-color: #ccc;

<title>

Titre de la page affiché dans l’onglet du navigateur.

<title>Mon site</title>

<tr>

Ligne de tableau, contenant des cellules.

<tr><td>Cellule 1</td><td>Cellule 2</td></tr>

Attributs

NomDescriptionExemple
class Associe une ou plusieurs classes CSS à la ligne du tableau. ligne-claire
id Identifiant unique pour la ligne dans la page. tr1
style Ajoute des styles CSS en ligne à la ligne du tableau. background-color: #f0f0f0;

<ul>

Liste non ordonnée.

<ul><li>Item</li></ul>

Attributs

NomDescriptionExemple
type Définit le style des puces de la liste (disc, circle, square). disc
class Associe une ou plusieurs classes CSS à la liste non ordonnée. liste-principale
id Identifiant unique pour la liste dans la page. ul1
style Ajoute des styles CSS en ligne à la liste. padding-left: 20px;
Sommaire des balises
texte
structure
formulaire
média

Bibliographie

Contactez-moi

Pour toute demande de devis ou collaboration
envoyez-moi un email à ou contactez-moi au x.