La balise <noscript> est utilisée pour fournir du contenu alternatif aux utilisateurs dont le navigateur ne prend pas en charge JavaScript ou a désactivé son exécution.
Elle permet de garantir une certaine accessibilité et une expérience minimale, même en l'absence de fonctionnalités basées sur JavaScript.
Cette balise est particulièrement utile pour des sites où JavaScript est essentiel, comme les applications monopages (SPA pour Single Page Application : les sites réalisés avec React par exemple).
Structure et syntaxe de la balise <noscript>
Structure et syntaxe de base
La balise <noscript> est une balise conteneur qui s’utilise pour englober du contenu alternatif.
Elle utilise donc :
- Une balise d'ouverture
<noscript>; - Une balise de fermeture
</noscript>.
Ce contenu est affiché uniquement si JavaScript est désactivé ou non pris en charge.
On l'utilise généralement comme ça :
<noscript>
[contenu alternatif]
</noscript>
Exemple d'utilisation
Prenons un exemple détaillé :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de balise noscript</title>
</head>
<body>
<h1>Bienvenue sur notre site</h1>
<p>Pour une meilleure expérience, assurez-vous que JavaScript est activé.</p>
<noscript>
<p>
<strong>Attention :</strong> JavaScript est désactivé ou non pris en charge par votre navigateur. Certaines fonctionnalités ne seront pas disponibles.
</p>
</noscript>
</body>
</html>Dans cet exemple, le texte "Attention..." n'est affiché que pour les utilisateurs qui ne peuvent pas utiliser JavaScript.
Attributs
La balise <noscript> ne prend pas d’attribut spécifique, elle peut utiliser tous les attributs classiques tels que : title, class, id, etc.
Compatibilité des navigateurs
| Navigateur | Compatibilité avec <noscript> |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Oui |