<noscript>

Zuletzt aktualisiert am 4. Februar 2026

Das <noscript>-Element zeigt Fallback-Inhalt an, wenn JavaScript im Browser deaktiviert oder nicht verfügbar ist. Es ist das Gegenstück zu <script>: Während <script> Code für JavaScript-fähige Browser bereitstellt, sorgt <noscript> dafür, dass Nutzer ohne JavaScript nicht vor einer leeren Seite stehen.

Grundlagen

JavaScript ist heute allgegenwärtig, aber es gibt gute Gründe, warum es manchmal nicht verfügbar ist: Nutzer deaktivieren es bewusst aus Sicherheits- oder Datenschutzgründen, Firmen-Firewalls blockieren Scripts, Browser-Erweiterungen wie NoScript filtern JavaScript, oder das Script konnte wegen eines Netzwerkfehlers nicht geladen werden.

  • <noscript> wird nur angezeigt, wenn JavaScript deaktiviert oder nicht unterstützt wird
  • Wenn JavaScript aktiv ist, bleibt der gesamte Inhalt von <noscript> unsichtbar
  • Im <head> darf <noscript> nur <link>, <style> und <meta> enthalten
  • Im <body> darf <noscript> beliebigen HTML-Inhalt enthalten (Text, Bilder, Links, etc.)
  • Mehrere <noscript>-Elemente auf einer Seite sind erlaubt
  • <noscript> hat keine Attribute außer den globalen HTML-Attributen
  • Der Inhalt wird vom Browser komplett ignoriert, wenn JavaScript verfügbar ist

Syntax

<!-- Im head: Nur meta, link, style erlaubt -->
<head>
  <noscript>
    <style>
      .js-only { display: none; }
    </style>
  </noscript>
</head>

<!-- Im body: Beliebiger HTML-Inhalt -->
<body>
  <noscript>
    <p>Diese Seite benötigt JavaScript
      für volle Funktionalität.</p>
  </noscript>
</body>

Beispiele

Hinweistext bei deaktiviertem JavaScript

Der häufigste Anwendungsfall: Ein sichtbarer Hinweis, dass die Seite JavaScript benötigt. Da die Vorschau JavaScript aktiviert hat, zeigen wir hier den Code, den du im Browser sehen würdest, wenn JavaScript deaktiviert wäre:

<noscript>
  <div style="background: #fef2f2; border: 1px solid #fca5a5;
              border-radius: 8px; padding: 16px; margin: 16px 0;">
    <strong>JavaScript ist deaktiviert.</strong>
    <p>Einige Funktionen dieser Seite benötigen JavaScript.
      Bitte aktiviere JavaScript in deinen
      Browser-Einstellungen für die beste Erfahrung.</p>
  </div>
</noscript>

Fallback-Styles im head

Im <head> kannst du CSS-Regeln laden, die nur gelten, wenn JavaScript nicht verfügbar ist. Das ist nützlich, um JavaScript-abhängige Elemente auszublenden oder alternative Layouts zu aktivieren:

<head>
  <noscript>
    <style>
      /* Elemente ausblenden, die JS brauchen */
      .js-only {
        display: none;
      }

      /* Fallback-Elemente anzeigen */
      .nojs-fallback {
        display: block;
      }

      /* Interaktive Bereiche als statisch darstellen */
      .accordion-content {
        display: block;
        max-height: none;
      }
    </style>
  </noscript>
</head>

<body>
  <!-- Wird nur mit JS angezeigt -->
  <button class="js-only">Dark Mode</button>

  <!-- Wird nur ohne JS angezeigt -->
  <p class="nojs-fallback" style="display: none;">
    Theme-Wechsel benötigt JavaScript.
  </p>
</body>

Alternative Navigation ohne JavaScript

Wenn deine Navigation auf JavaScript angewiesen ist (z.B. ein Hamburger-Menü), kannst du mit <noscript> eine einfache Fallback-Navigation bereitstellen:

<nav class="js-only">
  <!-- JavaScript-basierte Navigation -->
  <button id="menu-toggle">Menü</button>
  <div id="mobile-menu" hidden>
    <a href="/">Home</a>
    <a href="/blog">Blog</a>
    <a href="/about">Über mich</a>
  </div>
</nav>

<noscript>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/about">Über mich</a></li>
    </ul>
  </nav>
</noscript>

Barrierefreiheit

<noscript> selbst hat keine besonderen Accessibility-Eigenschaften. Der Inhalt wird wie normales HTML behandelt, wenn er angezeigt wird. Achte darauf, dass der Fallback-Inhalt genauso zugänglich ist wie der JavaScript-basierte Inhalt:

  • Verwende semantisches HTML im <noscript>-Block (Überschriften, Listen, Links)
  • Stelle sicher, dass wichtige Inhalte auch ohne JavaScript erreichbar sind
  • Biete funktionierende Links als Alternative zu JavaScript-basierten Aktionen an
  • Wenn deine Seite ohne JavaScript gar nicht nutzbar ist, kommuniziere das klar im <noscript>-Hinweis und erkläre, wie JavaScript aktiviert werden kann

Häufige Fehler

noscript als einzige Fallback-Strategie: <noscript> greift nur, wenn JavaScript komplett deaktiviert ist. Wenn JavaScript aktiviert ist, aber ein Script-Fehler auftritt, hilft <noscript> nicht. Für robuste Webseiten solltest du Progressive Enhancement verwenden: die Grundfunktionen in HTML bauen und mit JavaScript erweitern, statt alles auf JavaScript aufzubauen.

Interaktive Elemente im noscript: Da <noscript> nur ohne JavaScript angezeigt wird, machen JavaScript-abhängige Elemente darin keinen Sinn. Buttons mit onclick-Handlern oder Formulare, die Ajax-Submits erwarten, funktionieren in diesem Kontext nicht. Verwende einfache Links und serverseitige Formulare.

noscript im head mit falschem Inhalt: Im <head> darf <noscript> nur <link>, <style> und <meta> enthalten. Wenn du dort Text oder <div>-Elemente einfügst, wird das HTML ungültig und das Verhalten ist browserspezifisch.

Veraltete Hinweise: Meldungen wie “Bitte aktivieren Sie JavaScript” ohne weitere Erklärung sind wenig hilfreich. Erkläre dem Nutzer, welche Funktionen betroffen sind, und biete wenn möglich eine Alternative an.

Browser-Kompatibilität

Das noscript-Element wird von allen Browsern seit den Anfängen von HTML unterstützt. Es ist eines der ältesten HTML-Elemente und funktioniert zuverlässig überall.

ClientUnterstützungHinweise
ChromeKomplett—
FirefoxKomplett—
SafariKomplett—
EdgeKomplett—
OperaKomplett—

Email-Kompatibilität

Da JavaScript in E-Mails grundsätzlich blockiert wird, verhält sich noscript in E-Mail-Clients unterschiedlich. Einige zeigen den Inhalt an (weil JS deaktiviert ist), andere entfernen das Element komplett.

ClientUnterstützungHinweise
Apple MailTeilweiseZeigt noscript-Inhalt an, da JavaScript blockiert ist.
GmailKeineEntfernt noscript-Elemente komplett aus dem HTML.
OutlookTeilweiseZeigt noscript-Inhalt teilweise an.
ThunderbirdTeilweiseZeigt noscript-Inhalt an, da JavaScript deaktiviert ist.
Yahoo MailKeineEntfernt noscript-Elemente.

Verwandte Elemente

<script> <meta>

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.