Kleine CodeCrowd von programmieren lernen

Alle HTML5-Tags

Dies ist eine Liste aller HTML5-Tags. Du kennst ja sicher bereits meine Liste der 10 wichtigsten HTML-Tags. Als Nachschlagewerk für deine tägliche Arbeit mit HTML, habe ich dir diese vollständige Liste aller weiteren Tags erstellt.

Die Aufstellung habe ich übernommen von der Open-Source-Developer-Website von Mozilla.

Das Wurzelelement
Tag Beschreibung
<html> Steht für den Wurzelknoten eines HTML- oder XHTML-Dokuments. Alle weiteren Elemente müssen Nachkommen dieses Elements sein.
Metadaten des Dokuments
Tag Beschreibung
<head> Bezeichnet eine Sammlung von Metadaten des Dokuments. Hierzu gehören auch Links zu oder Definitionen von Skripts und Stylesheets.
<title> Definiert den Titel eines Dokuments, der in der Titelzeile des Browsers im Tab der betreffenden Seite angezeigt wird. Darf ausschließlich Text enthalten. Eventuell enthaltene Tags werden nicht interpretiert.
<base> Definiert den Basis-URL für in der Seite verwendete relative URLs.
<link> Wird verwendet, um externe JavaScript- und CSS-Dateien in das aktuelle HTML-Dokument einzubinden.
<meta> Wird für die Definition von Metadaten verwenden, die mit keinem anderen HTML-Element definiert werden können.
<style> Tag für die Definition eines internen CSS-Stylesheets.
Skripting
Tag Beschreibung
<script> Definiert entweder ein internes Skript oder einen Link auf ein externes Skript. Als Programmiersprache wird JavaScript verwendet.
<noscript> Definiert alternative Inhalte, die angezeigt werden sollen, wenn der Browser kein Skripting unterstützt.
Abschnitte (Sections)
Tag Beschreibung
<body>
Steht für den Hauptinhalt eines HTML-Dokuments. Jedes Dokument kann nur ein <body>-Element enthalten.
<section> Beschreibt einen Abschnitt eines Dokuments.
<nav> Beschreibt einen Abschnitt der ausschließlich Navigationslinks enthält.
<article> Beschreibt eigenständigen Inhalt, der unabhängig von den übrigen Inhalten sein kann.
<aside> Steht für eine Randbemerkung. Der übrige Inhalt sollte auch verständlich sein, wenn dieses Element entfernt wird.
<h1>- Hiermit werden Überschriften definiert. Es gibt sechs verschiedene Hierarchieebenen, wobei für die Hauptüberschrift steht und <h6> für eine Überschrift der untersten Ebene. Eine Überschrift beschreibt knapp das Thema des Abschnitts, dem sie voransteht.
<header> Definiert den Kopfteil („header“) einer Seite oder eines Abschnitts. Er enthält oft ein Logo, den Titel der Website und die Seitennavigation.
<footer> Definiert den Fußteil („footer“) einer Seite oder eines Abschnitts. Er enthält oft Copyright-Hinweise, einen Link auf das Impressum oder Kontaktadressen.
<address> Definiert einen Abschnitt mit Kontaktinformationen.
<main> Definiert den Hauptinhalt der Seite. Es ist nur ein
Element pro Seite zulässig.
Inhalte gruppieren
Tag Beschreibung
<p> Der Inhalt dieses Elements soll als Absatz dargestellt werden.
<hr> Bezeichnet einen thematischen Bruch zwischen Absätzen eines Abschnitts, Artikels oder anderem längeren Inhalt.
<pre> Zeigt an, das der Inhalt dieses Elements vorformatiert ist und das dieses Format erhalten bleiben soll.
<blockquote> Kennzeichnet ein Zitat.
<ol> Definiert eine geordnete Liste, bei der die Einträge eine bestimmte Reihenfolge haben müssen.
<ul> Definiert eine Liste ungeordneter Einträge.
<li> Kennzeichnet einen Listeneintrag. Diesem wird oftmals ein Aufzählungszeichen („bullet“) vorangestellt.
<dl> Kennzeichnet eine Definitionsliste aus Begriffen und den dazugehörigen Definitionen.
<dt> Kennzeichnet einen Begriff der im folgenden <dd>-Element beschrieben wird.
<dd> Markiert die Definition des oder der Begriffe, die in den direkt vorangehenden <dt>-Element angegeben wurden.
<figure> Kennzeichnet eine Abbildung, die einen Teil des Dokuments illustriert.
<figcaption> Bezeichnet die Beschriftung einer Abbildung.
<div> Bezeichnet ein allgemeines Container-Element ohne spezielle semantische Bedeutung. Wird oft zusammen mit class– oder id-Attributen verwendet, um es in Skripts oder Stylesheets auswählen zu können.
Semantische Text-Elemente
Tag Beschreibung
<a> Bezeichnet einen Hyperlink, der auf eine andere Ressource verweist (angegeben durch das href-Attribut).
<em> Steht für hervorgehobenenText.
<strong> Markiert besonders wichtigen (stark hervorgehobenen) Text.
<small> Steht für das „Kleingedruckte“ eines Dokuments, wie Ausschlussklauseln, Copyright-Hinweise oder andere Dinge, die für das Verständnis des Dokuments nicht unbedingt nötig sind.
<s> Wird für Inhalte verwendet, die nicht länger relevant oder akkurat sind. Wird meist durchgestrichen dargestellt.
<cite> Steht für den Titel eines Werks.
<q> Bezeichnet ein Kurzzitat. Für längere Zitate sollte <blockquote> verwendet werden.
<dfn> Steht für einen Begriff, dessen Definition im nächstgelegenen Nachkommen-Element enthalten ist.
<abbr> Bezeichnet eine Abkürzung oder ein Akronym.
<data> Verbindet seinen Inhalt mit einem maschinenlesbaren Equivalent, angegeben im value-Attribut. (Dieses Element wird nur in der WHATWG-Version des HTML-Standards definiert, nicht aber in der W3C-Version von HTML5).
<time> Steht für einen Wert, der Datum und Uhrzeit angibt.
<code> Wird verwendet, um Programmiercode zu markieren.
<var> Steht für eine Variable. Dies kann ein tatsächlicher mathematischer Ausdruck oder Programmierungskontext sein, ein Identifier für eine Konstante, ein Symbol für eine physikalische Größe, ein Funktionsparameter oder einfach ein Platzhalter.
<samp> Markiert die Ausgabe eines Programms oder eines Computers.
<kbd> Steht für eine Benutzereingabe, oftmals, aber nicht unbedingt, auf der Tastatur. Kann auch für andere Eingaben, beispielsweise transkribierte Sprachbefehle stehen.
<sub><sup> Markiert tiefgestellten, bzw. hochgestellten Text.
<i> Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise kursiv dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise eine taxonomische Bezeichnung, ein technischer Begriff, ein idiomatischer Ausdruck, ein Gedanke oder der Name eines Schiffes sein.
<b> Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise fettgedruckt dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies kann beispielsweise ein Schlüsselwort oder ein Produktname in einer Produktbewertung sein.
<u> Steht für einen Textabschnitt, der vom übrigen Inhalt abgesetzt und üblicherweise unterstrichen dargestellt wird, ohne für eine spezielle Betonung oder Wichtigkeit zu stehen. Dies könnte beispielsweise ein Eigenname auf in chinesischer Sprache sein oder ein Textabschnitt, der häufig falsch buchstabiert wird.
<mark> Steht für Text, der aus Referenzgründen hervorgehoben wird, d.h. der in anderem Kontext von Bedeutung ist.
<ruby> Bezeichnet einen Textteil mit Ruby-Annotationen. Dies sind kurze Aussprachetipps und andere Hinweise, die hauptsächlich für ostasiatische Tyopgrafie verwendet werden.
<rt> Bezeichnet den Text einer Ruby-Annotation.
<rp> Wird zusammen mit dem Element verwendet, um Ruby-Text mit Klammern zu umgeben, die angezeigt werden, wenn das Benutzerprogramm (Browser) keine Ruby-Annotationen unterstützt.
<bdi> Markiert Text, der vom umgebenden Inhalt zum Zweck der bidirektionalen Formatierung (z.B. arabischer Text innerhalb von deutschsprachigen Inhalten) isoliert werden soll. Hiermit kann ein Textabschnitt mit einer unterschiedlichen oder unbekannten Textrichtung gekennzeichnet werden.
<bdo> Kann verwendet werden, um die Textrichtung der enthaltenen Kindelemente zu steuern. Hiermit kann der Unicode BiDi-Algorithmus explizit überschrieben werden.
<span> Markiert einen allgemeinen Textabschnitt. Das -Element erhält seine Bedeutung meistens durch ein class– oder ein id-Attribut, wodurch es außerdem für Skripte zugänglich ist und von Stylesheets ausgewählt werden kann.
<br> Bezeichnet einen Zeilenumbruch.
<wbr> Hiermit kann die Gelegenheit für einen Zeilenumbruch gekennzeichnet werden, mit dem die Lesbarkeit verbessert werden kann, wenn der Text auf mehrere Zeilen verteilt wird.
Änderungen am Dokument
Tag Beschreibung
<ins> Markiert einen zum Dokument hinzugefügten Teil.
<del> Markiert einen aus dem Dokument entfernten Teil.
Eingebettete Inhalte (Ersetzte Elemente)
Tag Beschreibung
<img> Steht für ein Bild.
<iframe> Definiert einen so genannten Iframe, mit dem ein HTML-Dokument in seinem eigenen Kontext in das aktuelle Dokument eingebettet werden kann.
<embed> Steht für einen Einbindungspunkt für externe Ressourcen. Dies sind typischerweise keine HTML-Inhalte, sondern beispielsweise eine Applikation oder interaktiver Inhalt, der mit Hilfe eines Plugins (anstatt nativ durch das Benutzerprogramms) dargestellt wird.
<object> Steht für allgemeinen externen Inhalt, der je nach Kontext als Bild, „verschachtelter Browsing-Kontext“ (s. iframe), oder externer Inhalt (der mit Hilfe eines Plugins darsgestellt wird) betrachtet wird.
<param> Definiert Parameter für ein Plugin, das für die Darstellung eines mit <object> eingebundenen Elements verwendet werden.
<video> Steht für eine Videodatei und die dazugehörigen Audiodateien, sowie die für das Abspielen nötigen Kontrollelemente.
<audio> Markiert eine Tondatei oder einen Audiostream.
<source> Ermöglicht es Autoren, alternative Medienressourcen (z.B. verschiedene Audio- oder Videoformate) für Medienelemente wie <video> oder <audio> anzugeben.
<track> Hiermit können zusätzliche Medienspuren (z.B. Untertitel) für Elemente wie <video> oder <audio> angegeben werden.
<canvas> Steht für einen Bitmap-Bereich, der von Skripts verwendet werden kann, um beispielsweise Diagramme, Spielegraphiken oder andere visuellen Effekte dynamisch darzustellen.
<map> Definiert in Verbindung mit dem <area>-Element eine Image Map.
<area> Definiert in Verbindung mit dem <map>-Element eine Image Map.
<svg> Definiert eine eingebettete Vektorgrafik.
<math> Markiert eine mathematische Formel.
Tabellarische Daten
Tag Beschreibung
<table> Markiert eine Tabelle, d.h. Daten mit mehr als einer Dimension.
<caption> Kennzeichnet die Beschriftung (Titel) einer Tabelle.
<colgroup> Steht für eine Gruppe aus einer oder mehreren Tabellenspalten.
<col> Steht für eine Tabellenspalte.
<tbody> Steht für die Spalten, die die eigentlichen Daten einer Tabelle enthalten.
<thead> Markiert die Gruppe der Tabellenzeilen, die die Beschriftungen der Tabellenspalten enthalten.
<tfoot> Markiert die Gruppe der Tabellenzeilen, die die Zusammenfassungen der Tabellenspalten enthalten.
<tr> Steht für eine Zeile mit Tabellenzellen.
<td> Kennzeichnet eine einzelne Tabellenzelle.
<th> Kennzeichnet eine Tabellenzelle mit einer Beschriftung.
Formulare
Tag Beschreibung
<form> Markiert ein Formular. Formulare bestehen typischerweise aus einer Reihe von Kontrollelementen, deren Werte zur weiteren Verarbeitung an einen Server übertragen werden.
<fieldset> Steht für eine Gruppe von Kontrollelementen.
<legend> Kennzeichnet eine Beschriftung für ein <fieldset>-Element.
<label> Kennzeichnet die Beschriftung für ein Formular-Kontrollelement (z.B. Texteingabefelder).
<input> Steht für ein Feld für Benutzereingaben eines bestimmten Typs. Der Typ (Radiobutton, Ankreuzfeld, Texteingabe, etc.) wird anhand des type-Attributs angegeben.
<button> Markiert einen Button.
<select> Kennzeichnet ein Kontrollelement, mit dem aus einer Reihe von Optionen ausgewählt werden kann.
<datalist> Steht für eine Sammlung vordefinierter Optionen für andere Kontrollelemente.
<optgroup> Steht für eine Reihe logisch gruppierter Auswahloptionen.
<option> Steht für eine Auswahloption innerhalb eines <select>-Elements, oder einen Vorschlag innerhalb eines <datalist>-Elements.
<textarea> Markiert ein Element für mehrzeilige Texteingaben.
<keygen> Steht für ein Kontrollelement zur Erzeugung eines Paares aus öffentlichem und privaten Schlüssel und zum Versenden des öffentlichen Schlüssels.
<output> Markiert das Ergebnis einer Berechnung.
<progress> Ein Element zur Fortschrittsanzeige einer bestimmten Aufgabe.
<meter> Steht für eine Messskala (oder deren Teilwerte) innerhalb eines bekannten Bereichs.
Interaktive Elemente
Tag Beschreibung
<details> Markiert ein Kontrollelement, mit dem der Benutzer zusätzliche Informationen oder Kontrolle erhalten kann.
<summary> Kennzeichnet eine Zusammenfassung oder eine Legende für ein bestimmte <details>-Element.
<command> Kennzeichnet einen Befehl, der vom Benutzer aufgerufen werden kann.
<menu> Markiert eine Liste mit Befehlen

P.S. Wenn dir der Artikel gefallen hat, abonniere doch die wöchentlichen Tutorials auf YouTube, den E-Mail-Newsletter oder Beteilige dich an der Diskussion auf Facebook.

Infobox

Kommentare