HTML Bilder und Medien

Bilder, Alt-Texte, figure, audio, video und responsive Medien. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• img mit src, alt, width und height sauber verwenden
• Medien mit figure und figcaption beschreiben
• Barrierefreiheit bei Bildern, Audio und Video berücksichtigen

Erklärung

Bilder transportieren Informationen oder unterstützen Inhalte. Das alt-Attribut ist Pflicht. Es beschreibt den Inhalt oder bleibt leer, wenn ein Bild rein dekorativ ist. width und height helfen dem Browser, Platz zu reservieren und Layout-Sprünge zu vermeiden.

Audio und Video brauchen Bedienelemente und möglichst Alternativen wie Untertitel, Transkripte oder begleitende Texte.

Beispiele

<img src="/images/lab-network.png" alt="Netzwerkdiagramm mit Client, Router und Server" width="960" height="540">

Der Alt-Text beschreibt die relevante Information, nicht nur "Bild".

<figure>
  <img src="/images/html-dom.png" alt="Vereinfachter DOM-Baum einer HTML-Seite">
  <figcaption>HTML wird im Browser als DOM-Baum dargestellt.</figcaption>
</figure>

<video controls width="640">
  <source src="/media/demo.mp4" type="video/mp4">
  Dein Browser kann dieses Video nicht abspielen.
</video>

Typische Fehler

• Leere oder nichtssagende Alt-Texte wie bild1 verwenden.
• Bilder ohne Größenangaben einfügen und Layout-Sprünge erzeugen.
• Autoplay mit Ton aktivieren.

Best Practices

• Beschreibe im Alt-Text die Funktion des Bildes im Kontext.
• Komprimiere Medien, bevor du sie veröffentlichst.
• Stelle wichtige Audio- oder Videoinhalte zusätzlich als Text bereit.

Kleine Übung

Füge ein Bild mit aussagekräftigem Alt-Text und eine figure mit Bildunterschrift in eine Profilseite ein.

Zusammenfassung

HTML ist dann gut, wenn die Bedeutung der Inhalte klar erkennbar ist. Saubere Struktur, passende Elemente und barrierearme Grundregeln machen Seiten robuster, verständlicher und leichter prüfbar.

Weiterführende Seiten

• Vorherige Seite: HTML Listen
• Nächste Seite: HTML Tabellen
• Zur Übersicht
• HTML Semantik
• Accessibility