<noscript>

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.

Steckbrief <noscript>

Kategorie: Meta & Scripting
Art: Block
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 04.02.2026

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

3 Beispiele

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>

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>

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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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.

Apple Mail

Teilweise

Zeigt noscript-Inhalt an, da JavaScript blockiert ist.
Gmail

Keine

Entfernt noscript-Elemente komplett aus dem HTML.
Outlook

Teilweise

Zeigt noscript-Inhalt teilweise an.
Thunderbird

Teilweise

Zeigt noscript-Inhalt an, da JavaScript deaktiviert ist.
Yahoo Mail

Keine

Entfernt noscript-Elemente.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da