L'élément HTML <script> est utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple WebGL).

Les scripts sans attribut async ou defer sont chargés et exécutés immédiatement avant que le navigateur continue l'analyse de la page.

Attributs

Cet élément inclut les attributs universels.

async
Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet.
Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est async="false") lors de l'analyse du document HTML.
Les scripts insérés dynamiquement (via document.createElement()) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer async="false".

Se référer au tableau de compatibilité ci-après pour les informations concernant la prise en charge par les navigateurs. Voir aussi la page sur les scripts asynchrones avec asm.js.
crossorigin
Les balises de script classiques enverront un minimum d'informations à window.onerror pour les scripts qui ne respectent pas les contrôles standard du CORS. Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, on pourra utiliser cet attribut. Voir la page de réglages des attributs CORS pour plus d'explications quant aux valeurs valides.
defer
Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement DOMContentLoaded. Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet. Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement async=false. Les scripts qui possèdent un attribut defer seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.
Les scripts qui utilisent l'attribut defer empêche le déclenchement de l'évènement DOMContentLoaded tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.
integrity
Cet attribut contient des métadonnées que l'agent utilisateur peut vérifier afin de contrôler qu'une ressource téléchargée n'a pas été modifiée de façon frauduleuse. Pour plus d'informations, consulter la page relative à l'intégrité des sous-ressources.
nomodule
Cet attribut booléen indique que le script ne doit pas être exécuté dans le navigateur si celui prend en charge les modules ES6. En pratique, de tels scripts seront utilisés pour couvrir les cas où le navigateur ne prend pas en charge les modules JavaScript.
nonce
Un nonce cryptographique utilisé pour inscrire les scripts en ligne sur une liste blanche pour la règle script-src de la CSP (Content Security Policy). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.
referrerpolicy
Une chaîne de caractères qui indique le référent (referrer) à utiliser lors de la récupération du script :
  • no-referrer signifie que l'en-tête Referer ne sera pas envoyé.
  • no-referrer-when-downgrade signifie qu'aucune en-tête Referrer ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.
  • origin signifie que le référent sera l'origine de la page (c'est-à-dire son schéma, son hôte et le port utilisé).
  • origin-when-cross-origin signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.
  • same-origin un référent sera envoyé pour les origines du même site mais les requêtes multi-origines ne contiendront pas d'informations de référent.
  • strict-origin seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).
  • strict-origin-when-cross-origin : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).
  • unsafe-url signifie que le référent incluera l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.

Utiliser une chaîne vide ("") correspond à la valeur par défaut et à la valeur utilisée si referrerpolicy n'est pas pris en charge. Si cet attribut n'est pas explicitement défini sur l'élément <script>, ce dernier respectera la politique défine à un niveau supérieur (sur le document ou sur le domaine). Si une telle politique n'est pas disponible, la chaîne vide sera considérée comme équivalente à no-referrer-when-downgrade.

src
Cet attribut définit l'URI d'un script externe. Cela peut être utilisé pour insérer des scripts autrement qu'en les insérant à même le document. Les éléments script avec un attribut src défini ne doivent pas avoir de script compris dans leurs balises. Cela peut causer un comportement inattendu où le contenu du fichier référencé est chargé mais où le contenu de l'élément est ignoré.
type

Cet attribut indique le type de script. La valeur de cet attribut peut appartenir à l'une de ces catégories :

  • Correspondant à un type MIME JavaScript ou absent : Cela indique que le script est en JavaScript. La spécification HTML5 conseille aux auteurs d'omettre cet attribut plutôt que de fournir un type MIME redondant. Pour les navigateurs plus anciens, cela indiquait le langage de script du code embarqué. Les types MIME correspondant à JavaScript sont énumérés dans la spécification.
  • module : Le code sera traité comme un module JavaScript. Le traitement du script n'est pas affecté par les attributs charset et defer. Pour plus d'informations sur l'utilisation des modules, voir le guide sur les modules JavaScript.
  • Toute autre valeur : Le contenu embarqué est considéré comm un bloc de donnée et ne sera pas traité par le navigateur. Les développeurs doivent utiliser un type MIME valide qui n'est pas un type MIME JavaScript afin d'indiquer de tels blocs de donnée. Dans ce cas, l'attribut src sera ignoré.

Note : Avec Firefox, on pouvait indiquer la version JavaScript d'un élément <script> en incluant un paramètre non-standard version à l'intérieur de type (ex. type="text/javascript;version=1.8"). Cette spécificité a été retirée avec Firefox 59 (cf. bug 1428745).

Attributs dépréciés

charset
Si cet attribut est présent, sa valeur doit correspondre (quelle que soit la casse) à "utf-8". Cet attribut est superflu car les documents doivent utiliser UTF-8 et car les éléments script héritent de l'encodage du document.
language
Comme l'attribut type, cet attribut spécifie le langage de script utilisé. Cependant, contrairement à l'attribut type les valeurs possibles de cet attribut n'ont jamais été normalisées. Il est recommandé d'utiliser l'attribut type plutôt que celui-là.

Notes

Le script doit être servi avec le type MIME text/javascript. Cependant, les navigateurs appliquent cette règle avec une certaine flexibilité et ne bloquent que si le script est servi avec un type image (image/*), vidéo (video/*) ou audio (audio/*) ou CSV (text/csv). Si le script est bloqué, un évènement error sera déclenché sur l'élément, sinon, l'évènement load sera envoyé.

Exemples

Exemple simple

<!-- HTML4 et (x)HTML -->
<script type="text/javascript" src="javascript.js"></script>

<!-- HTML5 -->
<script src="javascript.js"></script>

Utilisation des modules et d'une alternative

Les navigateurs qui prennent en charge le type module prennent également en charge un attribut nomodule qui permet aux navigateurs qui ne gèrent pas les modules d'utiliser un autre script.

<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>

Résumé technique

Catégories de contenu Contenu de flux, contenu phrasé, contenu de méta-données.
Contenu autorisé Script dynamique tel que text/javascript.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément acceptant du contenu de méta-données ou tout élément acceptant du contenu phrasé.
Rôles ARIA autorisés Aucun.
Interface DOM HTMLScriptElement

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<script>' dans cette spécification.
Standard évolutif Retrait de l'attribut charset.
Unknown
La définition de '<script>' dans cette spécification.
Statut inconnu Retrait de l'attribut charset.
HTML 5.2
La définition de '<script>' dans cette spécification.
Recommendation Ajout de la valeur module pour type
HTML 5.1
La définition de '<script>' dans cette spécification.
Recommendation  
HTML5
La définition de '<script>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<script>' dans cette spécification.
Recommendation  
Subresource Integrity
La définition de '<script>' dans cette spécification.
Recommendation Ajout de l'attribut integrity.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
scriptChrome Support complet 1Edge Support complet OuiFirefox Support complet 1
Notes
Support complet 1
Notes
Notes Starting in Firefox 4, inserting <script> elements that have been created by calling document.createElement("script") no longer enforces execution in insertion order. This change lets Firefox properly abide by the specification. To make script-inserted external scripts execute in their insertion order, set .async=false on them.
IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
asyncChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
crossoriginChrome Support complet 30Edge Support complet OuiFirefox Support complet 13IE Aucun support NonOpera Support complet 12Safari Support complet Oui
Notes
Support complet Oui
Notes
Notes The crossorigin attribute was implemented in WebKit in WebKit bug 81438.
WebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 14Opera Android ? Safari iOS ? Samsung Internet Android Support complet Oui
deferChrome Support complet Oui
Notes
Support complet Oui
Notes
Notes Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
Edge Support complet OuiFirefox Support complet 3.5
Notes
Support complet 3.5
Notes
Notes Since Firefox 3.6, the defer attribute is ignored on scripts that don't have the src attribute. However, in Firefox 3.5 even inline scripts are deferred if the defer attribute is set.
IE Support complet 10
Notes
Support complet 10
Notes
Notes In versions prior to Internet Explorer 10, it implemented defer by a proprietary specification. Since version 10 it conforms to the W3C specification.
Opera Support complet Oui
Notes
Support complet Oui
Notes
Notes Opera does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
Safari Support complet OuiWebView Android Support complet Oui
Notes
Support complet Oui
Notes
Notes WebView does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
Chrome Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
Firefox Android Support complet 4Opera Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Opera does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Samsung Internet does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml) - Chromium Issue #611136, Chromium Issue #874749
integrityChrome Support complet 45Edge Support partiel 17Firefox Support complet 43IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet 45Chrome Android Support complet 45Firefox Android Support complet 43Opera Android ? Safari iOS Aucun support NonSamsung Internet Android Support complet 5.0
language
ObsolèteNon-standard
Chrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
nomodule
Expérimentale
Chrome Support complet 61Edge Support complet 16Firefox Support complet 60
Support complet 60
Aucun support 55 — 60
Désactivée
Désactivée From version 55 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 48Safari Support complet 11WebView Android Support complet 61Chrome Android Support complet 61Firefox Android Support complet 60
Support complet 60
Aucun support 55 — 60
Désactivée
Désactivée From version 55 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 45Safari iOS Support complet 11Samsung Internet Android Support complet 8.0
referrerPolicyChrome Support complet 70Edge ? Firefox Support complet 65IE Aucun support NonOpera Support complet OuiSafari Aucun support NonWebView Android Support complet 70Chrome Android Support complet 70Firefox Android Support complet 65Opera Android ? Safari iOS Aucun support NonSamsung Internet Android ?
srcChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
textChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
typeChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
type.moduleChrome Support complet 61Edge Support complet 16Firefox Support complet 60
Support complet 60
Aucun support 54 — 60
Désactivée
Désactivée From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 48Safari Support complet 10.1WebView Android Support complet 61Chrome Android Support complet 61Firefox Android Support complet 60
Support complet 60
Aucun support 54 — 60
Désactivée
Désactivée From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 45Safari iOS Support complet 10.3Samsung Internet Android Support complet 8.0
type: The version parameter of the type attribute
Non-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support ? — 59IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support ? — 59Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Notes de compatibilité

Pour les anciens navigateurs qui ne prennent pas en charge l'attribut async attribute, les scripts insérés lors de l'analyse (parsing) bloquent l'analyseur, les scripts insérés par d'autres scripts s'exécutent en asynchrone sous IE et WebKit et en synchrone sous Opera et sous Firefox pour les versions antérieures à Firefox 4.0.

Sous Firefox 4.0, la propriété async du DOM vaut true par défaut pour les scripts créés avec document.createElement("script").async afin que le comportement par défaut corresponde au comportement d'IE et de WebKit. Afin que les scripts insérés par des scripts externes soient lancés dans l'ordre d'insertion, on définira .async=false pour les scripts dont on souhaite conserver l'ordre d'exécution.

document.write() ne doit jamais être appelé sur un script asynchrone avec async. Sous Gecko 1.9.2, si on appelle document.write(), cela aura un effet imprévisible. Pour Gecko 2.0, appeler document.write() depuis un script asynchrone n'aura aucun effet (en dehors d'afficher un message d'erreur dans la console).

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot, madarche, opii93, tregagnon, Goofy
Dernière mise à jour par : SphinxKnight,