La balise HTML <noscript>
La balise <noscript> affiche un contenu alternatif dans les navigateurs ne prenant pas en charge les scripts. Description et exemples d'utilisation.
La balise <noscript> définit un contenu que le navigateur affiche uniquement lorsque JavaScript n'est pas disponible — soit parce que le navigateur ne prend pas en charge les scripts, soit parce que l'utilisateur les a désactivés. Lorsque JavaScript est activé, le navigateur ignore l'élément <noscript> et n'en restitue rien.
Cette page explique à quoi sert <noscript>, où vous êtes autorisé à le placer, et comment l'utiliser pour offrir une expérience significative aux personnes qui n'exécutent pas vos scripts.
Quand utiliser <noscript>
Les interfaces modernes reposent fortement sur JavaScript, mais une part non négligeable des requêtes arrive avec les scripts désactivés : les utilisateurs soucieux de leur vie privée avec des extensions comme NoScript, les environnements d'entreprise verrouillés, les connexions défaillantes où un script n'a pas pu se charger, et de nombreux robots d'exploration. La balise <noscript> est l'outil standard pour l'amélioration progressive et la dégradation gracieuse — construire une page qui communique toujours quelque chose d'utile lorsque la couche JavaScript est absente.
Utilisations typiques :
- Remplacer un widget rendu par JavaScript (un graphique, un flux en direct, une carte interactive) par un message statique, un lien ou une image de secours.
- Avertir l'utilisateur qu'une fonctionnalité dépend de JavaScript et expliquer comment procéder.
- Fournir une alternative sans JavaScript, comme un
<form>simple qui envoie les données au serveur au lieu de les soumettre viafetch.
La balise <script> est étroitement liée à <noscript> — elle embarque le JavaScript dont <noscript> constitue le repli — les deux sont généralement écrits ensemble.
Où placer <noscript>
En HTML5, la balise <noscript> peut être placée aussi bien dans <head> que dans <body>. En HTML4, elle n'était autorisée qu'à l'intérieur de <body>. L'emplacement détermine le contenu autorisé à l'intérieur :
- Dans
<head>, elle ne peut contenir que des éléments<link>,<style>et<meta>. C'est ainsi que l'on permute des feuilles de style ou des métadonnées pour le cas sans JavaScript. - Dans
<body>, elle peut contenir n'importe quel contenu de flux — paragraphes, images, liens, formulaires, etc.
<noscript> dans <head> (uniquement <link>, <style>, <meta>)
Par exemple, charger une feuille de style de secours qui met en forme le contenu normalement masqué jusqu'à ce que JavaScript le révèle :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<noscript>
<link rel="stylesheet" href="no-js.css" />
</noscript>
</head>
<body>
<p>Page content.</p>
</body>
</html><noscript> dans <body> (tout contenu de flux)
Dans le corps, vous pouvez utiliser un contenu de secours plus riche. Cet exemple affiche un message statique à la place d'un widget que JavaScript construirait normalement :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div id="chart">
<script>
document.getElementById("chart").textContent =
"Interactive chart loaded with JavaScript.";
</script>
<noscript>
<p>Charts require JavaScript. Please enable it to view live data,
or <a href="/report.csv">download the raw report</a> instead.</p>
</noscript>
</div>
</body>
</html>Lorsque JavaScript est activé, le <script> remplace le contenu du conteneur et le bloc <noscript> ne produit rien. Lorsqu'il est désactivé, le script ne s'exécute jamais et l'utilisateur voit le paragraphe statique avec un lien de téléchargement fonctionnel.
Syntaxe
La balise <noscript> fonctionne par paires. Le contenu de secours est écrit entre les balises ouvrante <noscript> et fermante </noscript>.
<noscript>Sorry, your browser doesn’t support JavaScript!</noscript>Attributs
La balise <noscript> prend en charge les Attributs globaux et les Attributs d'événements.