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

<figure>NEU

Bedeutung

Gruppierung von Medieninhalten


Notation

<figure [Attribute]>[Elementinhalt]</figure>

Elternelemente

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

Liste der HTML 5 Block-ElementeBlock-Elemente und Liste der HTML 5 Inline-ElementeInline-Elemente.


Elementinhalt

Kann Text mit folgenden anderen HTML-Elementen enthalten:
Liste der HTML 5 Block-ElementeBlock-Elemente und Liste der HTML 5 Inline-ElementeInline-Elemente.


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

figure {
   display: block;
   margin-before: 1em;
   margin-after: 1em;
   margin-start: 40px;
   margin-end: 40px;
}


Beispiel
// <!-- Figure-Element mit alternativer Beschreibung -->
<figure>
// <!-- figure-Element -->
<img src="/HTML5_Badge_128.png" width="128" height="128" alt="HTML5 Logo">
// <!-- figcaption-Element zur alternativen Beschreibung -->
<figcaption><span>HTML5 Logo by <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a></span></figcaption>
</figure>
// <!-- Figure-Element zur Gruppierung -->
<figure>
// <!-- Überschrift -->
<h1>Das HTML5 figure-Element</h1>
// <!-- Text mit Bezug auf die Überschrift -->
<p>Das figure Element gruppiert die Textuellen Inhalte und definiert so eine <abbr title="der Bedeutung, dem Sinn entsprechend">semantische</abbr> Beziehung zwischen der Überschrift und dem Textuellen Inhalt.</p>
</figure>
// <!-- Figure-Element zur alternativen Beschreibung -->
<figure>
// <!-- Medieninhalt zur Wiedergabe -->
<audio src="video.ogg"></audio>
// <!-- Legend-Element mit Bezug auf den Medieninhalt -->
<legend>Video über die Einbindung von Medieninhalten in HTML5</legend>
</figure>

Erläuterung

Mit dem Element <figure> werden beispielsweise Anmerkungen, Codebeispiele, Abbildungen, Zeichnungen, Fotos und Videos logisch ausgezeichnet. Typischerweise wird es eingesetzt, um einen bestimmten Teil eines Dokumentes näher zu beschreiben. Diese Auszeichnung sollte gemäß Spezifikation auch für sich alleingestellt den ursprünglichen Informationsgehalt beibehalten.

Mit dem Element <figcaption> können zusätzlich Medieninhalte, die für bestimmte Nutzergruppen nicht lesbar sind, mit einer alternativen Beschreibung versehen werden.


W3C Logo & WHATWG Logo Spezifikation

Tastaturkürzel