====== 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].

<code>html
<elementname>Inhalt hier</elementname>
</code>

**Beispiel:**
<code>html
<h1>Black Goose Bistro</h1>
</code>

==== 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].

<code>html
<!-- Das br-Element fügt einen Zeilenumbruch ein -->
<p>1005 Gravenstein Highway North<br>Sebastopol, CA 95472</p>
</code>

==== 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].

<code>html
<element attribute="value">Inhalt</element>
<img src="bird.jpg" alt="Photo of bird">
</code>

**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].

<code>html
<div>
  <h1>Headline</h1>
  <p>This is <em>emphasized</em> text.</p>
</div>
</code>

==== 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].

<code>html
<!-- Dies ist ein HTML-Kommentar -->
<!-- Start der Hauptnavigation -->
<ul>
  <li>Home</li>
</ul>
<!-- Ende der Navigation -->
</code>

===== 2. Minimale Dokumentstruktur =====

Jedes standardkonforme HTML5-Dokument sollte mindestens folgendes Grundgerüst aufweisen[cite: 2]:

<code>html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Titel der Seite</title>
</head>
<body>
  <!-- Seiteninhalt folgt hier -->
</body>
</html>
</code>

^ 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].

<code>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>
</code>

===== 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]