Alle HTML-Elemente

Seit HTML5: mehr Struktur

HTML-Elemente wie header, footer, article und section treten der Flut der div-Tags mitsamt ihren unzähligen CSS-Klassen in Webseiten gegenüber. Und da HTML-Elemente für die Struktur und nicht für die Darstellung verantwortlich sind, stellt sich die Frage nach der Unterstützung durch alte Browser nicht.

Frontend-Entwickler behalten einen besseren Überblick über den Aufbau der Seite. Die Semantik der HTML-Elemente erleichtert Suchmaschinen die Zuordnung der Webseite zu einem Thema.

HTML-Tags im head-Element

HTML und Metadaten
!DOCTYPE	kein HTML-Element im strengen Sinne, sondern die Information für die Browser, um welche HTML-Version es sich bei der aktuellen Webseite handelt.
html	Kennzeichnet das Dokument als html-Dokument
head	Informationen, die nicht im Browserfenster dargestellt werden
title	Seitentitel, erscheint im Navigationsfeld der Browser und wird im Index der Suchmaschinen übernommen
base	Basis-URL einer Webseite
link	erzeugt einen Link zwischen dem aktuellen und einem verwandten Dokument, z.B. für eine CSS-Datei
meta	Informationen, die nicht im Browserfenster dargestellt werden
style	Globale CSS-Stile, die innerhalb des Dokuments gelten

Seitenbereiche festlegen

Sections
body	Vom Browser darstellbare Inhalte
article	Inhalte, die unabhängig für sich allein stehen können
section	Unterteilt den Inhalt in Abschnitte, i.d.R. mit eigenem header und footer
nav	Haupt-Navigation mit Links zu anderen Seiten der Webseite
aside	Inhalte, die nicht zu den Hauptinhalten einer Seite zählen
h1, h2, h3, h4, h5, h6	Überschriften
header	Einleitung des Dokuments
footer	Informationen im Fuß eines Artikels oder Beitrags
address	Kontaktinformationen für den Autor bzw. Inhaber der Seite

Struktur reinbringen

Inhalt gruppieren
main	Hauptinhalt der Seite oder der Anwendung
div	Behälter ohne eigene Eigenschaften
p	Textabsatz
hr	Horizontale Linie
pre	Formatierter Text
blockquote	Zitat
ol	geordnete Liste
ul	Ungeordnete Liste
li	Listenelement
menu	Alternative zum ul-Element für eine ungeordnete Liste von Anweisungen (Toolbar oder Werkzeugleiste)
dl	Beginn einer Definitionsliste
dt	Begriff in einer Definitionsliste
dd	Erklärung in einer Definitionsliste
figure	Container für Bilder, Grafik und Abbildungen
figcaption	Bildunterschrift, Marginale, Erklärungen zum Inhalt des figure-Elements

Dem Text eine Bedeutung geben

Semantische Elemente für Text
a	Anker oder Hyperlink: Was zwischen öffnendem und schließendem a-Tag sitzt, wird zu einem klickbaren Link
em / i / strong / b	leichte Betonung, starke Betonung
small	kleiner Text
cite	Kurzes Zitat
q	Hochkommas / Anführungszeichen
dfn	Definition
abbr	Abkürzung
data	Für Inhalte mit maschinenlesbarer Version im value-Attribut des öffnenden data-Tags
time	Datums- und Zeitangabe mit maschinenlesbarer Version im datetime-Attibut
code	Darstellung von Computer-Code
var	Darstellung als Variable in einem Programm
samp	Darstellung als Computercode
kbd	Darstellung für Tastatureingaben
sub / sup	tiefgestellter und hochgestellter Text
u	Text stylistisch (z.B. als falsche Rechtschreibung) absetzen
mark	Hebt einen Text gelb hinterlegt hervor
details	umschließt ein Detail oder Informationen, die der Benutzer einsehen oder verbergen kann – ein Klappmenü
ruby / rt / rp / rb / rtc	Anmerkungen zur Aussprache / Erklärung in asiatischen Texten.
bdi	Laufrichtung der Schrift innerhalb eines Absatzes
bdo	Laufrichtung der Schrift
span	Generischer Behälter für Inline-Inhalte
br	Neue Zeile
wbr	Zeilenumbruch möglich

Bearbeiten von Dokumenten
del	Darstellung als gelöschter Text
ins	Darstellung als eingefügter Text
s	Nachfolger des veralteten strike-Elements. Heute mit der Bedeutung: nicht länger relevant oder gültig

Bilder, Grafiken und Video

Medien einbetten
img	Bild
picture	Alternative Bildformate
source	Verweis auf die Mediendateien eines video- bzw. audio-Elements
iframe	Fenster in ein anderes Dokument
embed	Einbetten von nicht-HTML-Inhalten über Plugins
object	Spielt extern gespeicherte Medien in die Webseite
param	Steueranweisungen für extern gespeicherte Medien
video	bettet Video in eine Webseite ein
audio	bettet Audio in eine Webseite ein
track	Externe Spuren z.B. Untertitel für Video und Audio, Transcriptionen (Mitschriften) und Übersetzungen
area map	Bereiche einer Imagemap
svg	Bettet SVG-Grafik in HTML-Dokumente ein
math	Bettet Formeln in HTML-Dokumente ein

Tabellen

table	Tabelle
caption	Kurzbeschreibung einer Tabelle
col	Tabellenspalte
colgroup	Tabellenspaltengruppe
tbody	Körper einer Tabelle
thead	Tabellenkopf
tfoot	Tabellenfuß
td	Tabellenzelle
th	Kopfzelle einer Tabelle
tr	Tabellenreihe

Formulare

form	Behälter für ein Formular
fieldset	Behälter für Formularinhalte
label	Beschriftung eines Formularelements
legend	Beschriftung eines Formularbereichs
input	Eingabefeld
datalist	Eingabefeld
button	Schaltfläche
select	Behälter für eine Auswahlliste
option	Option einer Auswahlliste
optgroup	Optionsgruppe in einer Auswahlliste
textarea	Eingabefeld für lange Texte
output	Ausgabe einer Berechnung, die durch ein Script erzeugt wurde (z.B. aktueller Wert des range-Sliders)
progress	Fortschrittsbalken
meter	Wert innerhalb eines bestimmten Bereichs

Scripte und interaktive Elemente

Script
script	Aufruf eines Scripts
noscript	Altervativer Inhalt für Browser ohne Scriptunterstützung
canvas	erzeugt eine Zeichenfläche, die von Javascript mit Bildern gefüllt wird.
template	Das HTML template-Element ist für Javascript gedacht und fügt Struktur und Inhalt on the fly ein.

Interaktiv
details	Zusätzliche Informationen, die der Benutzer sehen und verbergen kann
summary	Klickbare Überschrift für details
dialog	Öffnet eine Overlay oder modales Fenster

custom elements – Benutzerdefinierte HTML-Elemente

Daneben spricht nichts dagegen, eigene Elemente zu definieren: HTML Custom Elements oder benutzerdefinierte Elemente sind HTML-Elemente mit einem eigenen Namen. Wichtig ist erst einmal, dass die Namen der selbstdefinierten Elemente mit einem Bindestrich geschrieben werden.

<flex-box>
	<flex-item></flex-item>
	<flex-item></flex-item>
	<flex-item></flex-item>
</flex-box>

Custom Elements sind Elemente ohne Eigenschaft – sie erben keine Vorgaben wie margin oder width. Sie lassen sich mit CSS stylen und mit Javascript ansprechen. Ein klug vergebener Name hebt sie von ihrer Umgebung ab, so dass Blöcke wie z.B. eine Flexbox direkt in das Markup geschoben werden kann. Sie kapseln Struktur, Aussehen und auch Verhalten mit Javascript von ihrer Umgebung ab.

Custom Elements sind Teil der Web Components.

Ausgestorbene Elemente

Die folgenden Elemente aus alten HTML-Versionen sind nicht mehr vertreten und gelten als veraltet, unerwünscht oder missbilligt.

Ausgestorben
acronym	Alternative Bezeichnung
big	großer Text
tt	Darstellung als Teletext
frameset	Kennzeichnet ein Dokument als Frameset
frame	einzelner Rahmen
noframes	Inhalte für Browser, die keine Frames darstellen
bb	Browser Button, kam kurzzeitig in HTML und verschwand wieder
marquee	erzeugt ein scrollendes Banner
hgroup	kam kurzzeitig in HTML und verschwand wieder
command	kam kurzzeitig in HTML, wurde von den Browsern nicht implementiert und verschwand wieder aus der Spezifikation