Liste complète des balises HTML 5 – Référence des éléments (2020)

Cette liste est ordonnée conformément à la référence officielle disponible à l’adresse https://www.w3.org/TR/html53/.

Vous pouvez télécharger la liste complète des éléments HTML au format PDF. Vous pouvez utiliser cette liste sur vos sites et pour vos différents supports à condition de faire un lien vers l’original. Merci !

Eléments, balises et attributs HTML – Syntaxe et rôle

Les éléments sont à la base du fonctionnement du HTML. Ils permettent d’exprimer du sens en marquant les différents contenus de notre page. Cela signifie que leur rôle principal est un rôle de sémantique et il est donc important de toujours choisir l’élément le plus approprié pour transmettre le sens voulu.

Les éléments HTML peuvent avoir différentes formes et être plus ou moins complexes dans leur implémentation. Certains sont composés d’une paire de balises ouvrante et fermante et d’un contenu entre ces balises tandis que d’autres ne sont composés que d’une balise qu’on appelle alors balise orpheline. De même, certains éléments HTML vont avoir besoin d’attributs pour fonctionner correctement.

Les attributs HTML vont nous permettre d’apporter du contexte aux éléments, c’est-à-dire de préciser le sens de ceux-ci. Certains attributs vont être obligatoires au bon fonctionnement de certains éléments HTML tandis que d’autres vont être facultatifs.

L’élément de document html

html

L’élément html représente la racine d’un document HTML.

Les éléments de métadonnées

head

L’élément head représente une une collection de métadonnées pour le document.

title

L’élément title représente le titre du document (le titre de la page).

base

L’élément base permet de spécifier l’URL de base du document eet le nom du contexte de navigation par défaut pour suivre les hyperliens.

link

L’élément link permet de créer des liens entre le document HTML et d’autres ressources, comme une feuille de styles CSS par exemple.

meta

L’élément meta représente différents types de métadonnées qui ne peuvent pas être transmises via d’autres éléments comme le jeu de caractères (charset) utilisé ou la définition du viewport.

style

L’élément style permet de définir des styles CSS pour le document.

Les éléments de segmentation

body

L’élément body représente le contenu du document.

article

L’élément article représente une composition complète ou autonome dans un document, une page, une application ou un site.

section

L’élément section représente une section générique d’un document ou d’une application. Dans ce contexte, on appelle section un groupement thématique de contenu.

nav

L’élément nav représente une section de page contenant des liens et dont le but principal est de servir de navigation.

aside

L’élément aside représente une sous-section de page dont le contenu est relatif à la section parente mais qui peut être considérée comme distincte de ce contenu (qui peut exister en soi).

header

L’élément header représente un contenu d’introduction pour son élément principal ancêtre, son contenu de section ou son élément racine de sectionnement le plus proche. Cet élément contient généralement la navigation.

footer

L’élément footer représente un pied de page pour l’élément principal de l’ancêtre le plus proche, le contenu de la section ou l’élément racine de la section.

h1, h2, h3, h4, h5, h6

Les éléments h1, h2, h3, h4, h5, h6 représentent des titres d’importance différentes pour leur section de page

Les éléments de groupement de contenu

main

L’élément main représente le contenu principal (dominant) du document

div

L’élément div ne possède aucune signification particulière et représente ses enfants. On peut l’utiliser pour appliquer une sémantique commune à plusieurs éléments avec des attributs lang ou title par exemple

p

L’élément p représente un bloc de contenu, un « paragraphe ». C’est l’élément par défaut pour tout texte. Il ne doit pas être utilisé lorsqu’un élément plus spécifique, tel qu’une liste, est plus approprié.

ol

L’élément ol représente une liste d’éléments ordonnés de manière intentionnelle de telle façon que la modification de l’ordre modifierait la signification du document.

ul

L’élément ul représente une liste d’éléments sans ordre particulier c’est-à-dire une liste d’éléments dont l’ordre est interchangeable.

li

L’élément li représente un élément de liste. L’élément li peut appartenir à une liste ordonnée, à une liste non ordonnée, ou être seul.

dl

L’élément dl représente une liste de description composée de groupes termes à définir + définition (description) du terme.

dt

L’élément dt représente un terme à définir au sein d’une liste de description.

dd

L’élément dd représente la description ou définition d’un terme au sein d’une liste de description.

figure

L’élément figure représente un contenu de flux, avec éventuellement une légende, qui est autonome (comme une image, une illustration, un schéma, etc.) et est généralement référencé comme une seule unité à partir du flux principal du document.

figcaption

L’élément figcaption représente une légende pour le contenu de l’élément figure parent.

address

L’élément address représente les informations de contact d’une personne, d’une personne ou d’une organisation. Il devrait inclure des informations de localisation / contact physiques et / ou numériques, ainsi qu’un moyen d’identifier une personne ou une organisation à laquelle les informations se rapportent.

pre

L’élément pre représente un bloc de texte préformaté, dans lequel la structure est représentée par des conventions typographiques plutôt que par des éléments.

hr

L’élément hr représente une rupture thématique au niveau du paragraphe, comme une transition vers un autre sujet dans une section d’un article par exemple.

blockquote

L’élément blockquote représente le contenu cité d’une autre source, éventuellement avec une citation qui doit figurer dans un élément footer ou cite, et éventuellement avec des modifications en ligne telles que des annotations et des abréviations.

Les éléments de sémantique au niveau des textes

a

L’élément a représente un lien si il est accompagné d’un attribut href ou un espace réservé où un lien aurait été placé si cela avait été pertinent.

strong

L’élément strong représente une notion de forte importance pour un contenu. On peut l’utiliser dans un titre, une légende ou un paragraphe afin de distinguer une partie qui importe vraiment.

em

L’élément em sert à mettre l’accent sur un contenu particulier. L’accent mis modifie le sens de la phrase et l’élément fait donc partie intégrante du contenu.

mark

L’élément mark représente un élément de texte important ou pertinent dans le contexte de l’utilisateur actuel. Il sert à souligner un contenu qui n’est pas important en soi mais qui l’est dans le contexte actuel (lorsqu’un utilisateur fait une recherche sur un terme par exemple).

span

L’élément span ne possède pas de signification en soi mais peut être utile lorsqu’il est utilisé avec les attributs globaux comme par exemple class, lan ou dir. Il représente ses enfants.

br

L’élément br représente un retour à la ligne.

code

L’élément code représente un fragment de code informatique. Il peut s’agir d’un nom d’élément HTML, d’un nom de fichier, d’un programme informatique ou de toute autre chaîne qu’un ordinateur reconnaîtrait.

data

L’élément data représente son contenu accompagné d’une forme lisible par une machine de ce contenu qui doit être placé dans l’attribut obligatoire value.

time

L’élément time représente un contenu de type date/heure ainsi qu’une forme lisible par une machine de ce contenu qui doit être placée dans l’attribut datetime (optionnellement).

cite

L’élément cite représente une référence à un travail créatif. Il doit inclure le titre de l’œuvre ou le nom de l’auteur, une référence d’URL ou une référence sous une forme abrégée conformément aux conventions utilisées pour l’ajout de métadonnées de citation.

abbr

L’élément abbr représente une abréviation ou un acronyme.

q

L’élément q représente un contenu textuel cité à partir d’une source externe.

i

L’élément i représente une partie de texte avec une voix ou une humeur différente ou écrite de manière décalée par rapport au reste du texte (une pensée, un terme technique, un idiome…).

b

L’élément b représente une partie du texte sur laquelle l’attention est attirée à des fins utilitaires sans donner aucune importance supplémentaire et sans implication d’une autre voix ou humeur, telles que des mots clés dans un résumé de document, des noms de produit dans une révision.

u

L’élément u représente une étendue de texte avec une annotation non textuelle, telle que l’étiquetage d’un nom propre en texte chinois, d’un nom de famille ou du texte comme étant mal orthographié.

small

L’élément small représente des commentaires d’importance secondaire.

s

L’élément s représente un contenu qui n’est plus exact ou n’est plus pertinent.

dfn

L’élément dfn représente le terme qui est en train d’être défini. La définition du terme doit être fournie par un élément p, section ou un élément de liste parent

var

L’élément var représente une variable. Cela peut être une variable réelle dans une expression mathématique ou un contexte de programmation, un identifiant représentant une constante, un symbole identifiant une quantité physique, un paramètre de fonction, etc.

samp

L’élément samp représente un résultat produit par un autre programme ou système informatique.

kbd

L’élément kbd représente une entrée utilisateur (généralement une entrée au clavier, bien qu’il puisse également être utilisé pour représenter une autre entrée, telle que des commandes vocales).

sub

L’élément sub est utilisé pour afficher du texte en indice (bas). Cet élément devrait uniquement être utilisé à des fins typographiques (afin de modifier la position du texte en raison des conventions typographiques) et non pour obtenir des effets de mise en forme.

sup

L’élément sup est utilisé pour afficher du texte en exposant (haut). Cet élément devrait uniquement être utilisé à des fins typographiques (afin de modifier la position du texte en raison des conventions typographiques) et non pour obtenir des effets de mise en forme.

bdi

L’élément bdi représente une portion de texte qui peut être formatée dans une direction différente du texte principal (de l’arabe au milieu d’un texte français par exemple).

bdo

L’élément bdo permet d’imposer une direction donnée à un texte.

wbr

L’élément wbr représente un emplacement où un saut de ligne pourrait être implémenté.

ruby

L’élément ruby permet de marquer des parties de texte avec des annotations ruby qui sont des petites portions de texte présentées à côté du texte de base et principalement utilisées dans la typographie est-asiatique.

rb

L’élément rb représente le contenu textuel de base d’une annotation ruby.

rt

L’élément rt représente le contenu textuel ruby d’une annotation ruby.

rtc

L’élément rtc représente un conteneur ruby pour des composants de texte d’une annotation ruby.

rp

L’élément rp utilisé pour fournir un texte de secours à afficher par les agents utilisateurs qui ne prennent pas en charge les annotations ruby.

Les éléments d’édition

ins

L’élément ins représente un fragment de texte inséré a posteriori dans un document.

del

L’élément del représente un fragment de texte supprimé a posteriori dans un document.

Les éléments d’intégration de contenu

img

L’élément img représente une image et son contenu alternatif dans le cas où elle ne pourrait pas être affichée.

picture

L’élément picture est un conteneur utilisé afin de définir zéro ou plusieurs éléments source destinés à un élément img.

source

L’élément source permet d’indiquer plusieurs sources alternatives pour des éléments de type media (images, audio ou video).

audio

L’élément audio permet d’intégrer une piste audio dans une page.

video

L’élément video permet d’intégrer une vidéo dans une page.

track

L’élément track représente une piste texte pour un média de type audio ou vidéo.

iframe

L’élément iframe représente un contexte de navigation imbriqué qui permet d’intégrer une page HTML dans la page courante.

object

L’élément object représente une ressource externe qui, selon le type de la ressource, sera traitée soit comme une image, soit comme un contexte de navigation imbriqué, soit comme une ressource externe à traiter par un plugin.

param

L’élément param définit les paramètres qui peuvent être employés dans un élément object.

embed

L’élément embed représente un point d’intégration pour une application externe ou pour du contenu interactif

map

L’élément map définit une carte-image.

area

L’élément area représente soit un hyperlien avec du texte et une zone correspondante sur une carte-image, soit une zone morte sur une carte graphique.

svg

L’élément svg peut être utilisé pour intégrer des fragments de code SVG à l’intérieur d’un document.

math

L’élément math est l’élément racine de MathML.

Les éléments de tableau

table

L’élément table représente un tableau.

thead

L’élément thead est un conteneur qui représente la ou les lignes d’en-tête d’un tableau.

tbody

L’élément tbody est un conteneur qui représente la ou les lignes constituant le corps du tableau.

tfoot

L’élément tfoot est un conteneur qui représente la ou les lignes constituant le pied du tableau.

tr

L’élément tr représente une ligne de tableau.

th

L’élément th représente une cellule d’une ligne d’en-tête.

td

L’élément td représente une cellule de tableau.

colgroup

L’élément colgroup représente un groupe composé d’une ou de plusieurs colonnes de tableau.

col

L’élément col représente une ou plusieurs colonnes dans un groupe de colonne représenté par un élément colgroup.

caption

L’élément caption représente le titre de son élément tableau parent.

Les éléments de formulaire

form

L’élément form représente un formulaire.

input

L’élément input représente un champ de données typé, généralement avec un contrôle de formulaire pour permettre à l’utilisateur de modifier les données. L’attribut type> contrôle le type de données de l’élément.

label

L’élément label est utilisé pour ajouter un label ou « légende » à un contrôle de formulaire spécifique.

textarea

L’élément textarea représente un contrôle ou champ de texte long.

select

L’élément select représente une liste d’options.

option

L’élément option représente l’une des options (choix) d’une liste select.

optgroup

L’élément optgroup représente un groupe d’options groupées sous un label commun.

button

L’élément button représente un bouton, c’est-à-dire un contrôle permettant à un utilisateur de déclencher des actions lorsqu’il est activé.

fieldset

L’élément fieldset représente une zone de formulaire, c’est-à-dire un groupement de plusieurs contrôles de formulaire sous un même label.

legend

L’élément legend représente une légende pour un élément fieldset.

datalist

L’élément datalist représente un ensemble d’éléments option qui représentent les valeurs possibles pour d’autres contrôles.

progress

L’élément progress représente la progression d’une tâche, sous forme de fraction du total achevé ou simplement de progression.

output

L’élément output représente le résultat d’un calcul effectué par l’application ou le résultat d’une action de l’utilisateur.

meter

L’élément meter représente une mesure scalaire dans une plage connue, ou une valeur fractionnelle (pourcentage de votants d’un sondage, etc.).

Les éléments interactifs

details

L’élément details est un élément interactif à partir duquel l’utilisateur peut obtenir des informations ou des contrôles supplémentaires.

summary

L’élément summary représente une boîte permettant de révéler le contenu d’un résumé ou d’une légende pour le contenu d’un élément details

dialog

L’élément dialog représente une partie d’une application avec laquelle un utilisateur interagit pour effectuer une tâche, par exemple une boîte de dialogue, un inspecteur ou une fenêtre.

Les éléments de script

script

L’élément script permet aux auteurs d’inclure un script dynamique et des blocs de données dans leurs documents. L’élément ne représente pas de contenu pour l’utilisateur.

noscript

L’élément noscript ne représente rien si le scripting est activé et représente ses enfants si le scripting est désactivé. Il est utilisé pour présenter différents annotations aux agents utilisateurs prenant en charge les scripts et à ceux qui ne les prennent pas en charge.

canvas

L’élément canvas fournit aux scripts un canevas bitmap dépendant de la résolution, qui peut être utilisé à la volée pour rendre des graphiques, des graphiques de jeu, des illustrations ou d’autres images.

template

L’élément template est utilisé pour déclarer des fragments de HTML pouvant être clonés et insérés dans le document par un script.

slot

L’élément slot crée un emplacement nommé dans un arbre fantôme. Si un nœud lui est attribué, il le représente; sinon, il représente son contenu.