HTML Cheatsheet

Grundstruktur

<!DOCTYPE html> HTML5-Deklaration

<html lang="de"> Root-Element

<head>…</head> Metadaten-Bereich

<body>…</body> Sichtbarer Inhalt

<div>…</div> Block-Container

<span>…</span> Inline-Container

Semantik HTML5

<header>…</header> Kopfbereich

<nav>…</nav> Navigation

<main>…</main> Hauptinhalt

<section>…</section> Thematischer Abschnitt

<article>…</article> Eigenständiger Inhalt

<aside>…</aside> Seiteninhalt

<footer>…</footer> Fußbereich

Text & Überschriften

<h1>…<h6> Überschriften H1–H6

<p>Absatz</p> Paragraph

<strong>fett</strong> Wichtig / fett

<em>kursiv</em> Betont / kursiv

<br /> Zeilenumbruch

<hr /> Horizontale Linie

<code>inline</code> Inline-Code

<pre>…</pre> Vorformatierter Text

<blockquote>…</blockquote> Zitat-Block

Links & Anker

<a href="url">Text</a> Hyperlink

target="_blank" Neuer Tab

href="#id" Anker-Link

href="mailto:x@y.de" E-Mail-Link

href="tel:+49123" Telefon-Link

rel="noopener noreferrer" Sicherheit bei _blank

Listen

<ul><li>…</li></ul> Ungeordnete Liste

<ol><li>…</li></ol> Geordnete Liste

<ol start="5"> Startwert festlegen

<dl><dt>…<dd>…</dl> Definitionsliste

Tabellen

<table>…</table> Tabellen-Container

<thead> / <tbody> / <tfoot> Tabellenbereiche

<tr>…</tr> Tabellenzeile

<th>…</th> Kopfzelle

<td>…</td> Datenzelle

colspan="2" Spalten verbinden

rowspan="2" Zeilen verbinden

Formulare

<form action="/send" method="post"> Formular

<input type="text" name="x"> Texteingabe

type="email" | "password" | "number" Input-Typen

type="checkbox" | "radio" Auswahlfelder

type="date" | "file" | "range" Weitere Typen

<textarea rows="4"></textarea> Mehrzeiliger Text

<select><option>…</select> Dropdown

<label for="id">…</label> Label verknüpfen

<button type="submit"> Submit-Button

placeholder="…" required disabled Hilfsattribute

Medien

<img src="bild.png" alt="Text"> Bild (alt = Pflicht)

width="300" height="200" Größe angeben

loading="lazy" Lazy Loading

<video controls autoplay muted> Video-Element

<audio controls><source src="…"> Audio-Element

<iframe src="url"></iframe> Eingebetteter Frame

<canvas id="c"></canvas> Zeichenfläche (JS)

Meta & Head

<meta charset="UTF-8"> Zeichenkodierung

<meta name="viewport" content="…"> Responsive Viewport

<meta name="description" content="…"> SEO-Beschreibung

<title>Seitentitel</title> Browser-Tab-Titel

<link rel="stylesheet" href="style.css"> CSS einbinden

<script src="app.js" defer></script> JS einbinden (defer)

<link rel="icon" href="favicon.ico"> Favicon

Globale Attribute

id="name" Eindeutige ID

class="name" CSS-Klasse(n)

style="color:red" Inline-Style

data-key="wert" Custom Data-Attribut

hidden Element verstecken

tabindex="0" Fokus-Reihenfolge

aria-label="…" Barrierefreiheit

contenteditable="true" Inhalt editierbar