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>

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

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