Element-Referenz
HTML 5 doctype - weil html einfach einfach ist.
nach oben

<summary>NEU

Bedeutung

Stellt rudimentäre Informationen für details bereit


Notation

<summary [Attribute]>[Elementinhalt]</summary>

Elternelemente

Kann gemäß der HTML5 Spezifikation innerhalb der folgenden Elemente vorkommen:

zum <details> Element<details>.


Elementinhalt

Darf ausschließlich Text enthalten .


Attribute

Das Element hat keine elementspezifischen Attribute.

Des Weiteren kann das Element folgende allgemeinen Attribute und Event-Handler enthalten:
zum HTML5 Attribut accesskeyaccesskey | zum HTML5 Attribut classclass | zum HTML5 Attribut contenteditablecontenteditable | zum HTML5 Attribut contextmenucontextmenu | zum HTML5 Attribut datadata | zum HTML5 Attribut dirdir | zum HTML5 Attribut draggabledraggable | zum HTML5 Attribut hiddenhidden | zum HTML5 Attribut idid | zum HTML5 Attribut itemitem | zum HTML5 Attribut itempropitemprop | zum HTML5 Attribut langlang | zum HTML5 Attribut spellcheckspellcheck | zum HTML5 Attribut stylestyle | zum HTML5 Attribut subjectsubject | zum HTML5 Attribut tabindextabindex | zum HTML5 Attribut titletitle

onabort | onblur | onchange | onclick | oncontextmenu | ondblclick | ondrag | ondragend | ondragenter | ondragleave | ondragover | ondragstart | ondrop | onfocus | onkeydown | onkeypress | onkeyup | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onmousewheel | onscroll


Standard-Style-Formateigenschaften

summary {
   display: block;
}


Beispiel
<article>
<details>
<summary>Verweise zum Artikel ...</summary>
<ul>
<li><a href="/verweise1.html" title="Verweise zu ...">...</a></li>
<li><a href="/verweise2.html" title="Verweise zu ...">...</a></li>
<li><a href="/verweise3.html" title="Verweise zu ...">...</a></li>
</ul>
</details>
<details>
<summary>Quellenangaben zum Artikel ...</summary>
<ul>
<li><a href="/quelle1.html" title="Quellenangaben zu ...">...</a></li>
<li><a href="/quelle2.html" title="Quellenangaben zu ...">...</a></li>
<li><a href="/quelle3.html" title="Quellenangaben zu ...">...</a></li>
</ul>
</details>
</article>

Erläuterung

Das Element <summary> definiert in Verbindung mit dem <details> Elements den noch nicht geöffneten Inhalt innerhalb des <details> Elements und ermöglicht es weitere Informationen zum Inhalt für den Anwender auf dessen Anforderung hin anzuzeigen. Somit ist es möglich ohne zu Hilfenahme von CSS oder Scripting-Sprachen dynamische Erweiterungen des Inhaltes direkt in HTML zu realisieren.

Wobei der Bereich des <details> Elements den sichtbaren Inhalt definiert und der anklickbare Inhalt innerhalb des <details> Elements mit dem <summary> Element definiert wird. Das <details> Element verhält sich dabei als toggleInformationBedeutung: toggleein Schalter, der eine von zwei Stellungen einnehmen kann-Element wobei der Inhalt innerhalb des Bereichs des <summary> Elements erst angezeigt wird, wenn sich das <details> Element im aufgeklappten Zustand befindet.


W3C Logo & WHATWG Logo Spezifikation

Tastaturkürzel