💡 1. Überschriften & Textauszeichnung
HTML-Überschriften (<h1> bis <h6>) bilden den Inhaltsbaum (Outline) deiner Seite. Überspringe niemals Überschriften-Ebenen (z.B. nicht von <h1> direkt zu <h3>):
<h1>Hauptthema der Seite (Nur 1x pro Dokument)</h1>
<p>Ein Absatz mit <strong>wichtiger Bedeutung</strong> und <em>Betonung</em>.</p>
<h2>Kapitel 1: Grundlagen</h2>
<h3>1.1 Detailaspekt</h3>
<blockquote cite="https://w3.org">
Semantisches HTML macht das Web für jeden Menschen zugänglich.
</blockquote>📋 2. Ungeordnete (<ul>) & Geordnete (<ol>) Listen
Nutze <ul> (Aufzählungspunkte / Bullets), wenn die Reihenfolge beliebig ist (z.B. Features, Zutaten). Nutze <ol> (Nummerierung), wenn die Reihenfolge verbindlich ist (z.B. Rezeptschritte, Installationsanleitung):
<!-- Ungeordnete Liste: -->
<ul>
<li>HTML5 Semantik</li>
<li>Modernes CSS3</li>
</ul>
<!-- Geordnete Liste: -->
<ol>
<li>Repository klonen</li>
<li>Abhängigkeiten installieren</li>
<li>Dev-Server starten</li>
</ol>🖼️ 3. Bilder & Video-Player mit HTML5
Bilder benötigen immer ein beschreibendes alt-Attribut. Für Video und Audio liefert HTML5 native Steuerelemente ohne Drittanbieter-Plugins:
<!-- Responsives Bild mit Alt-Text: -->
<figure>
<img src="https://via.placeholder.com/800x450" alt="Moderner Arbeitsplatz mit Laptop und Dual-Monitor" width="800" height="500" loading="lazy">
<figcaption>Abbildung 1: Ein typischer Entwickler-Workspace</figcaption>
</figure>
<!-- HTML5 Video-Player: -->
<video controls width="640">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/webm">
Dein Browser unterstützt das Video-Tag leider nicht.
</video>Bilder ohne alt-Text sind wie Fotos in einer Zeitung, die für blinde Leser komplett geschwärzt wurden. Das alt-Attribut ist die unsichtbare Bildunterschrift, die der Screenreader vorliest.
Die Überschriften <h1>..<h6> entsprechen der Titelzeile, den Kapitelüberschriften und den Zwischenüberschriften im Inhaltsverzeichnis.
📑 4. Cheat-Sheet: Texte & Medien-Tags
| Tag | Bedeutung | Wichtige Attribute |
|---|---|---|
<h1>..<h6> |
Überschriftenebenen (1 = höchste, 6 = tiefste) | Keine Levels überspringen! |
<strong> / <em> |
Starke Wichtigkeit / Akzentuierte Betonung | Semantisch (nicht bloß optisch fett/kursiv) |
<ul> / <ol> > <li> |
Ungeordnete (Bullet) / Geordnete (Nummerierte) Liste | Direkte Kinder müssen <li> sein |
<img> |
Grafik / Bild einbetten | src, alt (Pflicht!), loading="lazy" |
<video> / <audio> |
Multimedia-Player | controls, <source src="https://via.placeholder.com/300" type="..."> |