Zusammenfassung
HTML (Hypertext Markup Language) ist die Auszeichnungssprache, mit der Webseiten strukturiert werden. Sie wurde ab 1989 von Tim Berners-Lee am CERN entwickelt und ist heute durch das W3C standardisiert. Eine moderne Webseite besteht aus drei Teilen: Struktur (HTML), Gestaltung (CSS) und Funktionalität (TypeScript/JavaScript). HTML kümmert sich nur um die Struktur — also was auf der Seite ist und welche Bedeutung es hat, nicht wie es aussieht. In dieser Vorlesung lernen wir das HTML-Grundgerüst, die wichtigsten Tags und Attribute, Formulare, multimediale Inhalte und die semantische Seiteneinteilung.
Schlüsselbegriffe
HTML
Hypertext Markup Language. Auszeichnungssprache zur Beschreibung der Struktur von Webseiten. Kein Programm, kein Algorithmus — nur Text mit speziellen Markierungen (Tags).
Tag
Ein HTML-Befehl in spitzen Klammern, z. B. <p> für Absatz. Die meisten Tags haben einen öffnenden Tag (<p>) und einen schließenden Tag (</p>).
Attribut
Zusatzinformation innerhalb eines öffnenden Tags. Beispiel: <a href='https://thm.de'>. Hier ist href das Attribut und https://thm.de sein Wert.
DOM
Document Object Model. Die Baumstruktur, die ein Browser aus dem HTML-Code erzeugt. Jedes HTML-Element wird zu einem Knoten im Baum.
Parsen
Das Verarbeiten des HTML-Textes durch den Browser. Der Browser liest den Code von oben nach unten und baut dabei den DOM-Baum auf.
Validator
Ein Programm (z. B. vom W3C), das prüft ob HTML-Code syntaktisch korrekt ist. Ungültiger Code wird vom Browser oft korrigiert — aber anders als erwartet.
Block-Element
HTML-Element, das die volle verfügbare Breite einnimmt und immer in einer neuen Zeile beginnt. Beispiele: <div>, <p>, <h1>, <ul>.
Inline-Element
HTML-Element, das nur so viel Platz einnimmt wie nötig, und im Textfluss verbleibt. Beispiele: <span>, <a>, <strong>, <img>.
Semantisches HTML
Verwendung von HTML-Tags nach ihrer inhaltlichen Bedeutung statt nur nach optischem Ergebnis. Wichtig für Suchmaschinen, Screenreader und Wartbarkeit.
DOCTYPE
Die Dokumenttyp-Deklaration teilt dem Webbrowser mit, um welche HTML-Version es sich bei dem gelieferten Dokument handelt (z. B. <!DOCTYPE html> für HTML5).
Screenreader
Eine Software, die seheingeschränkten Menschen die Bildschirminhalte vorliest. Sie verlässt sich stark auf semantisches HTML und alternative Texte.
Kernkonzepte
Was ist HTML und wozu dient es?
Eine Webseite besteht aus drei Schichten:
| Schicht | Technologie | Aufgabe |
|---|---|---|
| Struktur | HTML | Was ist auf der Seite und was bedeutet es? |
| Gestaltung | CSS | Wie sieht es aus? (Farben, Schriften, Layout) |
| Funktionalität | TypeScript / JS | Was passiert, wenn der Nutzer etwas tut? |
Klausurrelevant
Diese drei Schichten sollten strikt getrennt bleiben. HTML für Struktur, CSS für Aussehen, TypeScript für Verhalten. Wenn Formatierung und Inhalt vermischt werden, entstehen schwer wartbare Seiten.
Was ist eine Auszeichnungssprache?
Auszeichnungssprachen (Markup Languages) sind Texte, die andere Texte beschreiben. Du hast schon eine kennengelernt: Markdown (z. B.
**fett** für fetten Text, # Überschrift). HTML ist umfangreicher und besitzt spezielle Tags (anstelle von Sonderzeichen wie # oder *).Hypertexte sind Texte, die auf andere Texte verweisen — durch Hyperlinks. Das ist der Kern des World Wide Web: Seiten verlinken aufeinander und bilden so das „Netz".
Das HTML-Grundgerüst
Jede HTML-Datei braucht dieses Grundgerüst:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Webseitentitel</title>
<meta charset="utf-8">
</head>
<body>
<!-- Sichtbare Inhalte hier -->
</body>
</html>| Teil | Bedeutung |
|---|---|
<!DOCTYPE html> | Sagt dem Browser: Das ist HTML5 (aktuelle Version) |
<html lang="de"> | Wurzel des Dokuments; lang hilft Screenreadern und Suchmaschinen |
<head> | Metabereich — für den Browser, nicht für den Nutzer sichtbar |
<title> | Titel des Browser-Tabs |
<meta charset="utf-8"> | Zeichenkodierung (damit Umlaute funktionieren) |
<body> | Alles was der Nutzer sieht |
<!-- … --> | Kommentar — wird ignoriert, nur für Entwickler |
Validität und DOM
Browser sind fehlerverzeihend — aber auf ihre eigene Art. Schreibst du ungültigen HTML-Code, versucht der Browser ihn zu korrigieren. Das Ergebnis entspricht oft nicht dem, was du wolltest.
Achtung
Ungültiger HTML-Code führt dazu, dass verschiedene Browser unterschiedliche Ergebnisse zeigen. Nutze den W3C-Validator (validator.w3.org) um Fehler zu finden.
Was ist der DOM?
Wenn der Browser deinen HTML-Code liest (parst), erzeugt er eine Baumstruktur — den Document Object Model (DOM). Jeder Tag wird zu einem Knoten im Baum.
Aus diesem HTML:
<html>
<head><title>Test</title></head>
<body>
<h1>Überschrift</h1>
<ul>
<li>Punkt A</li>
<li>Punkt B</li>
</ul>
</body>
</html>...entsteht ein Baum:
document → html → head / body → title / h1 / ul → li (×2).Der DOM ist wichtig, weil TypeScript später über ihn auf einzelne Elemente zugreifen und sie verändern kann.
Tags und Attribute
Block- vs. Inline-Elemente
| Art | Verhalten | Beispiele |
|---|---|---|
| Block | Beginnt in neuer Zeile, füllt volle Breite | <div>, <p>, <h1>–<h6>, <ul>, <table>, <form> |
| Inline | Bleibt im Textfluss, nur so breit wie nötig | <span>, <a>, <strong>, <em>, <img>, <input> |
Grundlegende Elemente
| Tag | Bedeutung |
|---|---|
<h1> – <h6> | Überschriften (h1 = größte, h6 = kleinste) |
<p> | Textabsatz |
<a href="URL"> | Link (Hyperlink) |
<br> | Zeilenumbruch (kein schließender Tag) |
<div> | Allgemeine Gruppe (Block) |
<span> | Allgemeine Gruppe (Inline) |
<!-- … --> | Kommentar |
Formatierungstags (semantisch verwenden!)
| Tag | Bedeutung | Darstellung |
|---|---|---|
<strong> | Wichtig (semantisch!) | Fett |
<em> | Betont (semantisch!) | Kursiv |
<b> | Fettgedruckt (nur visuell) | Fett |
<i> | Kursiv (nur visuell) | Kursiv |
<del> | Gelöscht | |
<mark> | Hervorgehoben | Markiert |
<sub> | Tiefgestellt | H₂O |
<sup> | Hochgestellt | x² |
Tipp
Bevorzuge
<strong> statt <b> und <em> statt <i> — sie haben semantische Bedeutung. Screenreader für seheingeschränkte Personen nutzen diese Information.Wichtige Attribute
id="name"— Eindeutiger Bezeichner (nur einmal pro Seite)class="name"— Kategorie (mehrfach verwendbar, wichtig für CSS)href="URL"— Ziel eines Links (nur bei<a>)src="URL"— Quelle einer Datei (bei<img>,<video>,<audio>)alt="Text"— Alternativtext für Bilder (für Screenreader und bei Ladefehler)
Formulare
Formulare werden genutzt um Nutzereingaben zu empfangen (Anmeldung, Suche, Kontakt).
<form>
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="pw">Passwort:</label>
<input type="password" id="pw" name="pw" required>
</div>
<button type="submit">Registrieren</button>
</form>| Tag / Attribut | Funktion |
|---|---|
<form> | Container für alle Formularelemente |
<input> | Eingabefeld (vielseitig durch type) |
<label for="id"> | Beschriftung, verknüpft mit Eingabefeld per for-Attribut |
<button type="submit"> | Absendeknopf |
<textarea> | Mehrzeiliges Texteingabefeld |
<select> + <option> | Dropdown-Auswahl |
required | Pflichtfeld — Browser prüft vor dem Absenden |
type="text" | Einzeiliges Textfeld |
type="email" | E-Mail (Browser prüft @-Format) |
type="password" | Passwort (verdeckte Eingabe) |
type="checkbox" | Checkbox |
type="radio" | Auswahlknopf (nur eine Option wählbar) |
Multimediale Inhalte
<!-- Bild -->
<img src="foto.jpg" alt="Beschreibung des Bildes">
<!-- Responsives Bild (verschiedene Auflösungen) -->
<picture>
<source media="(min-width:650px)" srcset="gross.jpg">
<img src="klein.jpg" alt="Profilbild">
</picture>
<!-- Video -->
<video controls>
<source src="film.mp4" type="video/mp4">
</video>
<!-- Audio -->
<audio controls>
<source src="musik.mp3" type="audio/mpeg">
</audio>Info
Das
alt-Attribut bei <img> ist Pflicht — aus Zugänglichkeitsgründen (Screenreader) und weil es angezeigt wird, wenn das Bild nicht lädt.Listen und Tabellen
Listen:
<!-- Ungeordnet (Bulletpoints) -->
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>
<!-- Geordnet (Nummeriert) -->
<ol>
<li>Schritt 1</li>
<li>Schritt 2</li>
</ol>Tabellen:
<table>
<thead>
<tr>
<th>Name</th>
<th>Frühschicht</th>
</tr>
</thead>
<tbody>
<tr>
<td>Anna</td>
<td>X</td>
</tr>
</tbody>
</table>Achtung
Tabellen dienen ausschließlich zur Darstellung tabellarischer Daten — nicht zum Layout einer Seite! Das war früher üblich, ist heute aber streng verboten. Layout macht CSS.
Semantische Bereiche (HTML5)
Statt überall
<div> zu nutzen, gibt es semantische Bereiche mit Bedeutung:| Tag | Bedeutung |
|---|---|
<header> | Kopfbereich der Seite (Logo, Navigation) |
<nav> | Navigationsbereich |
<main> | Hauptinhalt der Seite (nur einmal!) |
<section> | Thematischer Abschnitt |
<article> | Eigenständiger Inhalt (z. B. Blog-Beitrag) |
<aside> | Randinhalte, Seitenleiste |
<footer> | Fußbereich (Impressum, Copyright) |