HTML Referenz - Schnellübersicht aller Tags
Dein komplettes Nachschlagewerk für HTML! Alle wichtigen Tags mit Beispielen zum schnellen Nachschlagen.
💡 Tipp: Nutze Strg+F / Cmd+F um nach einem bestimmten Tag zu suchen!
Die Grundstruktur
Jede HTML-Seite beginnt mit dieser Grundstruktur:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine erste Website</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Das ist meine erste HTML-Seite.</p>
</body>
</html>Erklärung:
<!DOCTYPE html>- Sagt dem Browser: "Das ist HTML5"<html>- Das Wurzelelement<head>- Meta-Informationen (nicht sichtbar)<body>- Hier kommt der sichtbare Inhalt
Überschriften (h1-h6)
HTML hat 6 Überschriften-Ebenen:
<h1>Hauptüberschrift (h1)</h1>
<h2>Unterüberschrift (h2)</h2>
<h3>Ebene 3 (h3)</h3>
<h4>Ebene 4 (h4)</h4>
<h5>Ebene 5 (h5)</h5>
<h6>Ebene 6 (h6)</h6>⚠️ Wichtig: Benutze nur EINE
<h1>pro Seite!
Text-Formatierung
<!-- Fett -->
<strong>Wichtiger Text</strong>
<b>Fetter Text</b>
<!-- Kursiv -->
<em>Betonter Text</em>
<i>Kursiver Text</i>
<!-- Weitere -->
<u>Unterstrichener Text</u>
<mark>Hervorgehobener Text</mark>
<small>Kleiner Text</small>
<del>Gelöschter Text</del>Links
<!-- Einfacher Link -->
<a href="https://google.com">Zu Google</a>
<!-- Neuer Tab -->
<a href="https://github.com" target="_blank">GitHub</a>
<!-- Email-Link -->
<a href="mailto:info@example.com">Email senden</a>Bilder
<img src="bild.jpg" alt="Beschreibung des Bildes">💡 Das
altAttribut ist Pflicht!
Listen
Ungeordnete Liste
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>Geordnete Liste
<ol>
<li>Schritt 1</li>
<li>Schritt 2</li>
<li>Schritt 3</li>
</ol>Tabellen
<table>
<thead>
<tr>
<th>Name</th>
<th>Alter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Max</td>
<td>25</td>
</tr>
</tbody>
</table>Formulare
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<textarea name="message" rows="4"></textarea>
<button type="submit">Absenden</button>
</form>Semantische Tags
<header>Kopfbereich</header>
<nav>Navigation</nav>
<main>Hauptinhalt</main>
<article>Artikel</article>
<aside>Seitenleiste</aside>
<footer>Fußbereich</footer>Tipps & Tricks
Live-Vorschau während du lernst
Nutze kostenlose Online-Editoren zum Experimentieren:
- CodePen.io - Sofort-Vorschau ohne Setup
- JSFiddle - Teile Code mit anderen
- VS Code Live Server Extension - Automatisches Reload bei Änderungen
Einfach Code eintippen und sofort sehen was passiert!
Browser DevTools Konsole
Drücke F12 in jedem Browser und wechsle zum "Elements" Tab. Dort kannst du:
- HTML live bearbeiten und Änderungen sofort sehen
- Elemente verschieben per Drag & Drop
- CSS temporär testen
Perfekt zum Experimentieren ohne Dateien zu ändern!
HTML Validierung für fehlerfreien Code
Nutze den W3C Validator (validator.w3.org):
- Füge deinen Code ein
- Prüfen lassen
- Fehler korrigieren
Besonders wichtig vor dem Go-Live einer Website. Valides HTML = bessere Browser-Kompatibilität.
Emmet für schnelleren Code
Alle modernen Editoren unterstützen Emmet. Beispiele:
!+ Tab = Komplettes HTML5-Gerüstdiv.container=<div class="container"></div>ul>li*3= Liste mit 3 Items
Lerne 5 Emmet-Shortcuts und spare täglich 30 Minuten Tipparbeit.
HTML5 Boilerplate als Startpunkt
Starte neue Projekte mit HTML5 Boilerplate (html5boilerplate.com):
- Bereits optimiert für Performance
- Browser-Kompatibilität eingebaut
- Best Practices vorinstalliert
Kopiere das Template und passe es an deine Bedürfnisse an.
Zusammenfassung
Du hast gelernt: ✅ HTML-Grundstruktur ✅ Überschriften ✅ Text-Formatierung ✅ Links & Bilder ✅ Listen & Tabellen ✅ Formulare ✅ Semantische Tags
Nächster Schritt: Lerne CSS um deine HTML-Seiten zu stylen!
Gut gemacht! 🎉
Du hast "HTML Referenz - Schnellübersicht aller Tags" abgeschlossen
Artikel bewerten
Bitte einloggen um zu bewerten
Das könnte dich auch interessieren
Das <a> Element - Links und Navigation
Vollständige Referenz zum HTML <a> (Anchor) Element: Attribute, Link-Typen, Sicherheit, Accessibility und Best Practices
Das <button> Element - Interaktive Schaltflächen
Vollständige Referenz zum HTML <button> Element: Typen, Attribute, States, Accessibility, Button vs Link und Best Practices
Das <div> Element - Container für Block-Inhalte
Vollständige Referenz zum HTML <div> Element: Syntax, Attribute, Default-Styling, Best Practices und praktische Beispiele