🖥️ Veni. Vidi. sudo rm -rf / vici.

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
it-themen:webdesign:html:elemente

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Ăśberarbeitung
it-themen:webdesign:html:elemente [27.12.2025 00:36] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1it-themen:webdesign:html:elemente [27.12.2025 00:36] (aktuell) – ↷ Seite von webdesign:html:webdesign:html:elemente nach it-themen:webdesign:html:elemente verschoben lars
Zeile 1: Zeile 1:
 +[[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.**
 +
 +
 +---