HTML <noscript> Tag
Der <noscript>-Tag zeigt alternativen Inhalt in Browsern, die JavaScript nicht unterstützen. Beschreibung und Anwendungsbeispiele.
Der <noscript>-Tag definiert Inhalt, den der Browser nur anzeigt, wenn JavaScript nicht verfügbar ist — entweder weil der Browser keine Skripte unterstützt oder weil der Benutzer sie deaktiviert hat. Wenn JavaScript aktiviert ist, ignoriert der Browser das <noscript>-Element und rendert nichts daraus.
Diese Seite erklärt, wofür <noscript> gedacht ist, wo es platziert werden darf und wie man es einsetzt, um Besuchern, die keine Skripte ausführen, eine sinnvolle Erfahrung zu bieten.
Wann <noscript> verwendet werden sollte
Moderne Benutzeroberflächen setzen stark auf JavaScript, aber ein nicht unerheblicher Anteil der Anfragen kommt ohne aktiviertes Scripting an: datenschutzbewusste Nutzer mit Erweiterungen wie NoScript, gesperrte Unternehmensumgebungen, instabile Verbindungen, bei denen ein Skript nicht geladen wurde, sowie viele Web-Crawler. Der <noscript>-Tag ist das Standardwerkzeug für Progressive Enhancement und Graceful Degradation — also für den Aufbau einer Seite, die auch ohne JavaScript-Schicht noch etwas Sinnvolles kommuniziert.
Typische Einsatzfälle:
- Ein per JavaScript gerendertes Widget (ein Diagramm, ein Live-Feed, eine interaktive Karte) durch eine statische Meldung, einen Link oder ein Fallback-Bild ersetzen.
- Den Benutzer darauf hinweisen, dass eine Funktion JavaScript benötigt, und erklären, wie er vorgehen soll.
- Eine JavaScript-freie Alternative anbieten, z. B. ein einfaches
<form>-Element, das Daten an den Server sendet, statt überfetchzu übermitteln.
Eng verwandt ist der <script>-Tag, der das JavaScript einbettet, von dem <noscript> als Fallback abweicht — beide werden üblicherweise zusammen verwendet.
Wo <noscript> platziert werden kann
In HTML5 kann der <noscript>-Tag sowohl im <head> als auch im <body> platziert werden. In HTML4 war er nur innerhalb von <body> erlaubt. Die Platzierung bestimmt, welcher Inhalt darin zulässig ist:
- Innerhalb von
<head>darf er nur<link>-,<style>- und<meta>-Elemente enthalten. So können Stylesheets oder Metadaten für den Fall ohne JavaScript ausgetauscht werden. - Innerhalb von
<body>darf er beliebigen Flow-Inhalt enthalten — Absätze, Bilder, Links, Formulare und so weiter.
<noscript> im <head> (nur <link>, <style>, <meta>)
Zum Beispiel kann ein Fallback-Stylesheet geladen werden, das Inhalte gestaltet, die normalerweise erst durch JavaScript sichtbar werden:
<!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> im <body> (beliebiger Flow-Inhalt)
Im Body können reichhaltigere Fallback-Inhalte verwendet werden. Dieses Beispiel rendert eine statische Meldung anstelle eines Widgets, das JavaScript normalerweise aufbauen würde:
<!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>Wenn JavaScript aktiviert ist, ersetzt das <script>-Element den Inhalt des Containers und der <noscript>-Block erzeugt nichts. Wenn es deaktiviert ist, wird das Skript nicht ausgeführt und der Benutzer sieht den statischen Absatz mit einem funktionierenden Download-Link.
Syntax
Der <noscript>-Tag wird als Paar verwendet. Der Fallback-Inhalt wird zwischen dem öffnenden <noscript>- und dem schließenden </noscript>-Tag geschrieben.
<noscript>Sorry, your browser doesn’t support JavaScript!</noscript>Attribute
Der <noscript>-Tag unterstützt die Global Attributes und Event Attributes.