Get the MOST

Der HTML5-Standard bietet einige Tags, mit denen sich interaktive Elemente abbilden lassen. Ein sehr nützliches Beispiel sind die Tags <details> und <summary>: sie erlauben die Erstellung von aufklappbaren Bereichen. Früher konnten solche Funktionen zum dynamischen Öffnen und Schließen von Teilbereichen nur mit Hilfe von JavaScript umgesetzt werden. Diese Einschränkung ist somit entfallen.

In diesem Beitrag wird kurz gezeigt, wie sich die zwei Tags einsetzen lassen. Außerdem wird die Verwendung anhand eines praktischen Anwendungsfalls demonstriert.

Das <details>-Tag markiert einen Block semantisch dahingehend, dass er weitere Detailinformationen enthält. Das darin enthaltene <summary>-Tag gibt eine kurze Zusammenfassung der (in der Regel nicht unmittelbar sichtbaren) Details an.

1
2
3
4

<details>
    <summary>Zusammenfassung</summary>
    Hier kommt der Inhalt.
</details>

Dies sieht dann (ohne spezielles CSS) so aus:

Der Inhalt kann im Prinzip beliebiges HTML umfassen, zum Beispiel Tabellen oder auch weitere <details>-Blöcke.

Das <details>-Tag kann auch ein optionales open-Attribut enthalten, um anzugeben, dass der entsprechende Block per Standard geöffnet dargestellt werden soll.

1
2
3
4

<details open>
    <summary>Offener Bereich</summary>
    Dieser Inhalt ist direkt zu sehen.
</details>

Ein paar weiterführende Beispiele für die möglichen Optionen, zur Verwendung und zur Gestaltung finden sich in diesen Beiträgen:

• https://blog.teamtreehouse.com/use-details-summary-elements
• https://freefrontend.com/html-details-summary-css/

Besonders interessant ist der Vorteil, dass dieser Mechanismus komplett ohne JavaScript auskommt. Das macht ihn auch nutzbar für Bereiche, in denen die Verwendung eigener Skripte nicht möglich ist. Hierzu zählen auch Markdown-Dokumente. Wichtig ist nur, dass in HTML-Tags enthaltenes Markdown durch eine Leerzeile abgetrennt wird, damit es weiterhin interpretiert wird.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<details>
    <summary>

        ### Eine Überschrift

    </summary>
    <div>

        Test **mit Markdown**.

    </div>
</details>

Gerendert führt das zu folgender Ausgabe:

Wir haben dies sowohl in GitHub- als auch GitLab-Repositories erfolgreich im Einsatz.