HTML – Grundsystem in 10 Kapiteln

1. Die zwei Grundformen von HTML‑Elementen

1.1 Paarige Elemente

Syntax: <element> … </element>

• Start‑Tag und End‑Tag
• können Inhalt enthalten
• bilden DOM‑Knoten mit Kindern

Beispiele: <div>, <p>, <h1>, <span>

1.2 Unpaarige Elemente

Syntax: <element>

• kein End‑Tag
• kein Inhalt
• sofort abgeschlossener DOM‑Knoten

Beispiele: <br>, <img>, <meta>, <input>

2. Erweiterte Grundformen mit Attributen

2.1 Paarige Elemente mit Attributen

Beispiel: <p id="intro" class="lead">Text</p>

2.2 Unpaarige Elemente mit Attributen

Beispiel: <img src="bild.png" alt="Beschreibung">

3. Universelle Mechanismen aller HTML‑Elemente

• Tagname
• Attribute und globale Attribute
• Event‑Attribute
• DOM‑Knoten und Baumstruktur
• Kategorien (Flow, Phrasing, Interactive …)
• Inhaltstypen (Text, Phrasing Content …)
• Verschachtelungsregeln
• Parsing‑Verhalten

4. Mechanismen paariger Elemente

Beispiele:

<div class="box">Inhalt</div>
<p id="intro">Hallo</p>
<h1 data-level="1">Titel</h1>

5. Mechanismen unpaariger Elemente

Beispiele:

<br>
<img src="bild.png" alt="Beschreibung">
<meta charset="utf-8">
<input type="text" placeholder="Name">

6. Universelle Attribute

• id, class, style
• title, lang, dir
• hidden, tabindex, draggable
• data-* für eigene Daten

<div id="box" class="red" data-info="123">…</div>
<br class="spacer">
<img src="x.png" draggable="false">

7. Universelle Event‑Attribute

• onclick, ondblclick
• onmouseover, onmouseout
• onchange, oninput
• onfocus, onblur
• onkeydown, onkeyup, onload

<h1 onclick="alert('Hi')">Titel</h1>
<input oninput="console.log(this.value)">
<img src="x.png" onload="init()">

8. Universelle Strukturregeln

• jedes Element hat einen Tag‑Namen
• jedes Element kann Attribute haben
• jedes Element ist ein DOM‑Knoten
• jedes Element gehört zu einer Kategorie
• jedes Element hat erlaubte Eltern und Kinder

9. Meta‑Ebene der HTML‑Struktur

HTML
├── Struktur
├── Mechanik
├── Attribute
├── Regeln
└── Elemente

Alle Teile des Systems greifen ineinander: Tags, Attribute, DOM, Kategorien, Parsing und Rendering.

10. Paarige und unpaarige HTML‑Elemente

10.1 Paarige Elemente (Auszug)

a, abbr, article, aside, audio, div, p, h1–h6, section, span, ul, li, table, tbody, tr, td, …

10.2 Unpaarige Elemente (Auszug)

br, img, meta, link, input, hr, source, track, wbr, …