Zusammenfassung

  • details und summary schaffen eine native Klappe, die der Browser auf Wunsch des Lesers öffnet und schließt.
  • Mit demselben name können mehrere Klappen eine exklusive Gruppe bilden: Eine geöffnete schließt die vorherige.

Eine lange Webseite gleicht schnell einer Schublade, die jemand über dem Tisch ausgeleert hat: Anleitungen, Zusatzoptionen und technische Einzelheiten liegen nebeneinander. Aufklappbare Abschnitte ließen sich schon mit Skript bauen. HTML gab ihnen schließlich ein serienmäßiges Scharnier. Ein summary steht am Anfang von details; der Browser kümmert sich um die Bewegung. Der Leser sieht das Schild und greift zur Klinke. Die Erfindung ist klein genug, um täglich nützlich zu sein.

Im ersten öffentlichen W3C-Entwurf der HTML-Auszeichnung vom März 2010 waren details und summary als neue Elemente gekennzeichnet. details sollte zusätzliche Informationen auf Anforderung zugänglich machen; das boolesche Attribut open bezeichnete die sichtbare Lage. Der Entwurf hält einen entscheidenden Gedanken fest: Der Inhalt bleibt im Dokument, während sein Aufklappen eine im HTML beschriebene Handlung wird.

Die W3C-Referenz von 2011 behielt diese Grammatik bei. Zuerst kommt die Beschriftung, open bestimmt die Sichtbarkeit. Die Bedeutung der Klappe steckt damit in der Dokumentstruktur und hängt nicht allein von einem Skript an anderer Stelle ab. Was hinter der Tür liegt und was auf ihrem Schild steht, entscheidet weiterhin der Autor. „Mehr“ spart Platz; „Kopiereinstellungen anzeigen“ spart dem Besucher ein Ratespiel.

Der heutige HTML-Standard beschreibt den Vorgang genau. Das erste summary-Kindelement ist die Legende; fehlt es, soll der Browser selbst eine bereitstellen. Ohne open bleibt nur die Legende sichtbar, mit open auch der Rest. Auf den Wunsch des Nutzers fügt der Browser das Attribut hinzu oder entfernt es. Ein toggle-Ereignis meldet die Zustandsänderung. Dokument, Anzeige und Handlung sind durch eine kurze Regel verbunden.

Selbst das kleine Dreieck neben der Beschriftung hat Darstellungsregeln: geschlossen sieht es anders aus als geöffnet. Sein unscheinbarer Dienst ist wertvoll. Es zeigt, wo man drücken kann und was danach passiert. Fortschrittsberichte, selten gebrauchte Einstellungen und lange Nachschlagewerke bekommen so ein vertrautes Werkzeug. Ein guter Lichtschalter verlangt schließlich auch keine Bedienungsanleitung.

Inzwischen können die Türen miteinander reden. Teilen mehrere details denselben name, schließt der Browser beim Öffnen eines Elements das zuvor offene Gruppenmitglied. Ein exklusives Akkordeon entsteht ohne selbstgebauten Türsteher aus JavaScript. Der Standard warnt allerdings selbst davor, dass dies Leser stören kann, die mehrere Abschnitte gleichzeitig sehen wollen. Die Seite wirkt aufgeräumter; der Mensch muss häufiger hin und her klicken. Ordnung hat einen Arbeitsaufwand.

Die kleine Tür erzählt von einer präzisen Arbeitsteilung. Der Autor ordnet die Räume, schreibt die Schilder und kann mit name eine Hausordnung festlegen. Der Browser betätigt die Scharniere. Der Leser entscheidet sich für den ersten Griff. Ein gutes Schild kündigt den Inhalt an, und eine gute Anordnung lässt Vergleiche zu. HTML liefert das Bauteil; redaktionelles Urteil macht daraus ein brauchbares Haus.