Alle HTML-Elemente

HTML-Tags mit Kurzbeschreibung

Die Liste der HTML-Elemente mit Kurzbeschreibung hilft beim Aufbau und der Pflege von Webseiten: Immer wieder entstehen neue HTML-Tags und alte fallen aus dem Standard. Elemente wie main, article und section vereinfachen Aufbau und Pflege, Elemente wie picture sind für responsive Webseiten gedacht, svg und canvas für Grafiken.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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
!DOCTYPEkein HTML-Element im strengen Sinne, sondern die Information für die Browser, um welche HTML-Version es sich bei der aktuellen Webseite handelt.
htmlKennzeichnet das Dokument als html-Dokument
headInformationen, die nicht im Browserfenster dargestellt werden
titleSeitentitel, erscheint im Navigationsfeld der Browser und wird im Index der Suchmaschinen übernommen
baseBasis-URL einer Webseite
linkerzeugt einen Link zwischen dem aktuellen und einem verwandten Dokument, z.B. für eine CSS-Datei
metaInformationen, die nicht im Browserfenster dargestellt werden
styleGlobale CSS-Stile, die innerhalb des Dokuments gelten

Bereiche für den Inhalt

Sections
bodyVom Browser darstellbare Inhalte
articleInhalte, die unabhängig für sich allein stehen können
sectionUnterteilt den Inhalt in Abschnitte, i.d.R. mit eigenem header und footer
navHaupt-Navigation mit Links zu anderen Seiten der Webseite
asideInhalte, die nicht zu den Hauptinhalten einer Seite zählen
h1, h2, h3, h4, h5, h6Überschriften
headerEinleitung des Dokuments
footerInformationen im Fuß eines Artikels oder Beitrags
addressKontaktinformationen für den Autor bzw. Inhaber der Seite

Struktur reinbringen

Inhalt gruppieren
mainHauptinhalt der Seite oder der Anwendung
divBehälter ohne eigene Eigenschaften
pTextabsatz
hrHorizontale Linie
preFormatierter Text
blockquoteZitat
olgeordnete Liste
ulUngeordnete Liste
liListenelement
menuAlternative zum ul-Element für eine ungeordnete Liste von Anweisungen (Toolbar oder Werkzeugleiste)
dlBeginn einer Definitionsliste
dtBegriff in einer Definitionsliste
ddErklärung in einer Definitionsliste
figureContainer für Bilder, Grafik und Abbildungen
figcaptionBildunterschrift, Marginale, Erklärungen zum Inhalt des figure-Elements

Dem Text eine Bedeutung geben

Semantische Elemente für Text
aAnker oder Hyperlink: Was zwischen öffnendem und schließendem a-Tag sitzt, wird zu einem klickbaren Link
em / i / strong / b leichte Betonung, starke Betonung
smallkleiner Text
citeKurzes Zitat
qHochkommas / Anführungszeichen
dfnDefinition
abbrAbkürzung
dataFür Inhalte mit maschinenlesbarer Version im value-Attribut des öffnenden data-Tags
timeDatums- und Zeitangabe mit maschinenlesbarer Version im datetime-Attibut
codeDarstellung von Computer-Code
varDarstellung als Variable in einem Programm
sampDarstellung als Computercode
kbdDarstellung für Tastatureingaben
sub / suptiefgestellter und hochgestellter Text
uText stylistisch (z.B. als falsche Rechtschreibung) absetzen
markHebt einen Text gelb hinterlegt hervor
detailsumschließt ein Detail oder Informationen, die der Benutzer einsehen oder verbergen kann – ein Klappmenü
ruby / rt / rp / rb / rtcAnmerkungen zur Aussprache / Erklärung in asiatischen Texten.
bdiLaufrichtung der Schrift innerhalb eines Absatzes
bdoLaufrichtung der Schrift
spanGenerischer Behälter für Inline-Inhalte
brNeue Zeile
wbrZeilenumbruch möglich
Bearbeiten von Dokumenten
delDarstellung als gelöschter Text
insDarstellung als eingefügter Text
sNachfolger des veralteten strike-Elements. Heute mit der Bedeutung: nicht länger relevant oder gültig

Embedded: Bilder, Grafiken und Video

Medien einbetten
imgBild
pictureAlternative Bildformate
sourceVerweis auf die Mediendateien eines video- bzw. audio-Elements
iframeFenster in ein anderes Dokument
embedEinbetten von nicht-HTML-Inhalten über Plugins
objectSpielt extern gespeicherte Medien in die Webseite
paramSteueranweisungen für extern gespeicherte Medien
videobettet Video in eine Webseite ein
audiobettet Audio in eine Webseite ein
trackExterne Spuren z.B. Untertitel für Video und Audio, Transcriptionen (Mitschriften) und Übersetzungen
area mapBereiche einer Imagemap
svgBettet SVG-Grafik in HTML-Dokumente ein
mathBettet Formeln in HTML-Dokumente ein

Tabellen

tableTabelle
captionKurzbeschreibung einer Tabelle
colTabellenspalte
colgroupTabellenspaltengruppe
tbodyKörper einer Tabelle
theadTabellenkopf
tfootTabellenfuß
tdTabellenzelle
thKopfzelle einer Tabelle
trTabellenreihe

Formulare

formBehälter für ein Formular
fieldsetBehälter für Formularinhalte
labelBeschriftung eines Formularelements
legendBeschriftung eines Formularbereichs
inputEingabefeld
datalistEingabefeld
buttonSchaltfläche
selectBehälter für eine Auswahlliste
optionOption einer Auswahlliste
optgroupOptionsgruppe in einer Auswahlliste
textareaEingabefeld für lange Texte
outputAusgabe einer Berechnung, die durch ein Script erzeugt wurde (z.B. aktueller Wert des range-Sliders)
progressFortschrittsbalken
meterWert innerhalb eines bestimmten Bereichs

Scripte und interaktive Elemente

Script
scriptAufruf eines Scripts
noscriptAltervativer Inhalt für Browser ohne Scriptunterstützung
canvaserzeugt eine Zeichenfläche, die von Javascript mit Bildern gefüllt wird.
templateDas HTML template-Element ist für Javascript gedacht und fügt Struktur und Inhalt on the fly ein.
Interaktiv
detailsZusätzliche Informationen, die der Benutzer sehen und verbergen kann
summaryKlickbare Ü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
acronymAlternative Bezeichnung
biggroßer Text
ttDarstellung als Teletext
framesetKennzeichnet ein Dokument als Frameset
frameeinzelner Rahmen
noframesInhalte für Browser, die keine Frames darstellen
bbBrowser Button, kam kurzzeitig in HTML und verschwand wieder
marqueeerzeugt ein scrollendes Banner
hgroupkam kurzzeitig in HTML und verschwand wieder
commandkam kurzzeitig in HTML, wurde von den Browsern nicht implementiert und verschwand wieder aus der Spezifikation