HTML5: Bilder, Graphiken, Videos und Audios

Zurück zu Änderungen | Hoch zum Inhaltsverzeichnis | Vor zu Objekte und Rahmen

Bei (X)HTML kann nicht nur Text zur Anzeige gebracht werden. Für viele Menschen mit stark visuellen Präferenzen kann es eine Verständnishilfe sein, zusätzlich oder alternativ zum Text eine graphische Repräsentation eines Sinnzusammenhanges angeboten zu bekommen. Dann kann es auch für manche Menschen die Ergonomie oder das Wohlbefinden bei der Nutzung erhöhen, wenn die Information graphisch dekoriert wird. Entsprechend ist es für einige Menschen auch hilfreich, zum Beispiel eine hörbare Alternative zum Text verfügbar zu haben oder den Text mit zusätzlichen Audio-Dateien als Zusatzinformationen zu rezipieren. Auch Videos sind im Netz weit verbreitet. Andere Medientypen sind gleichfalls nicht ausgeschlossen.

Daher bietet (X)HTML einige Möglichkeiten, andere Medien nicht nur per Verweis zu referenzieren, sondern direkt in die Darstellung des aktuellen Dokumentes einzubinden, entweder alternativ zu anderen Inhalten oder zusätzlich dazu.

Dient insbesondere eine Graphik allerdings ausschließlich dem Layout der Seite oder dem Design, so ist dies nicht Aufgabe von (X)HTML, sondern wird nach der Erstellung des Dokumentes mit einer Stilvorlagensprache wie CSS ergänzt.

Besonders bei Pixelgraphik, Videos und Audios können die Dateien allerdings relativ groß werden, weswegen derart automatisch eingebettet angezeigte Inhalte direkten Einfluß darauf haben, wie lange es dauert, bis ein Dokument direkt und komplett angezeigt wird. Diese Ladezeit (und die damit verbundenen Kosten) hängt wiederum davon ab, was für eine Netzanbindung der Leser verwendet. Für Autoren gilt daher im Interesse der Nutzer das Gebot der Effizienz. Größere Dateien können zum Beispiel über Verweise und kleine Vorschaubilder mit dem Hauptinhalt verbunden werden.

Bei Audios und Videos insbesondere ist es ferner aus Lizenzgründen nicht ganz so einfach, ein Format zu finden, welches bei allen gängigen Darstellungsprogrammen interpretiert wird.

HTML5 bietet einige spezielle einbettende Elemente an, ferner auch einige Methoden, um alternativ verschiedene Formate oder Qualitäten für eine Ressource anbieten zu können. Die Auswahl der Alternativen bezieht sich allerdings immer auf Sachverhalte wie Auflösung oder Format, nicht auf die für die Programme meist nicht vorhandenen Informationen über Kosten und Übertragungsgeschwindigkeit. Von daher ist mit den Elementen von HTML5 nur ein relativ einfaches Angebot von Alternativen möglich. Leider wurde bei der Entwicklung von HTML5 das für Multimedia bereits sehr gut durchdachte SMIL ignoriert, im Grunde das Rad neu erfunden, allerdings eben nicht so ganz rund und weniger flexibel als das Original. Von daher müssen sich Autoren und Publikum mit diesem reduzierten Angebot abfinden, welches allerdings schon deutlich mehr bietet als frühere Versionen von (X)HTML.

Element img

Das Element dient dem Einbinden von graphischen Inhalten wie Bildern. Das Element gibt es in allen Versionen von (X)HTML. Es kann also als Phrasenelement im normalen Textfluß verwendet werden. Wenn es eine eigenständige Struktur darstellen soll, ist diese Struktur hingegen mit einem Blockelement zu realisieren, in welchem das Element img notiert wird. Typisch ist dies ein Element figure.

Erforderlich sind die Attribute src und alt. Optional sind die Attribute srcset, sizes, longdesc, width, height, crossorigin, referrerpolicy.

Bei einer verweissensitiven Graphik kommen die Attribute usemap und ismap noch hinzu, welche im Kapitel über verweissensitive Graphik erläutert werden und ohne diese Funktionalität ohne Belang sind.

Attribute src und alt

Mit dem erforderlichen Attribut src wird die Quelle (englisch source) des Bildes angegeben und zwar in Form einer URI/IRI entsprechend dem Wert von href des Elementes a, also auch je nach Bedarf relativ oder absolut. Die ausschließliche Verwendung eines Fragmentidentifizierers wird hingegen bei (X)HTML allein selten sinnvoll sein, weil (X)HTML selbst ja keine graphischen Inhalte bereitstellt.

Ob ein Fragmentidentifizierer zusammen mit einer URI/IRI sinnvoll ist, hängt vom referenzierten Format ab und ist dort definiert. Dies kann zum Beispiel bei der Referenzierung von SVG-Dateien hilfreich sein. Weil auch SVG-Fragmente im (X)HTML-Dokument notiert werden können, ist bei einer solchen Kombination die Referenzierung eines Fragmentidentifizierers möglich. Weil in SVG gleichfalls Fragmente oder Ansichten referenziert werden können, ist auch eine Kombination von URI/IRI mit anschließendem Fragmentidentifizierer plausibel.

Detailliertere Informationen zu URIs/IRIs sind beim Attribut href des Elementes a beschrieben und gelten entsprechend für src. Der referenzierte Inhalt ist ein Bild, welches nicht interaktiv ist und keine Skripte und keine Einteilung in mehrere Seiten enthält.

Zu beachten: Das Darstellungsprogramm wird das referenzierte Dokument fast immer ohne vorherige Nachfrage beim Nutzer von der angegebenen Quelle zu laden versuchen. Bei der Referenzierung einer externen Quelle mittels absoluter URI/IRI gelangt so Information ohne Wissen des Nutzers auf den externen Dienstrechner. Hinsichtlich des Datenschutzes und der Privatsphäre des Nutzers ist dies bedenklich, folglich also besser zu vermeiden. Ist trotzdem eine externe Referenzierung erwünscht, ist im Sinne des Datenschutzes zuvor besser ein von dem Sachverhalt nicht betroffenes Dokument vorzuschalten, in welchem der Nutzer über das potentielle Datenleck informiert wird, sich damit also einverstanden erklärt, wenn das betreffende Dokument mit der externen Bildreferenz aufgerufen wird. Sofern das überhaupt getan wird, sollte den Nutzern eine lokale Alternative bereitgestellt werden oder jedenfalls eine Variante des Projektes, welche auf derartige externen Quellen verzichtet, Nutzer also frei entscheiden können.
Üblich sind etwa derartige externe Bilder als sogenannte Zählpixel, Anmeldungs- oder Abstimmungsknöpfe, beliebt auch in Zusammenhang mit Anbietern wie Facebook oder Google, um Informationen über Personen zu sammeln und kommerziell zu nutzen.

Etwa bei Bewerbungen, Anhängen an elektronische Post und sonstigen Anwendungen, wo alles in einem Dokument vorhanden sein soll, bietet sich besonders die Verwendung des Pseudoprotokolls 'data' in src an. Im lokalen Dateisystem oder bei Verwendung von Netzdiensten ist es hingegen sinnvoller und effektiver, die einzubettenden Dokumente als eigenständige Dokumente zu belassen und einfach nur zu referenzieren. Bei kleinen Logos oder Piktogrammen, die untrennbar mit einem Dokument verbunden sein sollen, kann es sich allerdings auch lohnen, 'data' zu verwenden.

Mittels alt wird ein Alternativtext angegeben. Das ist so zu verstehen, daß dieser Text und das per src referenzierte Dokument jeweils alternativ zueinander verwendet werden können, je nach Präferenz des jeweiligen Lesers. Kann ein Leser etwa aufgrund von Sehschwäche oder Erblindung oder auch nur wegen Beschäftigung mit anderen Dingen keine graphische Repräsentation wahrnehmen, so ersetzt der Alternativtext das Bild, weswegen dieser entsprechend zu formulieren ist. Im normalen Textfluß ersetzt der Alternativtext das Bild also so, daß der Textfluß nicht unterbrochen wird. Der Wert ist also einfacher, kurzer Text. Für epische Erklärungen, die nicht in den Textfluß passen, wird dann zusätzlich das optionale Attribut longdesc notiert, siehe dort.

In diesem Sinne sind rein dekorative Bilder, die inhaltlich irrelevant sind, mit alt="" zu versehen, in der alternativen Darstellung werden die dann einfach weggelassen.

Jedenfalls wird generell als Alternative notiert, was das Bild in Kontext repräsentiert, nicht notwendig, was darauf im Detail dargestellt ist, wenn dies zum Verständnis im Textfluß belanglos ist.

Da der Alternativtext nur als Attributwert notiert werden kann und es mit img auch nicht möglich ist, verschiedene Formate alternativ zueinander anzubieten, kann das Konzept von img als sehr eingeschränkt betrachtet werden. Ein allgemeinerer Ansatz ist mit dem Element object möglich, welches stattdessen verwendet werden kann, besonders dann, wenn Alternativen angeboten werden sollen, die über die Möglichkeiten von img hinausgehen.

Eine weitere Möglichkeit stellt das in HTML5 neue Elemet picture dar, mit welchem Bilder in verschiedenen Formaten alternativ zur Auswahl angeboten werden können, allerdings auch keine weiteren Möglichkeiten von Alternative in einer anderen Präsentationsform.

Beispiel:

<p>Dem Gerücht nach glaubten viele Menschen zu früheren Zeiten, 
die Erde sei eine 
<img src="ErdeAlsScheibe.svg" alt="Scheibe" />.
Durch einfache Messungen und Experimente verbreitete sich dann jedoch die Überzeugung, 
die Erde sei eine <img src="ErdeAlsKugel.svg" alt="Kugel" />.
Aufgrund der Rotation der Erde um die eigene Achse ergaben genauere Messungen jedoch, 
daß es sich bei der Erde eher um einen 
<img src="ErdeAlsRotationsellipsoid.svg" alt="Rotationsellipsoid" /> 
handelt.
Bei sehr schneller Drehung würde man wieder nahe an die Idee einer Scheibe kommen, 
bei der man am Rande vermutlich wegfliegen würde.
Genauere Untersuchungen der Massenverteilung des Erdkörpers 
mit Satelliten haben eine weitere Verfeinerung
der Erkenntnis ergeben, demnach ist die Erde eher 
<img src="ErdeAlsKartoffel.svg" alt="kartoffelig" />,
also von unregelmäßiger Form.
</p>

Oft findet sich auch ein Szenario ähnlich dem folgenden:
Bertine hat einen altruistischen Tag und möchte die Menschheit mit ihren leckeren Rezepten von Gebäck beglücken, welches nicht nur Spuren von Nüssen enthält.
Damit das nicht zu trocken gerät – also die Seite, bezüglich des Gebäcks finden sich Hinweise im Rezept – ist die Idee, diese mit einem graphisch gestalteten Titel oder Kopfbereich auszustatten. Bertine kann da nun verschiedene Konzepte verfolgen.

Zum einen kann sie die Graphiken rein dekorativ zusätzlich zum Texttitel verwenden:

<h1><img src="Bilder/Nuesse.jpg" alt=""/>
Bertines Nußecke
<img src="Bilder/Florentiner.jpg" alt=""/></h1>

Als Logo oder Erkennungsmerkmal (neudenglisch auch: "Allein Stellung's Merk mal" ;o) kann sie aber auch gezielt eine Graphik verwenden wollen, die sie selbst in einer Nußeckenverkleidung zeigt, um sich auf dem Markt der Nußeckenrezeptanbieter zu etablieren oder den eigenen Marktanteil auszubauen, sozusagen die Konkurrenz auszustechen wie ein Plätzchen:

<h1><img src="Bilder/Nussbertine.jpg" alt="Willst Du Nußgebäck backen, gucke in"/>
Bertines Nußecke
<img src="Bilder/Nussbertine.jpg" alt="nach den köstlichsten Rezepten!"/></h1>

Dies kann den Vorteil haben, daß Menschen, die über Suchmaschinen mit entsprechenden Suchwörtern nach irgendwelchen Nußgebäckrezepten gucken, ziemlich weit oben in der Ergebnisliste auf Bertines Seite stoßen, während zum Beispiel ihr Konkurrent Horst lediglich 'Horsts Nüsse' angegeben hat und dazu eine aufwendige Graphik, welche er von einem Kumpel mit einem kommerziellen Graphikprogramm extra hat erstellen lassen, deren Inhalt aber von Suchmaschinen ignoriert wird, weswegen er gar nicht in der Ergebnisliste auftaucht und sich nur in sehr engem Kreis an seinen Nußgebäckrezepten erfreuen kann. (Der enge Freundeskreis besteht zudem aus neuen Freunden aus dem Netz, deren spezifische Präferenzen Horst erst später offenbar werden …)

Bertine als künstlerische Offenbarung der Nußgebäck-Bäckerei mag allerdings auch den kompletten Namen ihres Projektes mit Mandeln etc gebacken bekommen haben. Davon hat sie ein schönes Bild angefertigt, welches als Dokumenttitel dienen soll:

<h1><img src="Bilder/BertinesNussecken.jpg" alt="Bertines Nußecken"/></h1>

oder entsprechend

<h1><img src="Bilder/BertinesNussecken.jpg"
  alt="Willst Du Nußgebäck backen, gucke in
       Bertines Nußecke
       nach den köstlichsten Rezepten!"/></h1>

Oftmals will ein Autor Bilder nicht direkt in den normalen Textfluß integrieren. Als eigenständige Struktur ergibt es hingegen meist eher Sinn, auch den Alternativtext eigenständiger zu fassen:

<figure>
<img src="TimmUlrichsAugenlid.png" 
     alt="Portrait von Timm Ulrichs mit geschlossenem rechten Augenlid,
          auf welchem die Tätowierung 'The End' zu lesen ist." />
<ficgaption>Timm Ulrichs: 'The End'</figcaption>
</figute>

Redundant sind hingegen Hinweise auf Größe, Name oder sonstige technische Eigenschaften der referenzierten Datei, weil dies in der Regel keine Textalternative zum Bild darstellt, es sei denn, diese Informationen sind gerade zentraler Bestandteil der Bildinformation. Somit wäre für obiges Beispiel alt="Bild TimmUlrichsAugenlid.png, 600x400, 50kB" also keine sinnvolle Alternative, wenn nicht der Text "Bild TimmUlrichsAugenlid.png, 600x400, 50kB" zentraler Inhalt der graphischen Repräsentation des Bildes ist, was meistens nicht der Fall sein wird. Daß es sich um ein Bild handelt, ist übrigens bereits durch den Namen des Elementes img klar, sollte also nicht im Alternativtext auftreten.

Problematisch wird es bei dem Alternativtext, wenn eine Textbeschreibung eine in dem Zusammenhang ungewünschte Interpretation des Bildinhaltes implizieren würde. Dies wäre etwa bei einem Rohrschachtest der Fall oder vielleicht auch bei einem Kunstwerk, Gemälde oder einer Abbildung desselben, welches dem Leser zur eigenen Interpretation angeboten werden soll. In dem Falle kann es sinnvoll sein, als Textrepräsentation Angaben zum Titel des Bildes und zum Künstler zu machen, also Informationen, die es dem Leser ermöglichen, im Bedarfsfalle anderweitig verfügbare Informationen über das Dargestellte zu suchen.

Beispiel:

<figure>
<img src="MonaLisa.jpg" 
     alt="Gemälde 'Mona Lisa' von Leonardo da Vinci, 
          entstanden um 1503." />
</figure>

Dies kann auch allgemeiner dann ein hilfreiches Vorgehen sein, wenn das Bild zusätzlich zu vorhandenem Text angeboten wird, der das Bild ausführlich diskutiert und interpretiert – ohnehin vorhandener Text oder Offensichtliches sollte also nicht wiederholt werden. Wenn das ganze Dokument sich also mit der Mona Lisa beschäftigt und Angaben zum Künstler und Inhalt ohnehin bereits vorhanden sind, ist es zweifelsohne in Ordnung, nur alt="Gemälde 'Mona Lisa'" zu notieren. In diesem Falle handelt es sich wirklich um das Bild eines Gemäldes, nicht um das Gemälde selbst, daher ist der Begriff 'Gemälde' eine relevante Information.

In einer Bildergalerie über Schmetterlinge zum Beispiel ist es nicht unbedingt notwendig, implizit ohnehin eindeutige Zusammenhänge zu erläutern. Wenn es etwa im kompletten Dokument nur um Schmetterlinge geht, ist dem Leser ziemlich klar, was dargestellt ist, wenn nur notiert wird: alt="Kleiner Fuchs".
Ist allerdings eine spezifische Relation oder Aktion dargestellt, kann es nützlich sein, diese zu erwähnen: alt="saugender Kleiner Fuchs auf Sonnenhut bei Sonnenuntergang".
Beschäftigt sich die Seite hingegen auch mit anderen Tieren, kann es sinnvoller sein, alt="Kleiner Fuchs (Schmetterling)" zu notieren, wenn die Tierart nicht ohnehin aus dem umgebenden Textfluß eindeutig hervorgeht.

Eine weitere Variante ergibt sich etwa bei einem Künstler, welcher (abstrakte) eigene Bilder in einer Galerie ausstellt, welche die Werke ihm eindeutig zuordnet und nach Möglichkeit auch etwas begleitenden Text enthält. Er mag den Bildern keine Namen geben, die die Interpretation einschränken könnten, daher verwendet er ein ebenfalls abstraktes System zur Benennung, etwa mit Schaffensperiode, Datum und Variante. Der Begleittext der Galerie erläutert auch grob das Konzept der Titelfindung.

Der Titel des Bildes sei also zum Beispiel 'PRW 2009-07-13.V17':

<figure>
<img src="PRW/B2009-07-13V17.svg" 
     alt="PRW 2009-07-13.V17" />
<figcaption>Ein Werk aus der Schaffensperiode PRW: 2009-07-13.V17</figcaption>
</figure>

Als multimedialer Künstler wird er vermutlich ohnehin innerhalb der SVG-Datei eine ausführliche Textalternative notiert haben, die einem eigenständigen Kunstwerk gleichkommt und als Textvariante zusätzlich zum graphischen Werk verstanden werden kann. Wenn ein Format wie SVG also ohnehin eine eigene Möglichkeit für Textalternativen bietet und diese genutzt wird, ist eine Wiederholung auch redundant und ein minimalistischer Wert für alt kann ausreichen.

Ist die Beschriftung in figcaption bereits gut als Alternativtext geeignet, kann ferner das Attribut alt auch leer sein, eine Wiederholung der Textalternative darin ist also nicht notwendig oder gar sinnvoll. Das umgebende figure stellt bereits eindeutig einen Zusammenhang zwischen Bild und Beschriftung her.

Beispiel als Separator:

<p class="Stilvorlagenmenue">Verfügbare alternative Stilvorlagen:
<a href="?s=DagaSu">Daga su</a><img src="s.png" alt="," />
<a href="?s=urduFaT">urdu FaT</a><img src="s.png" alt="," />
<a href="?s=BB">Bunga Bunga</a><img src="s.png" alt="," />
<a href="?s=nix">kein CSS</a>
</p>

(Wie solch ein Stilvorlagenmenü zum Beispiel mit (X)HTML, CSS und PHP realisiert werden kann, wird hier allerdings nicht erläutert, dies ist nur die (X)HTML-Ausgabe, mit der die Auswahl erfolgt.)

Das Trennzeichen wird hier mit einer einfachen PNG-Datei realisiert oder eben alternativ mit einem Komma. Vertikale Striche |, Sterne * werden auch öfter verwendet. Leider hat (X)HTML kein eigenes Element für solch einen inzeiligen Separator, was beim Vorlesen solcher Strukturen suboptimal sein kann, daher sind kurze Satzzeichen für Separatoren eine auch für Zuhörer erträgliche Alternative. Noch schlimmer kann es allerdings für den Nutzer kommen, wenn es aufgrund fehlender Separatoren unklar wird, wo der eine Verweis aufhört und der andere beginnt.

Während es zwischen Bild und Wert von alt einen alternativen Bezug gibt, das eine also nur dargestellt wird, wenn das andere nicht dargestellt wird, kann das Bedürfnis aufkommen, zusätzlich eine Kurzfinformation bei Bedarf anzugeben.

Wie bei anderen Elementen auch, wird dafür das Attribut title und nicht alt verwendet:

<figure>
<img src="PRW/B2009-07-13V17.svg"
     alt="PRW 2009-07-13.V17"
     title="Nähere Informationen zu PRWs sind in einem früheren Abschnitt dieses Kapitels bereits behandelt." />
<figcaption>Ein Werk aus der Schaffensperiode PRW: 2009-07-13.V17</figcaption>
</figure>

Bei graphischer Darstellung wird die Information von title typisch dann dargestellt, wenn ein Zeigergerät über Bild oder Alternativtext fährt. Ohne Zeigergerät oder graphische Darstellung ist der Zugang zu dieser Information natürlich stärker vom Darstellungsprogramm abhängig.

Attribut srcset

Das in HTML5 neu eingeführte Attribut ermöglicht es, für verschiedene Größen und Auflösungen von Monitoren verschiedene Varianten des gleichen Bildes anzubieten.

Das hat besondere Relevanz für Pixelbilder, kann allerdings auch bei skalierbarer Vektorgraphik eine Anwendung haben, wenn bei einer kleinen Darstellung (kleiner Monitor, hohe Auflösung) Details im Bild die Erkennbarkeit des Motivs erschweren. Für solche Fälle, besonders bei abstrahierten Piktogrammen, kann es sinnvoll sein, für eine kleine Präsentation der Graphik ein vereinfachtes, minimalistisches Piktogramm anzubieten, bei einer großen Präsentation aber mehr Details zu spendieren, welche die Erkennbarkeit des eigentlichen Motivs nicht erschweren. Das Vorhandensein der Details bei großer Präsentation darf natürlich die inhaltliche Bedeutung nicht verändern.

Vorsicht und Vorbehalt bei der Verwendung: Allein die Größe des verfügbaren Anzeigebereiches oder der Auflösung des Monitors ist kein Hinweis darauf, in welcher Qualität oder Auflösung ein jeweiliger Betrachter ein Pixelbild haben möchte. Es wäre also diskriminierend, etwa bei kleinem Darstellungsbereich oder geringer Auflösung des Monitors dem jeweiligen Betrachter eine hochauflösende Variante eines Bildes zu verweigern, denn dieser kann ja per Rollfunktion und Skalierung selber Einfluß darauf nehmen, wie das Bild oder Ausschnitte davon präsentiert werden.

Der Wert ist eine Liste von Alternativen zum Wert von src. Die einzelnen Listenpunkte werden mit Kommata voneinander separiert.

Jeder Listenpunkt ist wie folgt aufgebaut: Optionale Leerzeichen, gefolgt von einer URI/IRI, welche nicht mit einem Komma beginnt oder endet. Der referenzierte Inhalt ist ein Bild, welches nicht interaktiv ist und keine Skripte und keine Einteilung in mehrere Seiten enthält. Daraufhin können Leerzeichen folgen, wonach maximal eines der folgenden Kürzel folgen darf:

Breitenkürzel

Bestehend aus einem Leerzeichen, einer positiven, ganzen Zahl, gefolgt von 'w'

Pixelkürzel

Bestehend aus einem Leerzeichen, einer positiven Zahl, gefolgt von 'x'

In der Liste darf derselbe Breitenkürzel oder Pixelkürzel nicht mehr als einmal notiert werden. In einer Liste haben alle Listenpunkte entweder einen Breitenkürzel oder einen Pixelkürzel.

Der Breitenkürzel gibt die Breite des mit dem Listenpunkt referenzierten Bildes in Pixeln an, sofern dieses eine solche Breite in Pixeln hat. Problematisch ist dies etwa bei SVGs, die eine Breite in anderen Einheiten notiert haben (em, ex, cm, mm), entsprechend für anderen Formate wie Postscript oder PDFs, die ebenfalls nicht notwendig Pixel-affin sind.

Der Pixelkürzel gibt eine sogenannte Pixeldichte an, die in der HTML5-Empfehlung allerdings nicht definiert ist. Ist keine Pixeldichte angegeben, so wird 1x angenommen.

Es darf anhand nicht normativer Begleittexte spekuliert werden, daß 1x der in CSS angegebenen Auflösung von 96 Pixeln auf 25.4 mm entspricht, 2x der doppelten Auflösung, also 192 Pixel auf 25.4 mm und so weiter.

Das Darstellungsprogramm wählt aus der Liste jeweils die Alternative aus, die am passendsten zu den Möglichkeiten des jeweils verwendeten Gerätes paßt. Nach welchen Kriterien das genau erfolgt, bleibt dem Programm überlassen. Autoren können dies allerdings über das Attribut sizes beeinflussen oder eine geeignete Auswahl vorschlagen.

Beispiel, Alternative, Auswahl anhand der Breite:

<figure>
<img src="PRW/B2009-07-13V17.png"
     srcset="PRW/B2009-07-13V17_1.5.png 450w,
PRW/B2009-07-13V17_2.png 600w,
PRW/B2009-07-13V17_3.png 900w" 
     alt="PRW 2009-07-13.V17"/>
<figcaption>Ein Werk aus der Schaffensperiode PRW: 2009-07-13.V17</figcaption>
</figure>

Das per src referenzierte Bild hat eine Breite von 300 Pixeln, dazu werden drei Bilder mit jeweils mehr Pixeln angeboten.

Beispiel, Alternative, Auswahl anhand der Pixeldichte:

<figure>
<img src="PRW/B2009-07-13V17.png"
     srcset="PRW/B2009-07-13V17_1.5.png 1.5x,
PRW/B2009-07-13V17_2.png 2x,
PRW/B2009-07-13V17_3.png 3x" 
     alt="PRW 2009-07-13.V17"/>
<figcaption>Ein Werk aus der Schaffensperiode PRW: 2009-07-13.V17</figcaption>
</figure>

Attribute width und height

Beim Aufbau der graphischen Repräsentation eines Dokumentes gehen viele Darstellungsprogramme so vor, daß sie das Dokument bereits darstellen, während sie einzubettende Dokumente noch laden. Im Zweifelsfalle kann das nachgeladene Dokument aber die Anordnung der Inhalte wieder ändern, wenn es eingebettet wird. Um diesen Effekt zu vermeiden, gibt es die beiden Attribute width (Breite) und height (Höhe), mit welchen Autoren angeben können, in welcher Größe das Bild dargestellt werden soll. Beim Seitenaufbau und gleichzeitigem Laden des Bildes kann so das Darstellungsprogramm erstmal eine Lücke lassen und dann das Bild dort nachträglich einfügen, sobald es verfügbar ist.

Obgleich die Attribute optional sind, ist dem Autor also zu empfehlen, die Attribute zu verwenden. Wird eines der Attribute nicht notiert, wird die im Bild angegebene Originalgröße verwendet. Ist im Bild selbst keine absolute Angabe vorhanden, kann das Verhalten undefiniert sein. Insbesondere im Zusammenspiel mit SVG kann es zu recht komplexen Regeln oder überraschenden Regelfindungen durch die Anbieter der Darstellungsprogramme kommen, wenn nur in der SVG-Datei prozentuale Größenangaben vorliegen. Was das bedeutet, ist in SVG recht präzise festgelegt. Da (X)HTML aber ein anderes Modell der Darstellung hat, ist es dort nicht unbedingt klar, was eine Höhe von 100% zu bedeuten haben mag, beziehungsweise dies kann von einer geeigneten Dimensionierung des Elternelementes mit CSS abhängen. Auch von daher ist eine eindeutige Angabe mittels width und height anzuraten, sofern im referenzierten Dokument keine Angaben sind, die in Bezug auf die Einbettung in ein (X)HTML-Dokument eine einfache und eindeutige Interpretation ermöglichen.

Der Wert ist jeweils eine ganze, nicht negative Zahl. HTML5 definiert leider nicht, was diese Zahl genau bedeuten soll. Weil dies aber in älteren Versionen als Angabe in Pixeln definiert ist, wird dies auch in HTML5 ähnlich gemeint sein, wobei sich dies hier auch auf die eher komplexeren Pseudo-Pixel von CSS 3 beziehen kann, die nicht den Gerätepixeln entsprechen müssen.

Bei einem Layout etwa mit CSS kann ein Autor natürlich in diversen Einheiten die Höhe und Breite festlegen. Dabei ist wiederum zu bedenken, daß ein CSS-Pseudo-Pixel nicht immer unbedingt einem Pixel auf dem Monitor entspricht.

Beispiele: Bei SVGs findet die Angabe besser im SVG-Dokument statt, sofern die Dimension dort in anderen Einheiten als Pixeln festgelegt ist:

<img src="PRW/B2009-07-13V17.svg" 
     alt="PRW 2009-07-13.V17"

SVG ist skalierbare Vektorgraphik, daher kann man es auch gut verwenden, um die Größe der Graphik an den verfügbaren Platz anzupassen. In der SVG-Datei sollten dann keine absoluten Größenangaben stehen, aber in der Regel eine viewBox. Sofern relevant, sollten dort allerdings Angaben gemacht werden, ob das Aspektverhältnis erhalten bleiben soll und wie der Ausschnitt angepaßt werden soll, wenn das Aspektverhältnis nicht zum notierten Anzeigebereich paßt.

<img src="Zitronenfalter.jpg" 
     alt="Zitronenfalter auf Zierdistel" 
     width="640" height="480" />

Dies ist die 'klassische' Variante für Pixelbilder. In der Regel sollte hier auch die Originalgröße notiert werden. Ist eine kleinere Darstellung erwünscht, ist es besser, die Datei einfach entsprechend verkleinert bereitzustellen. Eine stark vergrößerte Darstellung gegenüber dem Original macht hingegen irgendwann störende Artefakte sichtbar, die auch bei der speziellen Kompression des Formates JFIF/JPEG recht schnell als optisch unschön auffallen. Bei anderen, rein pixelbasierten Formaten wie PNG oder GIF werden bei einer Vergrößerung Artefakte im Allgemeinen sofort sichtbar, die sind für Vergrößerungen also als komplett ungeeignet einzustufen.

Bei Pixelgraphikformaten wie JFIF/JPEG, PNG oder GIF sind immer Größenangaben in der Datei vorhanden. Die Größe eines Bildes läßt sich mit den meisten Graphikprogrammen herausfinden.

Attribut sizes

Falls srcset notiert ist und alle Listenpunkte einen Breitenkürzel haben, kann auch das Attribut sizes notiert werden. Der Wert von sizes ist eine Liste mit Medienangaben, die einer einfachen Untermenge von Medienanfragen von CSS entsprechen.

Der Wert ist eine Liste von Angaben, welche mit Kommata und optionalen Leerzeichen vor und nach dem Komma voneinander separiert werden. Mindestens eine Angabe ist anzugeben.

Eine Angabe kann einfach eine CSS-Längenangabe wie '50ex', '20em', '100vmin' sein.

Eine weitere Möglichkeit ist eine Medienangabe gefolgt von einer CSS-Längenangabe wie '(min-width: 30rem) 20rem'. Prozentangabe sind bei der Länge allerdings nicht erlaubt.

Eine weitere Variante besteht darin, weitere CSS-Längenangabe folgen zu lassen: '(min-width: 30em) 20em, 40ex, 50vw'

Was ein Darstellungsprogramm genau mit der Kombination von srcset und sizes tun soll, ist nicht präzise in HTML5 festgelegt. Das Programm könnte die erste passende Bedingung aus der Liste von sizes wählen, daraufhin eine dazu passenden Datei aus srcset und src.

Die Angaben dienen nicht dem Layout oder der Dekoration. Sie bieten dem Darstellungsprogramm lediglich Hilfen an, um aus der Liste der Möglichkeiten die für die jeweilige Darstellungssituation passendste Datei auszuwählen.

Attribut longdesc

Manchmal kann es zum Verständnis wichtig und hilfreich sein, den genauen Bildinhalt zu beschreiben. Es kann auch der Bedarf bestehen, weitere Informationen über das Bild bereitzustellen, welche nur optional für besonders interessierte Lesergruppen relevant sind. Für andere Lesergruppen könnten diese Informationen etwa offensichtlich sein, wenn das Bild dargestellt wird. Teils kann auch angenommen werden, daß viele Leser bereits über entsprechende Informationen verfügen, andere Gruppen diese aber zusätzlich benötigen könnten. Da das Attribut alt nur einfachen, kurzen, unstrukturierten Text enthalten kann, eignet sich dies für epischere Ausführungen zu einer Graphik nicht und deckt auch nicht den Fall ab, daß auch Leser mit Anzeige des Bildes Bedarf an mehr (Text-)Information haben könnten.

In dem Falle wird als Wert des optionalen Attributes longdesc die URI/IRI eines Dokumentes notiert, in welchem diese längere Information bereitgestellt wird. Es kann allerdings auch mit einem Fragmentidentifizierer auf eine Textpassage verwiesen werden, die diese Funktion übernimmt und zum Beispiel allgemein lesbar auf derselben oder einer anderen Seite zu finden ist. In solchen Fällen gewährleistet das Attribut, daß der eindeutige Bezug zwischen Text und Graphik nicht verlorengeht, wenn etwa aufgrund der fehlenden Bilddarstellung die Anordnung der Inhalte anders ist oder es etwa beim Zuhören sonst schwierig würde, genau zu erkennen, wie die Bezüge im Dokument sind, wenn es nur vorgelesen wird.

Wie das Darstellungsprogramm Zugang zum referenzierten Dokument oder Fragment realisiert oder auch nur zur Kenntnis bringt, daß eine solche Verweisrelation zu weiteren Informationen vorliegt, ist nicht präzise festgelegt. Leider gibt es da auch bei einigen gängigen Darstellungsprogrammen Implementierungslücken. Bei weniger kundigen Lesern mag auch der Mechanismus nicht bekannt sein, wie solche Verweise aufgerufen werden. Diese Zugänglichkeitsprobleme treffen eher Nutzer von graphischen Darstellungsprogrammen als solche, die gar keine Bilder darstellen lassen. So oder so ist der Zugang zu dieser Information aber bei Bedarf für alle Nutzer gedacht, ergänzend zum referenzierten Bild und dem Alternativtext, nicht etwa nur alternativ zum referenzierten Bild.

Beispiele:

<img longdesc="PRW/InterpretationenVonTina.xhtml#B2009-07-13V17"
     src="PRW/B2009-07-13V17.svg" 
     alt="PRW 2009-07-13.V17" 
     width="800" height="800" />

Hier wird also auf ein Fragment in einem anderen Dokument verwiesen. Hat der Künstler etwas Relevantes direkt im SVG etwa im Element desc mit Fragmentidentifizierer 'info' notiert, kann er natürlich auch einfach schreiben:

<img longdesc="PRW/B2009-07-13V17.svg#info"
     src="PRW/B2009-07-13V17.svg"
     alt="PRW 2009-07-13.V17" 
     width="800" height="800" />

Damit ist dann bereits explizit im (X)HTML-Dokument klargestellt, daß die SVG-Datei eine relevante Beschreibung der graphischen Repräsentation enthält.

Der Bezug auf eine Passage mit Fragmentidentifizierer 'MonaLisa' im selben Dokument:

<img longdesc="#MonaLisa"
     src="MonaLisa.jpg" 
     alt="Gemälde 'Mona Lisa'" />

Attribut crossorigin

Mit dem Attribut kann angegeben werden, ob eine referenzierte Quelle als (technisch) vertrauenswürdig angesehen wird. Das kann sinnvoll sein, um Sicherheitsmaßnahmen zu ergreifen, wenn über das Element Daten in das aktuelle Dokument aus einer externen Quelle (andere Domäne) eingebettet werden. Ist das Attribut nicht gesetzt, kann das Darstellungsprogramm darüber keine Annahmen machen. 'anonymous' als Wert oder ein leerer Wert entspricht dem Verhalten, wenn das Attribut nicht gesetzt ist. Vertrauenswürdig sind dabei nur Quellen in derselben Domäne. Ist der Wert 'use-credentials', so wird die referenzierte Quelle als vertrauenswürdig eingestuft.

So kann etwa der Austausch von Keksen (englisch: cookies) und anderen Merkmalen zur Identifizierungen von Sitzungen oder Nutzern kontrolliert werden.

Attribut referrerpolicy

Das Attribut gibt an, welche Strategie bei der Angabe eines Bezuges verwendet werden soll. Ein Bezug (englisch: to refer - auf etwas Bezug nehmen), hier also eine Spur hinterlassen, woher das Publikum auf eine Adresse gekommen ist. Das zusätzliche 'r' hat historische Gründe. Konkret geht es darum, daß ein Darstellungsprogramm bei einem Abruf eines Dokumentes von einem Dienstprogramm angeben kann, von welchem Dokument der Aufruf stattfand, wo also die Ressource für den Zugriff referenziert wurde.

Der Wert ist ein Schlüsselwort:

"no-referrer"

keine Angabe

"" oder "no-referrer-when-downgrade"

Keine Angabe für als nicht vertrauenswürdig angesehene Quellen, komplette URI/IRI für die vertrauenswürdigen Quellen; Voreinstellung, wenn das Attribut nicht angegeben ist. Vertrauenswürdig sind Adressen derselben Domäne und bei HTTPS auch Sub-Domänen.

"same-origin"

Angabe nur bei selber Domäne

"origin"

Angabe beinhaltet lediglich die Domäne, nicht die komplette URI/IRI des Dokumentes.

"strict-origin"

Angabe beinhaltet lediglich die Domäne, nicht die komplette URI/IRI des Dokumentes, allerdings gibt es nur eine Angabe bei derselben Domäne oder einer zugehörigen Sub-Domäne, sofern HTTPs verwendet wird, sonst keine Angabe.

"origin-when-cross-origin"

Bei derselben Domäne wird die komplette URI/IRI angegeben, bei Sub-Domänen nur die Domäne, sonst nichts.

"strict-origin-when-cross-origin"

Entsprechend, aber nur Angaben für HTTPs, nicht für HTTP.

"unsafe-url"

Die komplette URI/IRI wird immer angegeben.

Element source

Mit dem Element source können Autoren Inhalte in verschiedenen Formaten alternativ anbieten. Das Element kann notiert werden in picture, audio, video. Innerhalb von picture werden alle Elemente source vor einem finalen img notiert.

Es handelt sich um ein inhaltsleeres Element.

Attribut src

Mit dem Attribut wird die URI/IRI einer Datei notiert, die eine der Möglichkeiten einer Liste von Alternativen darstellt, welche alle als Elemente source im selben Elternelement notiert sind. Die Ausführungen zu Referenzierungen für einzubettende Dateien für das gleichnamige Attribut von img gelten hier entsprechend.

Das Attribut ist genau dann zu notieren, wenn das source ein Kindelement von audio oder video ist.

Attribut srcset und sizes

Genau dann, wenn das Elternelement des source ein Element picture ist, ist das Attribut srcset zu notieren. Der Wert ist eine Auswahlliste von Quellen.

Sofern ein Listenpunkt das Breitenkürzel enthält, ist ebenfalls sizes zu notieren.

Sofern dem source als Geschwisterelement ein weiteres source oder img folgt, ist ebenfalls media oder type zu notieren.

Ansonsten gelten die Ausführungen zum gleichnamigen Attribut srcset von img sinngemäß.

Nur wenn das Elternelement des source ein Element picture ist, darf das Attribut sizes notiert werden. Entsprechend gelten die Ausführungen zum gleichnamigen Attribut sizes von img sinngemäß.

Attribut type

Mit dem Attribut kann der Medientyp der referenzierten Quelle angegeben werden.

Handelt es sich beim source um ein Kindelement von picture und das Attribut ist nicht angegeben, so wird ein Darstellungsprogramm versuchen, die angegebene Datei zu laden. Stellt sich dabei heraus, daß der Medientyp für das Programm ungeeignet ist, werden folgende Alternativen nicht weiter geprüft oder geladen. Daher ist die Angabe des Medientyps zu empfehlen.

Typische Medientypen für Graphiken oder Bilder: 'image/svg+xml', 'image/jpeg', 'image/png', 'image/gif'.

Bei Audio- und Videodateien kann ebenfalls der Parameter für Codecs (Kodierungen) verwendet werden, Beispiele:

FLAC Audio in Ogg:

<source src='audio.oga' type='audio/ogg; codecs=flac' />

Vorbis Audio in Ogg:

<source src='audio.ogg' type='audio/ogg; codecs=vorbis' />

Speex Audio in Ogg:

<source src='audio.spx' type='audio/ogg; codecs=speex' />

Theora Video und Vorbis Audio in Ogg:

<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"' />

Theora Video und Speex Audio in Ogg:

<source src='video.ogv' type='video/ogg; codecs="theora, speex"' />

Dirac Video und Vorbis Audio in Ogg:

<source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"' />

Video-Profil H.264, Level 3 mit 'Low-Complexity AAC' Audio innerhalb eines Archivs vom Typ MP4.

<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

Attribut media

Nur wenn das Elternelement des source ein Element picture ist, darf das Attribut media notiert werden.

Mit dem Attribut kann eine Liste von Medienanfragen notiert werden. Der Wert ist also eine Liste von Medienanfragen, wie diese in CSS definiert sind. Sie dazu auch das Buch zu CSS: CSS Medienanfragen

Beispiele: media="all and (orientation:portrait)" media="screen and (min-width: 40em) and (min-height: 30em)"

Sofern nicht auch type notiert ist und als Geschwisterelement um ein weiteres source oder img folgt, darf der Wert nicht leer oder 'all' sein.

Element picture

Das Element picture ist ein spezielles Element, um Bilder oder Graphiken in verschiedenen Varianten zur alternativen Auswahl anzubieten. Die alternativen Quellen sind als Hinweise und Hilfen für das Darstellungsprogramm zu verstehen, um eine für das jeweils verwendete Gerät gute Darstellung des Inhaltes zu erreichen. Alle in picture referenzierten Bilder oder Graphiken repräsentieren also den gleichen Inhalt.

Die Verwendung ist ähnlich er von img, wenn die Attribute srcset, sizes verwendet werden, geht aber noch darüber hinaus.

Das Element kann verwendet werden, wo eingebettete Elemente verwendet werden können. Es kann in dem Zusammenhang als Phrasenelement angesehen werden.

Der Inhalt besteht aus mindestens einem Element img, vor welchem als Geschwister Elemente source notiert werden können.

Ein Darstellungsprogramm wird typisch so vorgehen und die in den Elementen source und dem img angegebenen Informationen analysieren, um eine Alternative auszuwählen, diese erst dann und als einzige herunterzuladen und sie zu präsentieren.

Beispiele:

<picture>
  <source media="(min-width: 1000px)" srcset="Krokus_800.jpg" />
  <source media="(min-width: 800px)" srcset="Krokus_600.jpg" />
  <source media="(min-width: 600px)" srcset="Krokus_400.jpg" />
  <img alt="Krokus mit anfliegender Biene" src="Krokus_300.jpg" />
</picture>

Bei einem großen Darstellungsbereich wird hier ein Bild mit mehr Pixeln gewählt (Die Zahl im Dateinamen soll hier einmal für die Breite des Bildes in Pixeln stehen). Zu bedenken ist allerdings, daß auch die großen Bilder ungefähr auf die Dimensionen des mit img referenzierten Bildes herunterskaliert werden. Ist das Aspektverhältnis der verschiedenen Bilder unterschiedlich, können die Größen also variieren.

Besser ist es also immer, das Publikum selbst auswählen zu lassen, in welcher Größe sie die Darstellung haben möchten und entsprechend die Bilder dann mit eigener Auflösung zu präsentieren.

Per CSS kann allerdings mit entsprechenden Medienanfragen in einer dekorativen Stilvorlage festgelegt werden, wie groß das jeweilige Bild präsentiert werden soll.

<picture>
  <source srcset="Krokus.webp" type="image/webp" />
  <img alt="Krokus mit anfliegender Biene" src="Krokus.jpg" 
       width="600" height="600"/>
</picture>

Wird das relativ neue Pixelbild-Format WEBP nicht interpretiert, wird das JPEG verwendet.

<picture>
  <source media="(max-width: 500px)" srcset="banner_k.png, banner_k2.png 2x" />
  <img src="banner.png" srcset="banner2.png 2x" alt="Meine Bienen: Bruno Brummer" />
</picture>

Bei kleinen Darstellungsbereichen wird aus den ersten beiden Bildern ausgewählt, bei einem großen Darstellungbereich mit einer Breite von über 500 Pixel wird aus den zweiten beiden Bildern ausgewählt. Die letzteren beiden Bilder könnten folglich einen anderen Ausschnitt zeigen, etwa ein anderes Aspektverhältnis aufweisen, um bei gleicher Höhe die Breite des Anzeigebereiches besser auszufüllen.

Element audio

Das Element wird dazu verwendet, um Audios einzubetten, also Dateien mit Geräuschen.

Das Element ist ein transparentes Element, kann also enthalten, was das Elternelement enthält, kann entsprechend notiert werden, wo fließender Inhalt erlaubt ist. Als spezieller Inhalt können darin auch zusätzlich die Elemente source und track notiert werden. Dabei sind als erster Inhalt alle Elemente source zu notieren, danach alle Elemente track, danach sonstiger Inhalt. Dieser sonstige Inhalt wird allerdings nur von Programmen präsentiert, die das Element selbst nicht interpretieren, weil sie es nicht kennen, also unabhängig von den Möglichkeiten, die einzubettenden Formate zur Präsentation zu bringen. Daher eignet sich der Elementinhalt nicht, um einen Alternativtext bereitzustellen. Typisch als Inhalt ist also Text, welcher darauf hinweist, daß die Funktionalität der Audio-Wiedergabe nicht gegeben ist, dazu vermutlich ein Verweis auf die Audio-Datei mit einem Element a oder auch ein object mit derselben Funktionalität.

Alternativtext ist außerhalb des Elementes anzugeben.

Das Inhaltsmodell ist davon abhängig, ob ein Attribut src notiert ist oder nicht. Ist src notiert, ist als Inhalt kein source erlaubt.

Attribut src

Mit dem Attribut wird die einzubettenden Audio-Datei referenziert, es handelt sich beim Wert als um eine URI/IRI einer Datei mit einem Audio-Format.

Beispiel:

<figure>
<figcaption>
Gräusch oder Tonfolge
</figcaption>
<audio controls="" src="noise.ogg">
       Das Darstellungsprogramm kann dieses Tondokument nicht wiedergeben.<br />
       Es enthält eine schräge Tonfolge. 
       Alternativer Aufruf:
       <a href="noise.ogg"><abbr>OGG</abbr> schräge Tonfolge</a>
       abrufen.
</audio>
</figure>

Attribut controls

Ist das Attribut notiert, so werden vom Darstellungsprogramm Kontrollelemente angeboten, um das Tondokument zu starten, zu stoppen, zu pausieren, eine Stelle darin anzuspringen oder auch die Lautstärke zu ändern. Sofern es zusätzliche Spuren mit Text, Beschriftung gibt, sollte auch eine Kontrolle angeboten werden, um diese ein- oder auszublenden, gegebenenfalls auch zwischen verschiedenen vorhandenen Sprachversionen auszuwählen. Weitere Kontrollelemente sind ebenfalls möglich, eventuell um zwischen verschiedenen angebotenen Formaten zu wechseln.

Es ist zu empfehlen, das Attribut zu setzen, damit das Publikum die volle Kontrolle über das Abspielen des Tondokumentes hat.

Der Wert ist entweder leer ("") oder 'controls'.

Beispiel:

<figure>
<figcaption>
Gräusch oder Tonfolge
</figcaption>
<audio controls="" src="noise.mp3">
       Das Darstellungsprogramm kann dieses Tondokument nicht wiedergeben.<br />
       Es enthält eine schräge Tonfolge. 
       Alternativer Aufruf:
       <a href="noise.mp3"><abbr>MP3</abbr> schräge Tonfolge</a>
       abrufen.
</audio>
</figure>

Attribut loop

Ist das Attribut notiert, wird die Wiedergabe dauernd wiederholt. Der Wert ist entweder leer ("") oder 'loop'.

Beispiel:

<figure>
<figcaption>
Gräusch oder Tonfolge
</figcaption>
<audio controls="" loop="" src="noise.ogg">
       Das Darstellungsprogramm kann dieses Tondokument nicht wiedergeben.<br />
       Es enthält eine schräge Tonfolge. 
       Alternativer Aufruf:
       <a href="noise.ogg"><abbr>OGG</abbr> schräge Tonfolge</a>
       abrufen.
</audio>
</figure>

Attribut autoplay

Ist das Attribut notiert, wird die Wiedergabe automatisch gestartet. Der Wert ist entweder leer ("") oder 'autoplay'.

Weil Teile des Publikums vermutlich einen anderen Geschmack hinsichtlich einer Geräuschkulisse haben, ist eher zu empfehlen, auf das Attribut zu verzichten und stattdessen mit controls dem Publikum die Entscheidung über die Beschallung zu überlassen. Sinnvoll kann es hingegen sein, wenn das Dokument nur die Audio-Datei einbettet, auf die Datei mit dem Hinweis verwiesen wurde, daß beim Aufruf eine Audio-Datei abgespielt wird.

Beispiel:

<figure>
<figcaption>
Gräusch oder Tonfolge
</figcaption>
<audio controls="" loop="" autoplay="" src="noise.ogg">
       Das Darstellungsprogramm kann dieses Tondokument nicht wiedergeben.<br />
       Es enthält eine schräge Tonfolge. 
       Alternativer Aufruf:
       <a href="noise.ogg"><abbr>OGG</abbr> schräge Tonfolge</a>
       abrufen.
</audio>
</figure>

Attribut muted

Ist das Attribut notiert, wird die Wiedergabe stumm geschaltet, das Publikum hört also nichts von der Audio-Datei. Der Wert ist entweder leer ("") oder 'muted'.

Um dem Publikum zu ermöglichen, die Audio-Datei hörbar zu machen, ist es sinnvoll, dies Attribut zusammen mit controls zu notieren.

Beispiel:

<figure>
<figcaption>
Gräusch oder Tonfolge
</figcaption>
<audio controls="" loop="" autoplay="" muted="" src="noise.ogg">
       Das Darstellungsprogramm kann dieses Tondokument nicht wiedergeben.<br />
       Es enthält eine schräge Tonfolge. 
       Alternativer Aufruf:
       <a href="noise.ogg"><abbr>OGG</abbr> schräge Tonfolge</a>
       abrufen.
</audio>
</figure>

Attribut preload

Mit dem Attribut kann dem Darstellungsprogramm ein Hinweis gegeben werden, ob Teile der Audio-Datei vorab geladen werden sollen.

Mögliche Werte:

none

Die Datei sollte erst heruntergeladen werden, wenn das Publikum die Wiedergabe startet. Das ist sinnvoll, um unnötiges Herunterladen zu vermeiden, besonders wenn es unwahrscheinlich erscheint, daß das Publikum die Datei aufruft.

metadata

Es erscheint sinnvoll, wenigstens die Metadaten der Datei vorab herunterzuladen, für den Fall, daß das Publikum die Datei aufruft. Erst dann ist es sinnvoll, sie komplett zu laden.

auto

Das Darstellungsprogramm soll nach den Bedürfnissen des Publikums selbst abschätzen, ob es sinnvoll ist, die Datei vorab zu laden. Dies wird auch angenommen, wenn das Attribut nicht gesetzt ist.

Beispiel:

<figure>
<figcaption>
Gräusch oder Tonfolge
</figcaption>
<audio controls="" preload="none" src="noise.ogg">
       Das Darstellungsprogramm kann dieses Tondokument nicht wiedergeben.<br />
       Es enthält eine schräge Tonfolge. 
       Alternativer Aufruf:
       <a href="noise.ogg"><abbr>OGG</abbr> schräge Tonfolge</a>
       abrufen.
</audio>
</figure>

Attribut crossorigin

Mit dem Attribut kann angegeben werden, ob eine referenzierte Quelle als (technisch) vertrauenswürdig angesehen wird. Das Attribut ist bereits oben für img genauer beschrieben, siehe dort.

Beispiel: Variante mit source

<figure>
<figcaption>
<abbr>OGG</abbr>, <abbr>MP3</abbr> und <abbr>MP4</abbr> zur Auswahl:
</figcaption>
<audio controls="" loop="">
    <source src="noise2a.ogg" type="audio/ogg" />
    <source src="noise2a.mp3" type="audio/mp3" />
    <source src="noise2a.m4a" type="audio/mp4" />
       Das Darstellungsprogramm kann dieses Tondokument nicht wiedergeben.<br />
       Es enthält eine schräge Tonfolge. 
       Alternativer Aufruf:<br />
       <a href="noise2a.ogg"><abbr>OGG</abbr> schräge Tonfolge</a><br />
       <a href="noise2a.mp3"><abbr>MP3</abbr> schräge Tonfolge</a><br />
       <a href="noise2a.m4a"><abbr>MP4</abbr> schräge Tonfolge</a>
       abrufen.
</audio>
</figure>

Element video

Das Element wird dazu verwendet, um Videos einzubetten, also Dateien mit bewegten Bildern und zumeist auch Geräuschen.

Das Element ist ein transparentes Element, kann also enthalten, was das Elternelement enthält, kann entsprechend notiert werden, wo fließender Inhalt erlaubt ist. Als spezieller Inhalt können darin auch zusätzlich die Elemente source und track notiert werden. Dabei sind als erster Inhalt alle Elemente source zu notieren, danach alle Elemente track, danach sonstiger Inhalt. Dieser sonstige Inhalt wird allerdings nur von Programmen präsentiert, die das Element selbst nicht interpretieren, weil sie es nicht kennen, also unabhängig von den Möglichkeiten, die einzubettenden Formate zur Präsentation zu bringen. Daher eignet sich der Elementinhalt nicht, um einen Alternativtext bereitzustellen. Typisch als Inhalt ist also Text, welcher darauf hinweist, daß die Funktionalität der Wiedergabe nicht gegeben ist, dazu vermutlich ein Verweis auf die Video-Datei mit einem Element a oder auch ein object mit derselben Funktionalität.

Alternativtext ist außerhalb des Elementes anzugeben.

Das Inhaltsmodell ist davon abhängig, ob ein Attribut src notiert ist oder nicht. Ist src notiert, ist als Inhalt kein source erlaubt.

Attribute width und height

width gibt die Breite des Anzeigebereiches für das Video in Pixeln an. height gibt die Höhe des Anzeigebereiches für das Video in Pixeln an. Der Wert ist jeweils eine nicht negative ganze Zahl.

Beispiel siehe nächster Abschnitt.

Attribut src

Mit dem Attribut wird die einzubettende Video-Datei referenziert, es handelt sich beim Wert somit um eine URI/IRI einer Datei mit einem Video-Format.

Beispiel:

<figure>
<figcaption>
Plasmalampe
</figcaption>
<video controls="" src="plasmalampe.ogg" 
       width="600" height="400">
       Das Darstellungsprogramm kann dieses Video einer Plasmalampe nicht wiedergeben.<br />
       Alternativer Aufruf:
       <a href="plasmalampe.ogg"><abbr>OGG</abbr> Plasmalampe</a>
       abrufen.
</video>
</figure>

Attribut controls

Ist das Attribut notiert, so werden vom Darstellungsprogramm Kontrollelemente angeboten, um das Video zu starten, zu stoppen, zu pausieren, eine Stelle darin anzuspringen oder auch die Lautstärke zu ändern, die Darstellung in einem eigenen Bereich in anderer Größe zu ermöglichen, etwa auf dem gesamten Bildschirm. Sofern es zusätzliche Spuren mit Text, Beschriftung gibt, sollte auch eine Kontrolle angeboten werden, um diese ein- oder auszublenden, gegebenenfalls auch zwischen verschiedenen vorhandenen Sprachversionen auszuwählen. Weitere Kontrollelemente sind ebenfalls möglich, eventuell um zwischen verschiedenen angebotenen Formaten zu wechseln.

Es ist zu empfehlen, das Attribut zu setzen, damit das Publikum die volle Kontrolle über das Abspielen des Videos hat.

Der Wert ist entweder leer ("") oder 'controls'.

Beispiel:

<figure>
<figcaption>
Plasmalampe
</figcaption>
<video controls="" src="plasmalampe.avi" 
       width="600" height="400">
       Das Darstellungsprogramm kann dieses Video einer Plasmalampe nicht wiedergeben.<br />
       Alternativer Aufruf:
       <a href="plasmalampe.avi"><abbr>AVI</abbr> Plasmalampe</a>
       abrufen.
</audio>
</figure>

Attribut loop

Ist das Attribut notiert, wird die Wiedergabe dauernd wiederholt. Der Wert ist entweder leer ("") oder 'loop'.

Beispiel:

<figure>
<figcaption>
Plasmalampe
</figcaption>
<video controls="" loop="" src="plasmalampe.ogg" 
       width="600" height="400">
       Das Darstellungsprogramm kann dieses Video einer Plasmalampe nicht wiedergeben.<br />
       Alternativer Aufruf:
       <a href="plasmalampe.ogg"><abbr>OGG</abbr> Plasmalampe</a>
       abrufen.
</video>
</figure>

Attribut autoplay

Ist das Attribut notiert, wird die Wiedergabe automatisch gestartet. Der Wert ist entweder leer ("") oder 'autoplay'.

Weil Teile des Publikums vermutlich einen anderen Geschmack hinsichtlich einer Geräuschkulisse haben, das Video zudem nach dem Laden der Seite nicht immer gleich im sichtbaren Bereich ist, ist eher zu empfehlen, auf das Attribut zu verzichten und stattdessen mit controls dem Publikum die Entscheidung über die Beschallung zu überlassen. Sinnvoll kann es hingegen sein, wenn das Dokument nur die Video-Datei einbettet, auf die Datei mit dem Hinweis verwiesen wurde, daß beim Aufruf eine Video-Datei gleich abgespielt wird.

Beispiel:

<figure>
<figcaption>
Plasmalampe
</figcaption>
<video controls="" loop="" autoplay="" 
       src="plasmalampe.ogg" 
       width="600" height="400">
       Das Darstellungsprogramm kann dieses Video einer Plasmalampe nicht wiedergeben.<br />
       Alternativer Aufruf:
       <a href="plasmalampe.ogg"><abbr>OGG</abbr> Plasmalampe</a>
       abrufen.
</video>
</figure>

Attribut muted

Ist das Attribut notiert, wird die Wiedergabe stumm geschaltet, das Publikum hört also nichts von dem Geräuschkanal des Videos, welches trotzdem abgespielt wird. Der Wert ist entweder leer ("") oder 'muted'.

Um dem Publikum zu ermöglichen, den Audio-Kanal hörbar zu machen, ist es sinnvoll, dies Attribut zusammen mit controls zu notieren.

Beispiel (bei der Plasmalampe gibt es ohnehin eher nur Hintergrundgeräusche, daher ist der Audio-Kanal ohnehin nicht so wichtig):

<figure>
<figcaption>
Plasmalampe
</figcaption>
<video controls="" loop="" autoplay="" 
       muted="" src="plasmalampe.ogg" 
       width="600" height="400">
       Das Darstellungsprogramm kann dieses Video einer Plasmalampe nicht wiedergeben.<br />
       Alternativer Aufruf:
       <a href="plasmalampe.ogg"><abbr>OGG</abbr> Plasmalampe</a>
       abrufen.
</video>
</figure>

Attribut preload

Mit dem Attribut kann dem Darstellungsprogramm ein Hinweis gegeben werden, ob Teile der Video-Datei vorab geladen werden sollen.

Mögliche Werte:

none

Die Datei sollte erst heruntergeladen werden, wenn das Publikum die Wiedergabe startet. Das ist sinnvoll, um unnötiges Herunterladen zu vermeiden, besonders wenn es unwahrscheinlich erscheint, daß das Publikum die Datei aufruft.

metadata

Es erscheint sinnvoll, wenigstens die Metadaten der Datei vorab herunterzuladen, für den Fall, daß das Publikum die Datei aufruft. Erst dann ist es sinnvoll, sie komplett zu laden.

auto

Das Darstellungsprogramm soll nach den Bedürfnissen des Publikums selbst abschätzen, ob es sinnvoll ist, die Datei vorab zu laden. Dies wird auch angenommen, wenn das Attribut nicht gesetzt ist.

Beispiel:

<figure>
<figcaption>
Plasmalampe
</figcaption>
<video controls="" loop="" autoplay="" 
       preload="metadata" src="plasmalampe.ogg" 
       width="600" height="400">
       Das Darstellungsprogramm kann dieses Video einer Plasmalampe nicht wiedergeben.<br />
       Alternativer Aufruf:
       <a href="plasmalampe.ogg"><abbr>OGG</abbr> Plasmalampe</a>
       abrufen.
</video>
</figure>

Attribut poster

Mit dem Attribut kann ein Vorschaubild referenziert werden, welches präsentiert wird, wenn das Video nicht abgespielt wird. Der Wert ist folglich eine URI/IRI einer Bild-Datei, die typisch ein Bild aus dem Video repräsentiert, vielleicht aber auch eine Art Titelbild oder Titelgraphik darstellt.

Die Angabe zu Höhe und Breite gelten auch für dieses Vorschaubild oder Poster, von daher ist es sinnvoll, die Größe, insbesondere das Aspektverhältnis entsprechend passend zu wählen.

Beispiel:

<figure>
<figcaption>
Jambo Jambo
</figcaption>
<video controls="" preload="metadata" 
       src="jambojambo.ogg" poster="jambojambo.svg" 
       width="600" height="400">
       Das Darstellungsprogramm kann dieses Video nicht wiedergeben.<br />
       Alternativer Aufruf:
       <a href="jambojambo.ogg"><abbr>OGG</abbr>, Film: Jambo Jambo</a>
</video>
</figure>

Attribut crossorigin

Mit dem Attribut kann angegeben werden, ob eine referenzierte Quelle als (technisch) vertrauenswürdig angesehen wird. Das Attribut ist bereits oben für img genauer beschrieben, siehe dort.

Beispiel: Variante mit source

<figure>
<figcaption>
Jambo Jambo
</figcaption>
<video controls="" preload="metadata"
       poster="jambojambo.svg" 
       width="600" height="400">
    <source src="jambojambo.ogg" type="video/ogg" />
    <source src="jambojambo.mp4" type="video/mp4" />
    <source src="jambojambo.avi" type="video/x-msvideo" />
    <source src="jambojambo.3gp" type="video/3gpp" />
       Das Darstellungsprogramm kann dieses Video nicht wiedergeben.<br />
       Alternativer Aufruf des Films Jambo Jambo in verschiedenen Formaten:<br />
       <a href="jambojambo.ogg"><abbr>OGG</abbr></a><br />
       <a href="jambojambo.mp4"><abbr>MP4</abbr></a><br />
       <a href="jambojambo.avi"><abbr>AVI</abbr></a><br />
       <a href="jambojambo.3gp"><abbr>3GP</abbr></a>
</video>
</figure>

Element track

Mit dem Element können Audios und Videos mit Texten ergänzt werden, dies können zum Beispiel synchron eingeblendete Untertitel in verschiedenen Sprachen sein. Solche Texte können natürlich auch direkt in der Audio- oder Videodatei stecken, sofern das Format dies zuläßt, das ist dann eine ungleich stabilere Lösung, wenn das Publikum das Audio oder Video auf dem eigenen Rechner abspeichern möchten und mit einem unabhängigen Programm zur Präsentation bringen. Das Element ist somit eher ein Notbehelf, wenn diese Lösung gar nicht umsetzbar sein sollte.

Das Element ist inhaltsleer und kann innerhalb von audio und video notiert werden, nach eventuell ebenfalls dort notierten Elementen source und vor sonstigem Inhalt.

Attribut src

Mit dem Attribut wird eine entsprechende Textdatei referenziert, welche die Textinformation zur Audio- oder Videodatei enthält. Die Ausführungen zu src für img, audio, video und insbesondere source gelten sinngemäß.

Attribut srclang

Mit dem Attribut wird die Sprache des referenzierten Textes angegeben. Der Wert ist ein Sprachkürzel analog zu den Werten von xml:lang und lang, also etwa 'de' für Deutsch. 'fr' für Französisch, 'en' für Englisch, 'la' für Lateinisch etc.

Attribut label

Das Attribut enthält als Wert eine Beschriftung für den Text, also einfachen Text. Das Darstellungsprogramm verwendet diese Beschriftung in einer zusätzlichen Kontrollstruktur zur Auswahl zwischen Alternativen.

Der Wert des Attributes zweier Geschwisterelemente track darf nur gleich sein, wenn der Wert von kind oder srclang sie unterscheidet.

Attribut kind

Damit wird der Typ des Textdatei angegeben. Der Wert ist einer aus folgender Liste:

subtitles

Untertitel in anderer Sprache (wird angenommen, wenn das Attribut nicht notiert ist).

captions

Beschriftung, falls der Audio-Kanal nicht verfügbar ist oder stummgeschaltet ist.

descriptions

Beschreibungen, falls der Video-Kanal nicht verfügbar ist oder das Publikum anderweitig beschäftigt ist, nicht oder schlecht sehen kann und nur einem synthetischen Vorleser zuhören kann.

chapters

Kapitelüberschriften, geeignet zur Strukturierung und um das Auffinden von Strukturanfängen im Dokument zu erleichtern.

metadata

Metadaten zum Dokument, die selbst nicht direkt präsentiert werden.

Attribut default

Ist das Attribut notiert, wird die referenzierte Datei als voreingestellt zusammen mit dem Audio oder Video aktiviert.

Der Wert ist leer ("") oder 'default'.

Es gibt weitere Einschränkungen, wann das Attribut notiert werden darf. Dies hängt ab von dem Wert von kind. Dazu werden alle Kindelemente track eines audio oder video in Gruppen eingeteilt.
Die erste Gruppe ist jene, bei welchen kind den Wert 'subtitles' oder 'captions' hat.
Die zweite Gruppe ist jene, bei welchen kind den Wert 'descriptions' hat.
Die dritte Gruppe ist jene, bei welchen kind den Wert 'chapters' hat.

Pro Gruppe darf nur jeweils maximal ein Element track dieses Attribut notiert haben.

Beispiel

<figure>
<figcaption>
Jambo Jambo
</figcaption>
<video controls="" preload="metadata"
       src="jambojambo.webm" poster="jambojambo.svg" width="600" height="400">
<track kind="subtitles" src="jambo.de.vtt" srclang="de" label="Deutsch" default="" />
<track kind="subtitles" src="jambo.en.vtt" srclang="en" lang="en" label="English"/>
<track kind="subtitles" src="jambo.fr.vtt" srclang="fr" lang="fr" label="Français"/>
<track kind="descriptions" src="jambo.de.vtt" srclang="de" label="Deutsch" default="" />
<track kind="descriptions" src="jambo.en.vtt" srclang="en" lang="en" label="English"/>
<track kind="descriptions" src="jambo.fr.vtt" srclang="fr" lang="fr" label="Français"/>
<track kind="chapters" src="jambo.de.vtt" srclang="de" label="Deutsch" default="" />
<track kind="chapters" src="jambo.en.vtt" srclang="en" lang="en" label="English"/>
<track kind="chapters" src="jambo.fr.vtt" srclang="fr" lang="fr" label="Français"/>
<track kind="captions" src="jambo.de.vtt" srclang="de" label="Deutsch"/>
<track kind="captions" src="jambo.en.vtt" srclang="en" lang="en" label="English"/>
<track kind="captions" src="jambo.fr.vtt" srclang="fr" lang="fr" label="Français"/>
<track kind="metadata" src="jambo.meta.txt" />

       Das Darstellungsprogramm kann dieses Video nicht wiedergeben.<br />
       Alternativer Aufruf:
       <a href="jambojambo.webm"><abbr>Webm</abbr>, Film: Jambo Jambo</a>
</video>
</figure>

Die HTML5-Empfehlung selbst scheint als Format WebVTT zu implizieren. Das ist ein Format mit einfachem Text als Inhalt, also kein XML-Format. Es gibt allerdings diverse andere Formate für den Zweck, auch mehrere, die XML verwenden.

Als generelle Alternative bietet sich an bei komplexen Anwendungen, die mehr als eine Mediendatei erfordern, die verschiedenen zeitabhängigen Medien mit dem dafür eigentlich gedachten Format SMIL zu synchronisieren und interaktiv anzubieten.

Zurück zu Änderungen | Hoch zum Inhaltsverzeichnis | Vor zu Objekte und Rahmen