HTML5: Interaktive Elemente


HTML5 hat auch ein paar sogenannte interaktive Elemente, welche also ihr Verhalten oder ihre Erscheinung bei Interaktion durch das Publikum verändern.

Dabei geht es meist darum, daß eine Zusatzinformation oder eine Antwort bei Bedarf eingeblendet werden.

Elemente details und summary

Bearbeiten

Mit dem Element details werden Details oder Zusatzinformationen zu der Zusammenfassung oder Überschrift angegeben, die als Inhalt von summary notiert ist.

details ist fließender Inhalt und wird in der Praxis als Blockelement präsentiert, sollte also dort verwendet werden, wo Blockelemente erwartet werden.

Der Inhalt besteht als erstes aus dem Element summary, gefolgt von weiterem, fließenden Inhalt, welcher die Details zu der Zusammenfassung in summary repräsentiert. Ist summary nicht vorhanden, soll das Darstellungsprogramm stattdessen eine eigene Überschrift oder ein Symbol anzeigen. Die Sprache für diese Überschrift soll der Sprache entsprechen, welche an der Stelle für das Element notiert ist.

Ist bei details das Attribut open gesetzt, sind die Details gleich sichtbar. Der Wert von open ist leer oder 'open'.

Der Inhalt von summary ist Phraseninhalt oder aber eine Überschrift (Elemente h1 bis h6, je nach Kontext oder Struktur des umgebenden Inhaltes)

Beispiel:

<details>
<summary>Element <strong>details</strong></summary>
<p>Mit dem Element werden Details zu einer Zusammenfassung notiert.</p>
<p>Die Zusammenfassung steht im Element <strong>summary</strong>. 
   Dies ist das erste Element innerhalb von <strong>details</strong>.</p>
</details>

Element dialog

Bearbeiten

In den Anfängen von HTML5 war das Element dialog dafür vorgesehen, Dialoge auszuzeichnen. Diese semantische Bedeutung wurde wieder gestrichen. Geblieben ist ein Element, dessen Inhalt sichtbar ist oder auch nicht, eine semantische Bedeutung hat es nicht. Ob der Inhalt sichtbar ist oder nicht, hängt vom Attribut open ab. Ist es gesetzt, ist der Inhalt sichtbar, sonst nicht. Der Wert von open ist leer oder 'open'. Sofern das Darstellungsprogramm das Element nicht kennt, ist der Inhalt immer sichtbar, unabhängig von open. Ferner kann das Darstellungsprogramm dem Publikum eine Interaktion anbieten, um den Inhalt sichtbar oder unsichtbar zu machen, also umzuschalten.

Dialog kann notiert werden, wo fließender Inhalt notiert werden kann. In der Praxis ist es ein Blockelement, sollte also nur dort notiert werden, wo Blockelemente sinnvoll sind. Der Inhalt ist wiederum fließender Inhalt.

Beispiel:

<details open="">
<p>sichtbar</p>
</details>
<details>
<p>nicht sichtbar</p>
</details>