Mit dem <img>-Element können wir auf unsere Webseite ein Bild einfügen. Dafür braucht es mindestens zwei Attribute:
src - URL, wo das Bild ist
alt - Alternativer Text, falls Bild nicht lädt oder für Screenreader
<img
src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth" />
Höhe und Breite
Wir können die Attribute width und height benutzen, um die Breite bzw. Höhe unseres Bildes zu spezifizieren. Dabei ist der Wert ein Integer ohne eine Masseinheit und repräsentiert die Breite und Höhe des Bildes in Pixeln.
<img
src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
width="400"
height="341" />
Figuren
<figure>
<img
src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341" />
<figcaption>
A T-Rex on display in the Manchester University Museum.
</figcaption>
</figure>
Das <figcaption>-Element teilt Browsern und Assistenztechnologie mit, dass die Bildunterschrift den anderen Inhalt des <figure>-Elements beschreibt.
Videos
<video src="rabbit320.webm" >
Your browser doesn't support HTML video. Here is a
<a href="rabbit320.webm">link to the video</a> instead.
</p>
</video>
Mehrere Quellenformate
Um die Unterstützung für verschiedene Browser zu erhöhen, können wir mehrere Quellenformate einbinden.
<video controls>
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support this video. Here is a
<a href="rabbit320.mp4">link to the video</a> instead.
</p>
</video>
Weitere Attribute
<video
controls
>
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support this video. Here is a
<a href="rabbit320.mp4">link to the video</a> instead.
</p>
</video>
Audios
Das <audio>-Element funktioniert genauso wie das <video>-Element, mit ein paar kleinen Unterschieden: keine width, height und poster-Attribute. Ein typisches Beispiel könnte so aussehen:
<audio controls>
<source src="viper.mp3" type="audio/mp3" />
<source src="viper.ogg" type="audio/ogg" />
<p>
Your browser doesn't support this audio file. Here is a
<a href="viper.mp3">link to the audio</a> instead.
</p>
</audio>