Ohne HTML-Markup zur Beschreibung der Inhaltsstruktur läuft Fließtext im Browser einfach zusammen – Zeilenumbrüche, Tabs und mehrere Leerzeichen werden vom Browser ignoriert[cite: 2]. Die Aufgabe von HTML ist es, Inhaltsstrukturen semantisch aufzubereiten[cite: 2].
HTML-Markup erfüllt mehrere zentrale Aufgaben[cite: 2]:
Ein HTML-Element besteht aus einem öffnenden Tag, dem Inhalt und einem schließenden Tag[cite: 2].
html <elementname>Inhalt hier</elementname>
Beispiel:
html <h1>Black Goose Bistro</h1>
Einige Elemente enthalten keinen Text oder weitere Tags, sondern stellen eine eigenständige Anweisung dar[cite: 2]. Sie besitzen kein schließendes Tag[cite: 2].
html <!-- Das br-Element fügt einen Zeilenumbruch ein --> <p>1005 Gravenstein Highway North<br>Sebastopol, CA 95472</p>
Attribute bieten zusätzliche Anweisungen, um ein Element zu konfigurieren oder zu modifizieren[cite: 2]. Sie stehen im Eröffnungs-Tag nach dem Elementnamen und werden durch Leerzeichen getrennt[cite: 2].
html <element attribute="value">Inhalt</element> <img src="bird.jpg" alt="Photo of bird">
Eigenschaften von Attributen:
Elemente können ineinander verschachtelt werden[cite: 2]. Dabei ist strikt darauf zu achten, dass sich schließende Tags nicht überlappen[cite: 2].
html <div> <h1>Headline</h1> <p>This is <em>emphasized</em> text.</p> </div>
Notizen im Code werden als Kommentare gekennzeichnet[cite: 2]. Sie werden vom Browser nicht auf der Seite gerendert, bleiben im Quelltext jedoch einsehbar[cite: 2].
html <!-- Dies ist ein HTML-Kommentar --> <!-- Start der Hauptnavigation --> <ul> <li>Home</li> </ul> <!-- Ende der Navigation -->
Jedes standardkonforme HTML5-Dokument sollte mindestens folgendes Grundgerüst aufweisen[cite: 2]:
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Titel der Seite</title> </head> <body> <!-- Seiteninhalt folgt hier --> </body> </html>
| Element / Deklaration | Beschreibung |
|---|---|
| `<!DOCTYPE html>` | Teilt dem Browser mit, dass das Dokument dem HTML5-Standard entspricht[cite: 2]. |
| `<html>` | Das Root-Element (Stammelement), welches alle anderen Elemente umfasst[cite: 2]. |
| `<head>` | Enthält Meta-Informationen, Skripte, Stylesheets und den Seitentitel (wird nicht direkt im Hauptfenster gerendert)[cite: 2]. |
| `<meta charset=„utf-8“>` | Deklariert die Zeichenkodierung (z. B. UTF-8 für erweiterte Zeichensätze)[cite: 2]. |
| `<title>` | Pflichttag für den Dokumenttitel. Wird in Browser-Tabs, Lesezeichen und Suchergebnissen angezeigt[cite: 2]. |
| `<body>` | Enthält den gesamten sichtbaren Inhalt der Webseite[cite: 2]. |
HTML dient der semantischen Strukturierung (Bedeutung), nicht der optischen Präsentation[cite: 2]. Die Beziehungsstruktur der Elemente bildet das DOM (Document Object Model)[cite: 2].
HTML-Elemente werden grundlegend in zwei Kategorien unterteilt[cite: 2]:
html <!-- Beispiel für Block- und Inline-Struktur --> <h1>Black Goose Bistro</h1> <h2>The Restaurant</h2> <p>The Black Goose Bistro offers <em>casual lunch</em> and dinner fare in a relaxed atmosphere.</p>
Syntaxfehler können dazu führen, dass die Darstellung der Website fehlerhaft ist[cite: 2]:
Zur Überprüfung auf Regelkonformität empfiehlt sich die Verwendung eines HTML-Validators (z. B. `html5.validator.nu` oder W3C Validator)[cite: 2].
Voraussetzungen für eine erfolgreiche Validierung[cite: 2]:
1. `<!DOCTYPE html>` vorhanden[cite: 2] 2. Zeichenkodierung (Charset) deklariert[cite: 2] 3. `<title>`-Tag im `<head>` enthalten[cite: 2] 4. Korrekte Verschachtelung aller Tags ohne Überlappungen[cite: 2] 5. Keine herstellerspezifischen oder veralteten HTML-Tags[cite: 2]