Bilder, Tabellen und semantische Elemente
Mit den Textelementen aus Lektion 3 kannst du schon Blog-Artikel und Texte schreiben. Aber Webseiten leben von visuellen Inhalten und strukturierten Daten. In dieser Lektion gehen wir drei Themen durch: Bilder richtig einbinden, Tabellen für tabellarische Daten – und die modernen semantischen Elemente, mit denen du Seitenbereiche logisch markierst.
Semantische Elemente sind dabei kein „nice to have" – sie sind seit HTML5 (2014) die offizielle Standard-Methode um eine Seite zu strukturieren. Suchmaschinen, Screenreader und Browser-Erweiterungen verlassen sich darauf.
1) Bilder einbinden mit dem img-Tag
Bilder sind in HTML kein normaler Inhalt – sie werden eingebettet. Der <img>-Tag ist ein „void element" (siehe L2) – er hat keinen schließenden Tag, sondern alle Infos über Attribute. Klicke die Bestandteile:
src gilt: ein relativer Pfad wie bilder/hund.jpg sucht im selben Ordner. Ein absoluter Pfad /bilder/hund.jpg startet beim Webroot. Eine komplette URL https://... lädt von einem anderen Server. Bei externen Bildern: Urheberrecht beachten (siehe K06 Urheberrecht) – nicht einfach klauen!2) Bildformate richtig wählen
Welches Format du verwendest, beeinflusst Dateigröße, Qualität und Funktionsumfang. Faustregel: Fotos → JPG/WebP, Grafiken/Icons → SVG, Screenshots/Logos → PNG/WebP:
<picture> mit mehreren <source> – Browser nimmt das beste verfügbare Format. So liefern moderne Browser WebP, ältere fallen auf JPG zurück:<picture> <source srcset="bild.webp" type="image/webp"> <img src="bild.jpg" alt="..."> </picture>Bildoptimierung ist wichtig fürs Laden! Komprimiere mit Tools wie
squoosh.app oder tinypng.com. Ungeschickte Bilder sind der häufigste Grund für langsame Seiten.3) Tabellen – für tabellarische Daten
Tabellen sind in HTML nur für echte tabellarische Daten da – nicht für Layout (das macht man heute mit Flexbox oder Grid). Echte Tabellen-Daten sind z.B. Preislisten, Statistiken, Vergleiche.
Eine Tabelle besteht aus drei Hierarchie-Ebenen: <table> ist die Tabelle selbst, darin <tr> für Zeilen (table row), darin <th> (header) oder <td> (data) für die einzelnen Zellen:
th) sind nicht nur fett – sie werden Screenreadern angesagt damit die Nutzer wissen welche Spalte sie gerade hören. Bei komplexen Tabellen zusätzlich scope="col" oder scope="row" setzen. Zellen verbinden geht mit colspan="2" (über 2 Spalten) oder rowspan="3" (über 3 Zeilen). Für sehr lange Tabellen: <thead>, <tbody>, <tfoot> als logische Gruppen.4) Wann KEINE Tabelle nehmen?
Bis ca. 2010 wurden Tabellen für ganze Seiten-Layouts missbraucht („Tabellen-Layout"). Das ist heute ein absolutes No-Go aus mehreren Gründen: schlecht für Screenreader, unflexibel auf Mobile, riesige Quellcodes. Wenn du also „dieser Block links, dieser rechts" willst – nimm Flexbox oder CSS Grid (Lektion 8 und 9), keine Tabelle.
Eine Tabelle hingegen ist immer richtig für: Preislisten, Vergleiche, Bestellübersichten, Statistiken, Stundenpläne, Bewertungs-Übersichten. Faustregel: würdest du das Excel auch in eine Tabelle eintragen? Dann ja, sonst nein.
5) Semantische Layout-Elemente
HTML5 hat ein Set von „semantischen" Tags eingeführt, die direkt sagen welche Rolle ein Seitenbereich spielt. Vorher war alles in generische <div> mit Klassennamen verpackt. Klicke einen Bereich der typischen Seite:
<div> (Block-Element, kein Styling von Haus aus) – ihr Wert liegt in der Bedeutung. Screenreader bieten z.B. „springe zu main", suchen Navigation in <nav>, lesen den Hauptinhalt zuerst vor. Google nutzt sie auch bei der Indexierung.6) Article vs. Section vs. Div – wann was?
Drei Container-Tags, die oft verwechselt werden. Hier eine klare Trennung:
- <article> – ein in sich abgeschlossener Inhalt der auch alleine Sinn ergibt. Beispiele: Blog-Post, News-Artikel, Forum-Beitrag, Produkt-Karte in einer Liste. Faustregel: würdest du das in einem RSS-Feed einzeln versenden? Dann
<article>. - <section> – ein thematischer Abschnitt innerhalb einer Seite oder eines Artikels. Sollte eine eigene Überschrift haben. Beispiele: „Über uns", „Kontakt", „Produktbeschreibung" einer Verkaufsseite.
- <div> – generischer Container OHNE semantische Bedeutung. Nimm es nur wenn keiner der anderen Tags passt. Oft für CSS-Styling-Wrappers ohne Bedeutung.
Verwandter Inline-Tag: <span> – das <div> für Inline-Inhalt. Wenn du einen Teil eines Texts anders färben willst ohne semantische Bedeutung: <span class="hervorgehoben">...</span>.
7) Figure und figcaption – Bilder mit Beschriftung
Wenn ein Bild eine Beschriftung haben soll, packe es in <figure> und nutze <figcaption> für die Bildunterschrift. Vorteil gegenüber „Bild + Paragraph": Screenreader erkennen die Zugehörigkeit:
<img src="diagramm.png" alt="Verkaufszahlen Q3">
<figcaption>Abb. 1: Verkaufszahlen pro Region im Q3 2025</figcaption>
</figure>
Auch für Code-Snippets, Zitate, Statistiken etc. – nicht nur Bilder. Browser stellen <figure> mit etwas Margin standardmäßig dar.
8) iframe – externe Inhalte einbinden
Manchmal willst du eine andere Seite einbetten – z.B. eine Google Maps Karte, ein YouTube-Video oder ein Tweet. Dafür gibt es <iframe>:
width="560" height="315"
title="YouTube Video"></iframe>
Vorsicht: iframes sind sicherheitsrelevant. Eingebettete Inhalte können theoretisch die Hauptseite ausspähen wenn nicht richtig konfiguriert (siehe K11 Secure Coding). Bei externen iframes immer das sandbox-Attribut erwägen. Datenschutz beachten: ein YouTube-Iframe lädt automatisch Daten an Google (siehe K05 DSGVO) – moderne Sites bieten dafür einen Klick-zum-Laden-Mechanismus.
Zusammenfassung
Bilder mit <img src="..." alt="..."> – alt-Attribut Pflicht für Barrierefreiheit. Formate: JPG/WebP für Fotos, PNG für Transparenz, SVG für Vektoren, GIF/WebP für Animationen. Tabellen für echte Daten: <table>→<tr>→<th>/<td>, optional <thead>/<tbody>. NIE für Layout missbrauchen. Semantische Tags HTML5: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>+<figcaption>. <div> und <span> nur wenn keiner der semantischen Tags passt. <iframe> für externe Inhalte – Security/Datenschutz beachten.