Dokumentation
HTML

HTML Einführung

Zweck, Rolle und Grundidee von HTML als Auszeichnungssprache.

HTML Einführung

Zweck, Rolle und Grundidee von HTML als Auszeichnungssprache. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

  • erklären, warum HTML die inhaltliche Grundlage jeder Webseite ist
  • Inhalt, Struktur und Gestaltung sauber voneinander trennen
  • HTML, CSS und JavaScript im Zusammenspiel einordnen

Erklärung

HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. Sie beschreibt, welche Bedeutung ein Inhalt hat: eine Überschrift, ein Absatz, eine Liste, ein Link oder ein Formularfeld.

Der Browser liest HTML von oben nach unten, baut daraus das Document Object Model und stellt die Seite dar. CSS gestaltet diese Struktur, JavaScript verändert sie bei Bedarf oder reagiert auf Eingaben.

Für die CAP-Ausbildung ist diese Trennung wichtig: Wer Inhalt, Gestaltung und Verhalten vermischt, baut Seiten, die schwer wartbar, schlecht barrierefrei und schwierig zu prüfen sind.

Beispiele

<article class="profile-card">
  <h2>Lea Berger</h2>
  <p>Frontend-Entwicklerin in Ausbildung.</p>
</article>

Das HTML beschreibt hier die fachliche Struktur. Dass daraus eine Karte wird, entscheidet später CSS.

<button type="button">Details anzeigen</button>

Das Element ist ein Button, weil eine Aktion ausgelöst wird. Ein Link wäre hier nur richtig, wenn zu einer anderen Adresse navigiert wird.

Typische Fehler

  • HTML-Tags nach Aussehen wählen, zum Beispiel <h1> nur wegen großer Schrift.
  • Texte und Layout ausschließlich mit <div> und <span> aufbauen.
  • CSS oder JavaScript verwenden, obwohl ein passendes HTML-Element existiert.

Best Practices

  • Beginne mit sinnvollem HTML, bevor du über Styling nachdenkst.
  • Nutze semantische Elemente, wenn sie die Bedeutung klarer machen.
  • Halte HTML-Dateien lesbar: eindeutige Einrückung, sprechende Klassen, keine unnötigen Wrapper.

Kleine Übung

Erstelle eine kleine Startseite mit header, main, zwei Abschnitten und footer. Markiere alle Inhalte zuerst nur mit HTML und ergänze noch kein CSS.

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

Zuletzt aktualisiert: 7. Juni 2026

Bilder und Medien

Bilder, Alt-Texte, figure, audio, video und responsive Medien.

Formulare

Formularelemente, Labels, Eingabetypen, Validierung und Barrierefreiheit.