[[it-themen:webdesign:start|zurück]]

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


---
## 1. Aufbau eines HTML-Elements

Ein typisches HTML-Element besteht aus:

<code html>

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


</code>

Beispiel:

<code html>

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


</code>

^ Bestandteil    ^ Bedeutung        ^
| `<p>`          | öffnendes Tag    |
| `class="text"` | Attribut         |
| `Inhalt`       | Elementinhalt    |
| `</p>`         | schließendes Tag |

---

## 2. Block- vs. Inline-Elemente
### 2.1 Block-Elemente

Block-Elemente:

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

Typische Block-Elemente:

^ Element        ^ Zweck                  ^
| `<div>`        | allgemeiner Container  |
| `<p>`          | Absatz                 |
| `<h1>`–`<h6>`  | Überschriften          |
| `<ul>`, `<ol>` | Listen                 |
| `<section>`    | inhaltlicher Abschnitt |

Beispiel:

<code:html>

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


</code>

---
### 2.2 Inline-Elemente

Inline-Elemente:

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

Typische Inline-Elemente:

^ Element    ^ Zweck            ^
| `<span>`   | Inline-Container |
| `<a>`      | Link             |
| `<strong>` | Betonung         |
| `<em>`     | Hervorhebung     |
| `<img>`    | Bild             |

Beispiel:

<code html>

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


</code>

---
## 3. Warum diese Unterscheidung wichtig ist

Viele Layout-Probleme entstehen durch:

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

Beispiel eines klassischen Fehlers:

<code html>

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


</code>

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

---
## 4. <div> und <span> – richtig eingesetzt
### 4.1 <div>

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

<code html>

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


</code>

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

---
### 4.2 <span>

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

<code html>

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


</code>

---
## 5. Verschachtelung (Nesting)

HTML-Elemente können ineinander verschachtelt werden:

<code html>

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


</code>

Regel:

* **Saubere Hierarchie**
* **Keine wilden Container-Kaskaden**

Je tiefer die Verschachtelung, desto schwerer:

* CSS
* Wartung
* Fehlersuche

---
## 6. Attribute – Zusatzinformationen

Attribute erweitern HTML-Elemente.

Häufige Attribute:

^ Attribut ^ Bedeutung          ^
| `id`     | eindeutige Kennung |
| `class`  | CSS-Zuweisung      |
| `href`   | Linkziel           |
| `src`    | Quelle             |
| `alt`    | Alternativtext     |

Beispiel:

<code html>

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


</code>

---
## 7. Best Practices (bewährt, nicht modisch)

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


---