HTML details, summary, dialog, output – Textelemente

Zusätzliche Informationen, optionale Zusammenfassung summary

details verbirgt zusätzliche Informationen, die sich der Besucher mit einem Klick auf das summary-Tag anzeigen lassen kann.

HTML5 hat eine Reihe neuer Tags für den Text wie time, dialog und mark mitgebracht. Die Vorgängerversion von HTML5 – XHTML – hatte die kleinen HTML-Tags i und b ausgegrenzt und durch em und strong ersetzt. Mit HTML5 gehören i (für italic) und b (für bold) wieder zum Standard.

details und summary

HTML details umschließt Informationen, die der Benutzer einsehen oder verbergen kann – ein Klappmenü. Browser, die details unterstützen, zeigen ein Dreieck als Zeichen, dass weitere Informationen vorhanden sind.

Das summary-Tag ist der sichtbare Kopf – die Überschrift des details-Tag und zeigt bzw. verbirgt die Details.

Neue HTML5-Tags – details

Informationen, die der Benutzer aufklapen kann

HTML5 details und summary sind für kleine Zusammenfassungen gedacht, die der Benutzer anzeigen oder verbergen kann.

details hat ein individuelles HTML-Attribut: open gibt an, ob details geöffnet oder geschlossen an den Benutzer übertragen wird.

Mit dem open-Attribut weist details den Browser an, den Inhalt zunächst geöffnet zu zeigen und dem Benutzer eine Chance zu geben, das details-Tag zu schließen

details { display: block}
   …
<details>
    <summary>Neue HTML5-Tags – details</summary>
    <p>Informationen, die der Benutzer aufklapen kann</p>
    <p>section</p>
    <p>header</p>
    <p>footer</p>
</details>

details und summary werden von Chrome, Safari, Opera und Firefox unterstützt, aber nicht von IE. Browser, die details nicht unterstützen, zeigen den details-Bereich geöffnet an.

HTML mark

mark hebt einen Text hervor, ähnlich wie strong, aber gelb hinterlegt (highlighted) und auffallender.

Das mark-Tag wird von allen modernen Browsern unterstützt, selbst IE11 ist dabei.

HTML menu Tag (nicht mehr in HTML5)

menu sollte eine Reihe von Menüpunkten enthalten – ähnlich den kontext-sensitiven Menüs von Desktop-Anwendungen (wo kontext-sensitive Menüs mit der rechten Maustaste geöffnet werden). Sie sollen nicht wie die Punkte eines Navigationsmenüs (nav) auf andere Seiten führen, sondern den Benutzer Aufgaben durchführen.

Das Contextmenü wird angezeigt
<menu type="context" id="mymenu" onshow="menuShow()">
	<menuitem label="Neu laden" icon="circle-3.png"></menuitem>
	<menuitem label="Weitergeben" icon="circle-4.png"></menuitem>
	<menuitem label="Mitmachen" icon="circle-5.png"></menuitem>
</menu>

Das Menü könnte dann wie folgt aussehen:

Kontextmenü wie es aussehen könnte

Contextmenu wurde nur von Firefox unterstützt und ist nicht mehr im Standard enthalten.

dialog-Tag

Für viele Aufgaben öffnen Webseiten modale Fenster mit Hilfe von Javascript und CSS. dialog hingegen erzeugt ein Popup oder modales Fenster innerhalb des Browserfensters anstelle eines neuen Fensters. Diese Dialogfenster verbessert die Benutzeroberfläche für mobile Geräte / Touchscreens und bleibt ein Teil des DOM.

Nur Chrome, Firefox und Opera

Oktober
Gans und Wild

Browser, die dialog nicht unterstützen, zeigen den Inhalt von dialog immer an. Ob nun ein Browser dialog unterstützt oder nicht – dank einiger Zeilen Javascript öffnen alle Browser das dialog-Element. Chrome, Firefox in den neusten Versionen (61) und Opera (mit der Chrome-Rendering Machine) zeigen das Dialog-Element in einem schwarzen Rahmen als Overlay über dem folgenden Inhalt, ohne den folgenden Inhalt zu verdrängen. Ohne dialog-Unterstützung zeigen die Browser einfach den Inhalt und schieben den folgenden Inhalt nach unten.

Das Dialog-Fenster kann mit CSS aufbereitet werden.

<details> Neu ladenWeitergebenMitmachenSeite speichern unter …Hintergrundgrafik anzeigenAlles markierenSeitenquelltext anzeigenSeiteninformationen anzeigenElement untersuchen