Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <source> définit une ou plusieurs ressources média pour les éléments <picture>, <audio> et <video>. C'est un élément vide, ce qui signifie qu'il n'a pas de contenu et ne nécessite pas de balise fermante. Cet élément est couramment utilisé pour proposer le même contenu média dans plusieurs formats de fichiers afin d'assurer la compatibilité avec un large éventail de navigateurs, compte tenu de leur prise en charge différente des formats de fichiers image et des formats de fichiers média.
Cet élément inclut les attributs universels.
typeDéfinit le type MIME de l'image ou autre type de média, incluant éventuellement un paramètre codecs.
srcDéfinit l'URL de la ressource média. Obligatoire si le parent de <source> est <audio> ou <video>. Interdit si le parent est <picture>.
srcsetDéfinit une liste, séparée par des virgules, d'une ou plusieurs URL d'images et de leurs descripteurs. Obligatoire si le parent de <source> est <picture>. Interdit si le parent est <audio> ou <video>.
La liste se compose de chaînes de caractères séparées par des virgules, indiquant un ensemble d'images possibles à utiliser par le navigateur. Chaque chaîne de caractères se compose de :
Chaque chaînes de caractères de la liste doit comporter soit un descripteur de largeur, soit un descripteur de densité de pixels pour être valide. Ces deux descripteurs ne doivent pas être utilisés ensemble ; un seul doit être utilisé de façon cohérente dans toute la liste. La valeur de chaque descripteur dans la liste doit être unique. Le navigateur choisit l'image la plus adéquate à afficher à un instant donné en fonction de ces descripteurs. Si les descripteurs ne sont pas définis, la valeur par défaut utilisée est 1x. Si l'attribut sizes est également présent, chaque chaînes de caractères doit inclure un descripteur de largeur. Si le navigateur ne prend pas en charge srcset, alors src sera utilisé pour la source d'image par défaut.
sizesDéfinit une liste de tailles de sources qui décrit la largeur finale affichée de l'image. Autorisé si le parent de <source> est <picture>. Interdit si le parent est <audio> ou <video>.
La liste se compose de tailles de sources séparées par des virgules. Chaque taille de source est une paire condition média et longueur. Avant de disposer la page, le navigateur utilise cette information pour déterminer quelle image définie dans srcset afficher. Notez que sizes prendra effet uniquement si des descripteurs de largeur sont fournis avec srcset, et non des descripteurs de densité de pixels (par exemple, il faut utiliser 200w au lieu de 2x).
mediaDéfinit la requête média pour le média visé par la ressource.
heightDéfinit la hauteur intrinsèque de l'image en pixels. Autorisé si le parent de <source> est un <picture>. Interdit si le parent est <audio> ou <video>.
La valeur de la hauteur doit être un entier sans aucune unité.
widthDéfinit la largeur intrinsèque de l'image en pixels. Autorisé si le parent de <source> est un <picture>. Interdit si le parent est <audio> ou <video>.
La valeur de la largeur doit être un entier sans aucune unité.
L'élément <source> est un élément vide, ce qui signifie qu'il n'a pas de contenu et pas de balise fermante. Autrement dit, il ne faut jamais utiliser </source> dans votre HTML.
Le navigateur parcourt la liste des éléments <source> pour trouver un format qu'il prend en charge. Il utilise le premier qu'il peut afficher. Pour chaque élément <source> :
Si aucun des éléments <source> ne fournit une source utilisable :
Pour des informations sur les formats d'image pris en charge par les navigateurs web et des conseils pour choisir les formats à utiliser, consultez notre Guide des types et formats de fichiers image. Pour plus de détails sur les types de média vidéo et audio utilisables, consultez le Guide des types et formats média.
Cet exemple montre comment proposer une vidéo dans différents formats : WebM pour les navigateurs qui le prennent en charge, Ogg pour ceux qui prennent en charge Ogg, et QuickTime pour les navigateurs qui prennent en charge QuickTime. Si l'élément <audio> ou <video> n'est pas pris en charge par le navigateur, un message d'information s'affiche à la place. Si le navigateur prend en charge l'élément mais pas l'un des formats proposés, un évènement error est déclenché sur l'élément <audio> ou <video> et les contrôles média par défaut (s'ils sont activés) indiqueront une erreur. Pour plus de détails sur les formats de fichiers média à utiliser et leur prise en charge par les navigateurs, consultez le Guide des types et formats média.
Cet exemple montre comment proposer un fichier source alternatif pour les fenêtres de visualisation dépassant une certaine largeur. Lorsque l'environnement de navigation d'un·e utilisateur·ice remplit la condition media définie, l'élément <source> associé est choisi. Le contenu de son attribut src est alors demandé et rendu. Si la condition media ne correspond pas, le navigateur passe à la <source> suivante dans la liste. La deuxième option <source> dans le code ci-dessous n'a pas de condition media, elle sera donc sélectionnée pour tous les autres contextes de navigation.
Pour plus d'exemples, l'article Vidéo et audio HTML dans la section Apprendre est une excellente ressource.
Dans cet exemple, deux éléments <source> sont inclus dans <picture>, fournissant des versions d'une image à utiliser lorsque l'espace disponible dépasse certaines largeurs. Si la largeur disponible est inférieure à la plus petite de ces largeurs, le navigateur utilisera l'image définie dans l'élément <img>.
Avec l'élément <picture>, il faut toujours inclure un <img> avec une image de repli. Veillez également à ajouter un attribut alt pour l'accessibilité, sauf si l'image est purement décorative et sans rapport avec le contenu.
Dans cet exemple, trois éléments <source> avec les attributs height et width sont inclus dans un élément <picture>. Une requête média permet au navigateur de définir l'image à afficher avec les attributs height et width en fonction de la taille de la zone d'affichage.
| Aucune. |
| Aucun, c'est un élément vide. |
| Cet élément doit avoir une balise ouvrante mais pas de balise fermante. |
|
Un élément média — <audio> ou
<video> — pour lequel l'élément
<source> doit être placé avant
tout contenu de flux
ou tout élément <track>.
|
| Pas de rôle correspondant (angl.) |
| Aucun role autorisé |
| HTMLSourceElement |
| HTML # the-source-element |
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Cette page a été modifiée le 25 avr. 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.