HTML – Elemente und Struktur

HTML besteht aus Elementen, die den Inhalt einer Webseite strukturieren und semantisch beschreiben.

Jedes HTML-Element hat eine klar definierte Aufgabe. Die richtige Auswahl ist entscheidend für:

• Lesbarkeit
• Barrierefreiheit
• Wartbarkeit
• sauberes CSS-Layout

Ein typisches HTML-Element besteht aus:

 <tag attribut="wert">Inhalt</tag>

Beispiel:

 <p class="text">Das ist ein Absatz.</p>

Block-Elemente:

• beginnen immer in einer neuen Zeile
• nehmen standardmäßig die volle Breite ein

Typische Block-Elemente:

Beispiel:

 <div>Block 1</div>
 <div>Block 2</div>

Inline-Elemente:

• bleiben in der Textzeile
• nehmen nur so viel Platz ein wie nötig

Typische Inline-Elemente:

Beispiel:

 <p>Das ist <strong>wichtig</strong>er Text.</p>

Viele Layout-Probleme entstehen durch:

• falsche Elementwahl
• falsche Erwartungen an Inline- oder Block-Verhalten

Beispiel eines klassischen Fehlers:

 <span>
   <div>Das funktioniert nicht sauber</div>
 </span>

👉 Block-Elemente dürfen nicht in Inline-Elementen stecken.

• Block-Container ohne eigene Bedeutung
• Wird für Layout und Gruppierung verwendet

 <div class="container">
   <p>Inhalt</p>
 </div>

⚠️ <div> ist kein Ersatz für semantische Elemente.

• Inline-Container ohne eigene Bedeutung
• Für gezielte Textauszeichnung

 <p>Status: <span class="warnung">kritisch</span></p>

HTML-Elemente können ineinander verschachtelt werden:

 <section>
   <h2>Titel</h2>
   <p>Text</p>
 </section>

Regel:

• Saubere Hierarchie
• Keine wilden Container-Kaskaden

Je tiefer die Verschachtelung, desto schwerer:

• CSS
• Wartung
• Fehlersuche

Attribute erweitern HTML-Elemente.

Häufige Attribute:

Beispiel:

 <img src="bild.jpg" alt="Beispielbild">

• HTML beschreibt Bedeutung, nicht Aussehen
• Möglichst wenige <div>
• Lieber korrektes Element als cleveres CSS
• Erst Struktur, dann Styling

Merksatz:

**HTML ist das Skelett –CSS ist die Kleidung.**