Inhaltsverzeichnis
Erstellen einer einfachen HTML-Seite (HTML-Überblick)
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].
1. Markup-Grundlagen
HTML-Markup erfüllt mehrere zentrale Aufgaben[cite: 2]:
- Es ermöglicht Browsern die korrekte und strukturierte Darstellung von Inhalten[cite: 2].
- Es stellt Elemente für CSS (Stilregeln) und JavaScript (Skripte) bereit[cite: 2].
- Es unterstützt Suchmaschinen bei der Erfassung der Seiteninhalte[cite: 2].
Anatomie eines HTML-Elements
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>
Leere Elemente (Empty Elements)
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
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:
- bestehen meist aus einem Attributnamen und einem zugewiesenen Wert hinter dem `=`[cite: 2].
- Werte können Wörter, Zahlen, Textstrings oder URLs sein[cite: 2].
- Anführungszeichen (einfach oder doppelt) werden für Konsistenz empfohlen[cite: 2].
- Reihenfolge mehrerer Attribute innerhalb eines Tags ist beliebig[cite: 2].
Verschachtelung (Nesting)
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>
HTML-Kommentare
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 -->
2. Minimale Dokumentstruktur
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]. |
3. Semantik: Block- und Inline-Elemente
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]:
Block-Elemente
- Bilden die Hauptkomponenten einer Seite[cite: 2].
- Werden als untereinander gestapelte, rechteckige Blöcke dargestellt[cite: 2].
- Beispiele: `<h1>`–`<h6>`, `<p>`, `<blockquote>`[cite: 2].
Inline-Elemente
- Erscheinen im fließenden Text innerhalb eines Block-Elements[cite: 2].
- Erzeugen keinen eigenen Zeilenumbruch[cite: 2].
- Beispiele: `<em>`, `<strong>`, `<a>`, `<abbr>`[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>
4. Zusammenwirken mit Stylesheets (CSS)
- HTML bestimmt die Struktur, CSS steuert die visuelle Präsentation[cite: 2].
- Browser besitzen integrierte Standard-Formate (User-Agent-Stylesheets), z. B. für Schriftgrößen bei Überschriften oder Abstände um Absätze[cite: 2].
- Eigene CSS-Regeln überschreiben diese Browser-Standardstile[cite: 2].
5. Fehlerbehebung und Validierung
Häufige Fehlerquellen
Syntaxfehler können dazu führen, dass die Darstellung der Website fehlerhaft ist[cite: 2]:
- Fehlendes schließendes Tag oder fehlender `/`: Der Browser erkennt das Ende des Elements nicht[cite: 2].
- Fehlende spitze Klammer (`>`): Nachfolgender Text wird fälschlicherweise als Teil des HTML-Tags interpretiert und verschwindet von der Seite[cite: 2].
- Unvollständige Anführungszeichen bei Attributwerten[cite: 2].
- Datei nicht gespeichert, bevor die Seite im Browser neu geladen wurde[cite: 2].
HTML-Validierung
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]
