Startseite >Web >HTML-Referenz – Elemente und Attribute >hidden – verborgenes Element (Attribut)

hidden – verborgenes Element (Attribut)

<element hidden>

Ein Element, das gerade nicht relevant ist – ein noch nicht gezeigter Teil eines Formulars, der Inhalt eines inaktiven Tabs, eine Vorlage für eine Meldung. Der Browser stellt es nicht dar (display: none) und Screenreader lesen es nicht vor. Ein Skript zeigt es mit element.hidden = false an.

Werte

Ohne Wert (oder hidden="hidden") – ausgeblendet.
until-found – ausgeblendet, aber die Suche auf der Seite (Strg+F) oder ein Link auf einen Anker findet das Element und zeigt es an. Chrome seit 102, Firefox seit 148, Safari seit 26.2 teilweise (Stand: Oktober 2026).

Gilt für: alle Elemente
In JavaScript: element.hidden

Beispiele

Ein Feld, das erst nach dem Ankreuzen einer Checkbox erscheint:

<label><input type="checkbox" id="business"> Ich kaufe als Geschäftskunde</label>
<p id="ein-field" hidden><label for="ein">Kundennummer (Geschäftskunden)</label> <input id="ein" name="ein" inputmode="numeric"></p>
<script>
  document.getElementById('business').addEventListener('change', function () {
    document.getElementById('ein-field').hidden = !this.checked;
  });
</script>

Worauf Sie achten sollten

hidden ist nur der Standardstil [hidden] { display: none } – eine Regel wie .card { display: flex } überschreibt ihn und das Element wird sichtbar. Eine Absicherung: [hidden] { display: none !important; }.
Suchmaschinen halten ausgeblendeten Inhalt nicht für den Hauptinhalt – verwenden Sie es nicht für wichtigen Text.
aria-hidden="true" ist etwas anderes: Das Element bleibt sichtbar, nur Screenreader überspringen es (dekorative Symbole).

Browserunterstützung

Funktioniert in allen gängigen Browsern (web-features bewertet es nicht für Baseline). Ab Version: Chrome 10, Firefox 4, Safari 5.1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
details – Aufklappbereich
inert – inaktiver Seitenbereich (Attribut)
aria-* – Barrierefreiheitsattribute
template – Vorlage