Tag HTML <noscript>
Il tag <noscript> mostra contenuto alternativo nei browser che non supportano gli script. Descrizione del tag ed esempi d'uso.
Il tag <noscript> definisce il contenuto che il browser mostra solo quando JavaScript non è disponibile — sia perché il browser non supporta gli script, sia perché l'utente li ha disabilitati. Quando JavaScript è abilitato, il browser ignora l'elemento <noscript> e non ne visualizza nulla.
Questa pagina spiega a cosa serve <noscript>, dove è consentito inserirlo e come utilizzarlo per offrire un'esperienza significativa alle persone che non eseguono i tuoi script.
Quando usare <noscript>
Le interfacce moderne fanno largo uso di JavaScript, ma una quota non trascurabile di richieste arriva con gli script disabilitati: utenti attenti alla privacy con estensioni come NoScript, ambienti aziendali con restrizioni, connessioni instabili in cui uno script non è riuscito a caricarsi, e molti web crawler. Il tag <noscript> è lo strumento standard per il progressive enhancement e la graceful degradation — costruire una pagina che comunichi comunque qualcosa di utile quando il livello JavaScript è assente.
Usi tipici:
- Sostituire un widget renderizzato con JS (un grafico, un feed live, una mappa interattiva) con un messaggio statico, un link o un'immagine di fallback.
- Avvisare l'utente che una funzionalità dipende da JavaScript e spiegare come procedere.
- Fornire un'alternativa senza JS, come un semplice
<form>che invia i dati al server anziché tramitefetch.
Strettamente correlato è il tag <script>, che incorpora il JavaScript da cui <noscript> funge da fallback — i due vengono solitamente scritti insieme.
Dove inserire <noscript>
In HTML5 il tag <noscript> può essere inserito sia nel <head> che nel <body>. In HTML4 era consentito solo all'interno di <body>. Il posizionamento determina quale contenuto è ammesso al suo interno:
- Dentro
<head>può contenere solo elementi<link>,<style>e<meta>. In questo modo è possibile scambiare fogli di stile o metadati per il caso senza JS. - Dentro
<body>può contenere qualsiasi contenuto di flusso — paragrafi, immagini, link, form e così via.
<noscript> nel <head> (solo <link>, <style>, <meta>)
Ad esempio, caricare un foglio di stile di fallback che stilizzi il contenuto normalmente nascosto fino a quando JavaScript lo rivela:
<!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> nel <body> (qualsiasi contenuto di flusso)
Nel body è possibile utilizzare contenuti di fallback più ricchi. Questo esempio mostra un messaggio statico al posto di un widget che JavaScript costruirebbe normalmente:
<!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>Quando JavaScript è abilitato, il <script> sostituisce il contenuto del contenitore e il blocco <noscript> non produce nulla. Quando è disabilitato, lo script non viene mai eseguito e l'utente vede il paragrafo statico con un link di download funzionante.
Sintassi
Il tag <noscript> viene usato in coppia. Il contenuto di fallback è scritto tra il tag di apertura <noscript> e quello di chiusura </noscript>.
<noscript>Sorry, your browser doesn’t support JavaScript!</noscript>Attributi
Il tag <noscript> supporta gli Attributi Globali e gli Attributi Evento.