Erkunden Sie das

-Tag in HTML: Verbessern Sie die Benutzererfahrung durch klappbare Inhalte

Was ist das <details>-Tag?

Das <details>-Tag ist ein HTML5-Element, mit dem du klappbare Inhalte auf deiner Webseite einfügen kannst. Es bietet eine einfache und effektive Möglichkeit, zusätzliche Informationen oder Details bereitzustellen, ohne die Benutzerfreundlichkeit zu beeinträchtigen.

Hauptmerkmale des <details>-Tags:

• Klappbare Inhalte: Das <details>-Tag ermöglicht es dir, Abschnitte mit Inhalten zu erstellen, die zunächst ausgeblendet sind. Benutzer können auf die Inhalte zugreifen, indem sie auf eine Zusammenfassung klicken oder tippen.
• Verbesserte Benutzererfahrung: Durch das Ausblenden nicht unbedingt benötigter Informationen kann das <details>-Tag die Lesbarkeit verbessern und eine sauberere Benutzeroberfläche schaffen.
• Unterstützung für verschiedene Geräte: Das <details>-Tag wird von allen modernen Webbrowsern unterstützt und funktioniert auf Desktops, Laptops, Tablets und Smartphones.

Wozu kann das <details>-Tag verwendet werden?

Das <details>-Tag bietet vielseitige Möglichkeiten, deine Inhalte zu organisieren und die Benutzererfahrung zu verbessern. Hier sind einige der häufigsten Anwendungsfälle:

Akkordeon-Stil-Einträge

Erstelle verschachtelte Abschnitte mit Informationen, die du ein- und ausblenden kannst. Dies ist ideal für FAQs, technische Spezifikationen oder zusätzliche Details, die du den Benutzern auf Anfrage zur Verfügung stellen möchtest.

Glossar oder Enzyklopädie

Zeige Definitionen oder Hintergrundinformationen zu bestimmten Begriffen oder Themen an. Du kannst ein <details>-Tag für jeden Begriff erstellen und eine ausführliche Beschreibung im <summary>-Element bereitstellen.

Hilfe oder Support-Abschnitte

Bietet zusätzliche Ressourcen oder Anleitungen innerhalb deiner Anwendung oder auf deiner Website an. Du kannst Dropdown-Menüs mit häufig gestellten Fragen, Dokumentationen oder Kontaktinformationen erstellen.

Produktdetails

Präsentiere wichtige Produktspezifikationen oder -informationen wie Beschreibungen, Funktionen und Rezensionen auf eine organisierte und platzsparende Weise.

Spoiler oder versteckte Inhalte

Verberge vertrauliche oder potenziell störende Informationen, bis die Benutzer sie ausdrücklich anfordern. Dies ist besonders nützlich für Inhalte wie Handlungswechsel, Quizantworten oder sensible Spoiler.

Syntax und Verwendung des <details>-Tags

Das <details>-Tag ist ein Container-Element, das dir die Möglichkeit gibt, versteckte Inhalte anzuzeigen, wenn ein Benutzer auf eine bestimmte Schaltfläche klickt. Es besteht aus zwei Hauptelementen:

<details>-Element

Das <details>-Element ist das übergeordnete Container-Element, das die anzuzeigenden Inhalte umschließt. Um anzugeben, dass ein Inhalt heruntergeklappt werden kann, füge das Attribut open hinzu:

<details open>
  ... (Inhalt, der beim Laden sichtbar ist) ...
</details>

<summary>-Element

Das <summary>-Element ist ein untergeordnetes Element von <details> und dient als Schaltfläche zum Ein- und Ausklappen des Inhalts. Es enthält den Text, der auf der Schaltfläche angezeigt wird:

<details>
  <summary>Klicke hier, um mehr zu erfahren</summary>
  ... (Inhalt, der versteckt ist) ...
</details>

Zusätzliche Attribute:

Neben dem open-Attribut für das <details>-Element gibt es noch ein paar weitere nützliche Attribute:

• disabled: Deaktiviert die Schaltfläche zum Ein- und Ausklappen.
• aria-expanded: Gibt an, ob der Inhalt erweitert ist (true) oder nicht (false). Dies ist hilfreich für assistierende Technologien wie Bildschirmleser.

Verwendung:

Du kannst das <details>-Tag in verschiedenen Kontexten verwenden, z. B.:

• Bereitstellung zusätzlicher Informationen, die nicht sofort auf der Seite sichtbar sein sollen.
• Reduzieren von Unordnung und Verbesserung der Übersichtlichkeit, indem bestimmte Inhalte versteckt werden.
• Erstellen von FAQs oder Glossaren, bei denen Benutzer nur die Abschnitte erweitern können, die sie interessieren.

Das

-Tag

Das <summary>-Tag ist ein wichtiges Element, das innerhalb des <details>-Tags verwendet wird. Es dient als Überschrift oder Zusammenfassung des klappbaren Inhaltselements. Wenn du auf das <summary>-Tag klickst, wird der Inhalt ein- oder ausgeblendet.

Inhalt des

-Tags

Der Inhalt des <summary>-Tags sollte prägnant und informativ sein. Er sollte eine kurze Zusammenfassung des Klapptextes bieten, um den Nutzern eine Vorstellung davon zu geben, was sie erwarten können. Du solltest außerdem darauf achten, dass der Text relevant und ansprechend ist.

Positionierung des

-Tags

Das <summary>-Tag sollte immer als erstes untergeordnetes Element des <details>-Tags stehen. Dadurch wird sichergestellt, dass es das erste Element ist, das den Nutzern angezeigt wird.

Ausblenden des

-Tags

Du kannst das <summary>-Tag mit dem Attribut hidden ausblenden. Dies kann nützlich sein, wenn du möchtest, dass der Klapptext geschlossen bleibt, bis der Nutzer darauf klickt.

<details>
  <summary hidden>Klappbarer Inhalt</summary>
  <p>Inhalt des Klapptextes.</p>
</details>

Vorteile des

-Tags

Die Verwendung des <summary>-Tags bietet mehrere Vorteile:

• Verbesserte Nutzerfreundlichkeit: Es ermöglicht den Nutzern, Inhalte einfach ein- und auszublenden, wodurch die Navigation erleichtert wird.
• Bessere Organisation: Es hilft bei der Organisation von Informationen, indem es Inhalte in logische Abschnitte unterteilt.
• Erhöhte Zugänglichkeit: Das <summary>-Tag bietet eine barrierefreie Möglichkeit für Nutzer, auf Inhalte zuzugreifen, ohne komplexe Steuerelemente verwenden zu müssen.

Anpassen des Erscheinungsbilds des

-Tags

Die Anpassung des Erscheinungsbilds des

details summary {
  color: #008000;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
}

details {
  background-color: #f5f5f5;
  border: 1px solid #000;
}

<details>
  <summary><span class="fa fa-plus"></span> Weitere Informationen</summary>
  <p>Lorem ipsum dolor sit amet...</p>
</details>

details summary {
  transition: all 0.5s ease-in-out;
}

<details tabindex="0">

<details aria-label="Zusätzliche Informationen">