HTML-Tag-Referenz
Die HTML-Elemente, die du am meisten nutzt, nach Zweck gruppiert. Bevorzuge wo möglich semantische Tags (wie <nav> und <article>) gegenüber generischen <div>s — sie verbessern Barrierefreiheit und SEO. Um Markup aufzuräumen, nutze den HTML-Formatierer.
Aktualisiert 2026-07-06
Dokumentstruktur
| Tag | Wofür er da ist |
|---|---|
| <html> | Wurzel des Dokuments |
| <head> | Metadaten: title, link, script (auf der Seite nicht sichtbar) |
| <body> | Der sichtbare Inhalt der Seite |
| <title> | Seitentitel (Browser-Tab, Suchergebnisse) |
| <meta> | Metadaten wie charset, viewport und description |
| <link> | Link zu einer externen Ressource, meist einem Stylesheet |
| <script> | JavaScript einbetten oder referenzieren |
| <style> | CSS in die Seite einbetten |
Text
| Tag | Wofür er da ist |
|---|---|
| <h1>–<h6> | Überschriften, wichtig bis unwichtig |
| <p> | Ein Textabsatz |
| <a> | Ein Hyperlink (nutzt href) |
| <span> | Inline-Container ohne eigene Bedeutung |
| <strong> | Wichtiger Text (standardmäßig fett) |
| <em> | Betonter Text (standardmäßig kursiv) |
| <br> | Ein Zeilenumbruch |
| <hr> | Ein thematischer Umbruch (horizontale Linie) |
| <blockquote> | Ein Blockzitat |
| <code> | Inline-Code |
| <pre> | Vorformatierter Text (behält Leerraum) |
Listen
| Tag | Wofür er da ist |
|---|---|
| <ul> | Ungeordnete (Aufzählungs-)Liste |
| <ol> | Geordnete (nummerierte) Liste |
| <li> | Ein Listenelement |
| <dl> | Beschreibungsliste (Begriff/Definition-Paare) |
Links & Medien
| Tag | Wofür er da ist |
|---|---|
| <img> | Ein Bild (nutzt src und alt) |
| <video> | Eingebettetes Video |
| <audio> | Eingebettetes Audio |
| <svg> | Inline-Vektorgrafik |
| <picture> | Responsive Bilder mit mehreren Quellen |
| <iframe> | Eine andere Seite in dieser einbetten |
Formulare
| Tag | Wofür er da ist |
|---|---|
| <form> | Ein Formular, das Eingaben sammelt und absendet |
| <input> | Eine einzeilige Eingabe (Text, Checkbox, Radio usw.) |
| <textarea> | Eine mehrzeilige Texteingabe |
| <button> | Ein anklickbarer Button |
| <select> | Eine Dropdown-Liste |
| <option> | Ein Element in einem <select> |
| <label> | Eine Beschriftung für ein Formularelement (verbessert die Barrierefreiheit) |
Tabellen
| Tag | Wofür er da ist |
|---|---|
| <table> | Eine Datentabelle |
| <tr> | Eine Tabellenzeile |
| <td> | Eine Tabellenzelle |
| <th> | Eine Kopfzelle |
| <thead> | Gruppiert die Kopfzeilen |
| <tbody> | Gruppiert die Körperzeilen |
Semantische Gliederung
| Tag | Wofür er da ist |
|---|---|
| <header> | Einleitender Inhalt für eine Seite oder einen Abschnitt |
| <nav> | Ein Block von Navigationslinks |
| <main> | Der Hauptinhalt der Seite (einer pro Seite) |
| <section> | Eine thematische Gruppierung von Inhalt |
| <article> | Eigenständiger Inhalt (ein Beitrag, eine Karte) |
| <aside> | Nebensächlicher Inhalt (eine Seitenleiste) |
| <footer> | Fußzeile für eine Seite oder einen Abschnitt |
| <figure> | Eigenständige Medien mit optionaler Bildunterschrift |
Verwandte Tools