Mit Details und Summary wurden ab HTML5 zwei leistungstarke Elemente zum Erstellen von aufklappbaren Ausgabebereichen ergänzt. Dieses Elementepaar arbeitet ähnlich wie Definitionslisten, wobei der Erklärungsteil ein oder ausgeblendet werden kann (per Klick auf Dreieck).
Wenn also viel Inhalt platzsparend oder auf Bedarf dargestellt werden soll, ist zu prüfen, ob diese Technik von Vorteil wäre.
<details> - Element
- Detail umschließt jedes Aufklappelement und enthält somit die Kurzangabe und die ausführliche Beschreibung.
<summary> - Element
- Dieses Element enthält den Inhalt, der gezeigt wird, wenn die Ausgabe zugeklappt ist (Zusammenfassung/Extrakt).
Beispiel für ein einfaches Klappelement
Dies ist der Teil, der immer eingeblendet wird...
| ... und dieser Teil wird sichtbar, wenn der Besucher auf das Dreieck klickt, welches dem Summary-Element vorangestellt ist. Hier können auch Bilder, Listen, Tabellen oder andere Elemente (sogar iframes mit anderen Dokumenten) enthalten sein. |