OUJOOD.COM
Qu'est-ce que la balise <script> ?
LES BALISES HTMLLa balise <script> est un élément HTML essentiel qui permet d'intégrer ou de référencer du code JavaScript dans une page web. Elle joue un rôle fondamental dans l'ajout d'interactivité et de fonctionnalités dynamiques à vos sites internet.
Cette balise peut être utilisée de deux manières principales :
- Script inline : le code JavaScript est écrit directement entre les balises d'ouverture et de fermeture
- Script externe : la balise référence un fichier .js externe via l'attribut
src
Syntaxe et utilisation de base
Balise de fermeture obligatoire. La balise <script> nécessite impérativement une balise de fermeture </script>, même lorsqu'elle référence un fichier externe.
La balise <script> peut être insérée dans les sections <head> ou <body> d'un document HTML. Par défaut, le langage de script utilisé est le JavaScript, mais il est possible de préciser explicitement le type via l'attribut type.
Positionnement recommandé
Pour optimiser les performances de chargement de votre page, il est généralement recommandé de placer les balises <script> juste avant la fermeture de la balise </body>, ou d'utiliser les attributs defer ou async pour un chargement asynchrone.
Exemples d'utilisation
Exemple 1 - Script inline : 📋 Copier le code
<script>
function afficherMessage() {
console.log('Bonjour depuis JavaScript !');
alert('Page chargée avec succès');
}
// Appel de la fonction au chargement
window.onload = afficherMessage;
</script>
Exemple 2 - Script externe : 📋 Copier le code
<script src="js/mon-script.js"></script> <!-- Avec attributs de performance --> <script src="js/mon-script.js" defer></script> <script src="js/analytics.js" async></script>
Exemple 3 - Script avec type MIME : 📋 Copier le code
<script type="text/javascript" src="application.js"></script> <!-- Pour les modules ES6 --> <script type="module" src="mon-module.js"></script>
Les attributs de la balise <script>
La colonne DTD dans les tableaux suivants indique dans quelle spécification HTML 4.01/XHTML 1.0 l'attribut est autorisé :
S = Strict, T = Transitional, F = Frameset.
Attribut obligatoire
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| type | MIME-type | Spécifie le type MIME du script (ex : text/javascript, application/javascript, module) | STF |
Note : En HTML5, l'attribut type n'est plus obligatoire. Le JavaScript est le langage par défaut.
Attributs optionnels
| Attribut | Valeur | Description | DTD |
|---|---|---|---|
| src | URL | Spécifie l'URL du fichier JavaScript externe à charger | STF |
| async | async | Le script est exécuté de manière asynchrone dès qu'il est disponible (HTML5) | HTML5 |
| defer | defer | L'exécution du script est différée jusqu'à ce que la page soit entièrement analysée | STF |
| charset | charset | Définit l'encodage des caractères du fichier script externe (ex : UTF-8, ISO-8859-1) | STF |
| crossorigin | anonymous / use-credentials | Configure le mode CORS pour les scripts provenant d'origines différentes | HTML5 |
| integrity | hash | Permet la vérification d'intégrité du fichier (SRI - Subresource Integrity) | HTML5 |
| nomodule | nomodule | Le script ne doit pas être exécuté dans les navigateurs supportant les modules ES6 | HTML5 |
| referrerpolicy | no-referrer / origin / etc. | Spécifie quelle information de référent envoyer lors du chargement du script | HTML5 |
Différence entre async et defer
Ces deux attributs modifient la manière dont le navigateur charge et exécute les scripts externes :
- defer : Le script est téléchargé en parallèle du parsing HTML, mais son exécution est retardée jusqu'à la fin du parsing. Les scripts avec
defersont exécutés dans l'ordre d'apparition. - async : Le script est téléchargé en parallèle et exécuté dès qu'il est disponible, interrompant le parsing HTML si nécessaire. L'ordre d'exécution n'est pas garanti.
- Sans attribut : Le script bloque le parsing HTML pendant son téléchargement et son exécution.
Exemple comparatif : 📋 Copier le code
<!-- Chargement bloquant (déconseillé) --> <script src="script.js"></script> <!-- Chargement différé, exécution ordonnée (recommandé) --> <script src="script.js" defer></script> <!-- Chargement asynchrone, exécution immédiate --> <script src="analytics.js" async></script>
Bonnes pratiques
- Utilisez defer pour vos scripts principaux qui dépendent du DOM
- Utilisez async pour les scripts indépendants comme les outils d'analytics
- Placez les scripts en fin de body si vous n'utilisez pas defer/async
- Minifiez vos fichiers JavaScript pour améliorer les performances
- Utilisez l'attribut integrity pour les scripts externes (CDN) pour renforcer la sécurité
- Évitez l'attribut language (obsolète), utilisez type si nécessaire
Exemple avec sécurité renforcée : 📋 Copier le code
<script src="https://cdn.example.com/library.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..." crossorigin="anonymous" defer> </script>
Compatibilité et support
La balise <script> est supportée par tous les navigateurs modernes et anciens. Les attributs HTML5 comme async, crossorigin et integrity sont supportés par tous les navigateurs récents (Chrome, Firefox, Safari, Edge).
Note importante : L'attribut language est obsolète depuis HTML5. Il ne devrait plus être utilisé dans les nouveaux projets.
Vous êtes ici : La balise HTML <script> - Guide complet Retour à la liste des balises
Retour à l'accueil du site
Par carabde 10 mars 2014 - Mis à jour le 10/05/2026