====== HTML Cheatsheet & Dokumentation ======

Diese Dokumentation bietet eine strukturierte Übersicht der wichtigsten HTML-Elemente, Formularfelder, Tabellen und Attribute basierend auf dem Referenzblatt.

===== 1. Grundstruktur & Textauszeichnung =====

==== Basis-Tags ====
  * **<html></html>:** Erstellt das HTML-Dokument[cite: 16].
  * **<head></head>:** Enthält Titel und Metadaten, die nicht im Inhalt angezeigt werden[cite: 16].
  * **<body></body>:** Enthält den sichtbaren Teil des Dokuments[cite: 16].
  * **<title></title>:** Legt den Namen des Dokuments in der Titelleiste/Lesezeichen fest[cite: 16].

==== Textformatierung ====
  * **<h1></h1> bis <h6></h6>:** Erstellt Überschriften (H1 = am größten, H6 = am kleinsten)[cite: 16].
  * **<strong></strong>:** Starke Betonung (wird fett dargestellt, bevorzugt gegenüber ''<b>'')[cite: 16].
  * **<em></em>:** Betonung (wird kursiv dargestellt, bevorzugt gegenüber ''<i>'')[cite: 16].
  * **<code></code>:** Stellt Quellcode dar (in Monospace-Schrift)[cite: 16].
  * **<pre></pre>:** Erzeugt vorformatierten Text[cite: 16].
  * **<p></p>:** Erstellt einen neuen Absatz[cite: 16].
  * **<br>:** Fügt einen Zeilenumbruch ein[cite: 16].
  * **<blockquote></blockquote>:** Rücken Inhalt als Zitat von beiden Seiten ein[cite: 16].

==== Block- & Inline-Container ====
  * **<div></div>:** Block-Element zur Formatierung von Inhalten mittels CSS[cite: 16].
  * **<span></span>:** Inline-Element zur Formatierung von Fließtext mittels CSS[cite: 16].

===== 2. Links, Grafiken & Listen =====

==== Hyperlinks & Anker ====
  * **<a href="URL">Titel</a>:** Erstellt einen Link zu einer URL[cite: 16].
  * **<a href="mailto:E-MAIL">Text</a>:** Erstellt einen E-Mail-Link[cite: 16].
  * **<a name="NAME">:** Definiert ein Sprungziel (Anker) innerhalb des Dokuments[cite: 16].
  * **<a href="#NAME">Text</a>:** Verlinkt auf das entsprechende Sprungziel[cite: 16].

==== Grafische Elemente ====
  * **<img src="URL" alt="Text" />:** Bindet ein Bild ein. Das ''alt''-Attribut liefert den Alternativtext[cite: 16].
  * **<hr>:** Fügt eine horizontale Trennlinie ein[cite: 16].

==== Listen ====
  * **<ul></ul>:** Unsortierte Liste (Bullet Points)[cite: 16].
  * **<ol start="1"></ol>:** Nummerierte (sortierte) Liste[cite: 16].
  * **<li></li>:** Einzelnes Listenelement[cite: 16].
  * **<dl></dl> / <dt> / <dd>:** Definitionsliste mit Begriff (dt) und Beschreibung (dd)[cite: 16].

===== 3. Formulare & Eingabefelder =====

Alle Formularelemente werden innerhalb von ''<form></form>'' platziert[cite: 16].

==== Standard-Formularelemente ====
  * **<input type="text" name="name" size="20">:** Einzeiliges Textfeld[cite: 16].
  * **<input type="checkbox" name="name" value="val">:** Kontrollkästchen (mit ''checked'' vorausgewählt)[cite: 16].
  * **<input type="radio" name="gruppe" value="val">:** Radiobutton zur Einzelauswahl[cite: 16].
  * **<textarea name="text" cols="30" rows="10"></textarea>:** Mehrzeiliges Textfeld[cite: 16].
  * **<select name="auswahl"><option>Option 1</option></select>:** Dropdown-Menü[cite: 16].
  * **<input type="submit" value="Senden">:** Absende-Button[cite: 16].
  * **<input type="reset">:** Zurücksetzen-Button[cite: 16].

==== HTML5-Spezifische Input-Typen ====
Moderne Eingabefelder bieten eingebaute Validierung und mobile Tastatur-Layouts[cite: 16]:

^ Typ ^ Tag-Beispiel ^ Beschreibung ^
| **E-Mail** | ''<input type="email" name="email">'' | Textfeld für E-Mail-Adressen[cite: 16] |
| **URL** | ''<input type="url" name="website">'' | Textfeld für Webadressen[cite: 16] |
| **Zahl** | ''<input type="number" name="anzahl">'' | Textfeld zur Eingabe von Zahlen[cite: 16] |
| **Schieberegler** | ''<input type="range" name="bereich">'' | Regler für Nummern-Bereiche[cite: 16] |
| **Datum / Zeit** | ''<input type="date" name="datum">'' | Kalenderauswahl für Datum/Zeit/Woche[cite: 16] |
| **Farbe** | ''<input type="color" name="farbe">'' | Farbauswahl (Colorpicker)[cite: 16] |
| **Suche** | ''<input type="search" name="suche">'' | Suchfeld[cite: 16] |

===== 4. Tabellen =====

<note warning>
Tabellen sollten nur zur Darstellung von strukturierten Daten und nicht für das Seiten-Layout verwendet werden[cite: 16].
</note>

<code html>
<table>
  <tr>
    <th>Header Spalte 1</th>
    <th>Header Spalte 2</th>
  </tr>
  <tr>
    <td>Daten Zelle 1</td>
    <td>Daten Zelle 2</td>
  </tr>
</table>
</code>

==== Tabellen-Eigenschaften ====
  * **<table>:** Erstellt die Tabelle[cite: 16].
  * **<tr>:** Definiert eine Tabellenzeile[cite: 16].
  * **<td>:** Definiert eine Datenzelle[cite: 16].
  * **<th>:** Definiert eine Kopfzelle (fett und zentriert)[cite: 16].
  * **rowspan="x":** Dehnt eine Zelle über mehrere Zeilen aus[cite: 16].
  * **colspan="x":** Dehnt eine Zelle über mehrere Spalten aus[cite: 16].

{{ :html_cheatsheet.pdf |}}