Tag <source>

Tag <source>

Definition

Status: Aktueller Standard

Das Tag <source> steht für source (Ursprung, Quelle).

Der <source>-Tag wird in HTML verwendet, um alternative Medienquellen für Audio-, Video- oder Bildinhalte bereitzustellen. Der Browser kann daraus die am besten unterstützte Datei auswählen. Das Element wird hauptsächlich zusammen mit den Tags <audio>, <video> oder <picture> verwendet. So lassen sich alternative Inhalte angeben die zum jeweiligen Browser bzw. Umfeld am besten passen. Dazu gehören z.B. unterschiedliche Dateiformate oder auch (bei Handynutzern) Bilder in unterschiedlichen Größen. <source> hat kein schließendes Tag!

Syntax

<source [attribute]>

Attribute bzw. Unterelemente

src

Der Pfad zur Datei

srcset

Bildquellen für responsive Images

media

Media-Query (für <picture>)

type

MIME-Type der Datei

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <source> - Auswahl nach Bildschirmgröße...

Der Code:

<picture>
  <!-- Für Bildschirme ab 800px Breite: -->
  <source srcset="grosses-bild.webp" media="(min-width: 800px)">
  <!-- Fallback für alle anderen: -->
  <img src="kleines-bild.jpg" alt="Beispielbild">
</picture>

Hier wird für große Bildschirme über 880 Pixel (media="(min-width: 800px)") eine große Version des Bildes angeboten, falls kleiner 800 Pixel wird die Fallback-Version verwendet.

Beispiel <source> - Auswahl nach unterstütztem Dateiformat...

Der Code:

<video controls>
  <source src="film.webm" type="video/webm">
  <source src="film.mp4" type="video/mp4">
  Dein Browser unterstützt keine Videos.
</video>

Hier trifft der Browser die Auswahl, welches Format er darstellen kann (webm oder mp4).