Etiqueta HTML <noscript>
La etiqueta <noscript> muestra contenido alternativo en navegadores que no soportan scripts. Descripción y ejemplos de uso.
La etiqueta <noscript> define el contenido que el navegador muestra solo cuando JavaScript no está disponible — ya sea porque el navegador no admite scripts o porque el usuario los ha desactivado. Cuando JavaScript está habilitado, el navegador ignora el elemento <noscript> y no renderiza nada de él.
Esta página explica para qué sirve <noscript>, dónde está permitido colocarlo y cómo usarlo para ofrecer una experiencia significativa a las personas que no ejecutan tus scripts.
Cuándo usar <noscript>
Las interfaces modernas dependen en gran medida de JavaScript, pero una parte no trivial de las solicitudes llegan con los scripts desactivados: usuarios preocupados por la privacidad con extensiones como NoScript, entornos corporativos restringidos, conexiones inestables donde un script no pudo cargarse y muchos rastreadores web. La etiqueta <noscript> es la herramienta estándar para la mejora progresiva y la degradación elegante — crear una página que siga comunicando algo útil cuando falta la capa de JavaScript.
Usos típicos:
- Reemplazar un widget renderizado con JS (un gráfico, un feed en vivo, un mapa interactivo) con un mensaje estático, un enlace o una imagen alternativa.
- Advertir al usuario que una función depende de JavaScript y explicar cómo proceder.
- Proporcionar una alternativa sin JS como un
<form>simple que envía datos al servidor en lugar de hacerlo mediantefetch.
Está estrechamente relacionada con la etiqueta <script>, que incorpora el JavaScript del que <noscript> actúa como alternativa — las dos suelen escribirse juntas.
Dónde puedes colocar <noscript>
En HTML5, la etiqueta <noscript> puede colocarse tanto en el <head> como en el <body>. En HTML4 solo se permitía dentro de <body>. La ubicación determina qué contenido está permitido dentro de ella:
- Dentro de
<head>solo puede contener elementos<link>,<style>y<meta>. Así es como se intercambian hojas de estilo o metadatos para el caso sin JS. - Dentro de
<body>puede contener cualquier contenido de flujo — párrafos, imágenes, enlaces, formularios, etc.
<noscript> en el <head> (solo <link>, <style>, <meta>)
Por ejemplo, cargar una hoja de estilo alternativa que estile el contenido normalmente oculto hasta que JavaScript lo revele:
<!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> en el <body> (cualquier contenido de flujo)
En el body puedes usar contenido alternativo más completo. Este ejemplo renderiza un mensaje estático en lugar de un widget que JavaScript normalmente construiría:
<!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>Cuando JavaScript está habilitado, el <script> reemplaza el contenido del contenedor y el bloque <noscript> no produce nada. Cuando está desactivado, el script nunca se ejecuta y el usuario ve el párrafo estático con un enlace de descarga funcional.
Sintaxis
La etiqueta <noscript> se usa en pares. El contenido alternativo se escribe entre las etiquetas de apertura <noscript> y de cierre </noscript>.
<noscript>Sorry, your browser doesn’t support JavaScript!</noscript>Atributos
La etiqueta <noscript> admite los Atributos Globales y los Atributos de Evento.