Binde Ton, Video und beschriftete Illustrationen ohne jedes Plugin ein.
Diese Lektion in Kodokon öffnenHTML spielt Audio und Video nativ ab: kein externer Player nötig. Praxisbeispiele: eine Podcast-Folge in einem Blog, eine Produktdemo auf einer Landingpage, ein in die Dokumentation eingebettetes Tutorial. Schauen wir uns an, wie man es richtig macht.
<video controls width="640" poster="preview.jpg">
<source src="demo.webm" type="video/webm">
<source src="demo.mp4" type="video/mp4">
<track src="subs-fr.vtt" kind="subtitles"
srclang="fr" label="French" default>
Your browser doesn't support HTML5 video.
</video>Drei Profi-Erkenntnisse. Die source-Elemente werden der Reihe nach ausprobiert: Der Browser spielt das erste ab, das er dekodieren kann. Das poster-Attribut zeigt vor dem Abspielen ein Platzhalterbild. Und schließlich fügt track Untertitel im WebVTT-Format hinzu: unverzichtbar für die Barrierefreiheit und sehr geschätzt beim Ansehen ohne Ton.
<audio controls preload="metadata">
<source src="podcast-ep12.mp3" type="audio/mpeg">
<a href="podcast-ep12.mp3">Download the episode</a>
</audio>Um Inhalte zu illustrieren, verbindet figure ein Medienelement über figcaption mit seiner Bildunterschrift. Und das nicht nur für Bilder: ein Diagramm, ein Code-Schnipsel oder ein Zitat sind ebenfalls gute Kandidaten. Die Bildunterschrift ist programmatisch mit der Figur verknüpft, etwas, das ein einfacher Absatz unter dem Bild nicht bieten kann.
<figure>
<img src="chart-sales.png"
alt="Sales up 12% in Q2 2026">
<figcaption>
Sales trend, second quarter of 2026.
</figcaption>
</figure>