CSS, HTML und Javascript mit {stil}

Alle HTML-Tags im Überblick

Liste aller HTML-Tags mit Kurzbeschreibung

Tag im Seitenkopf wie style, link und meta liefern Informationen für Browser und Suchmaschinen, Tags wie span und strong formatieren den Text, div gruppiert Inhalte, die neueren Tags aus HTML5 wie main und section vereinfachen den Aufbau und die Pflege von Webseiten.

Die neuen HTML-Tags treten der Flut der div-Tags mitsamt unzähligen CSS-Klassen in Webseiten gegenüber. Auch wenn sie von alten Browsern nicht unterstützt werden, können Tags wie article, section, header und footer benutzt werden. Sie lassen sich den alten Browsern problemlos beibringen.

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

HTML und Metadaten
!DOCTYPEkein HTML-Tag 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 in der oberen Browserleiste
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
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
hgroupGruppieren
headerEinleitung des Dokuments
footerInformationen im Fuß eines Artikels oder Beitrags
addressKontaktinformationen für den Autor bzw. Inhalber der Seite
Inhalt gruppieren
pTextabsatz
hrHorizontale Linie
preFormatierter Text
blockquoteZitat
olgeordnete Liste
ulUngeordnete Liste
liListenelement
dlBeginn einer Definitionsliste
dtBegriff in einer Definitionsliste
ddErklärung in einer Definitionsliste
figureContainer für Bilder, Grafik und Abbildungen
divBehälter ohne eigene Eigenschaften
mainHauptinhalt der Seite oder der Anwendung
Semantische Tags für Text
aAnker oder Hyperlink
em / i / strong / b leichte Betonung, starke Betonung
smallkleiner Text
citeKurzes Zitat
qHochkommas / Anführungszeichen
dfnDefinition
abbrAbkürzung
dataDaten mit maschinenlesbarer Version im value-Attribut
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
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-Tags. Heute mit der Bedeutung: nicht länger relevant oder gültig
Medien einbetten
imgBild
pictureAlternative Bildformate
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 Auto in eine Webseite ein
sourceVerweis auf die Mediendatein eines video- bzw. audio-Tags
trackExterne Spuren z.B. Untertitel, Transcription (Mitschriften) und Übersetzungen
area mapBereiche einer Imagemap
svgBettet SVG-Grafik in HTML-Dokumente ein
mathmlBettet Formeln in HTML-Dokumente ein
Tabellen
tableTabelle
captionKurzbeschreibung einer Tabelle
colTabellenspalte
colgroupTabellenspaltengruppe
tbodyKörper einer Tabelle
theadTabellenkopf
tbodyTabellenfuß
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
keygenErzeugt ein Paar aus öffentlichem und privaten Schlüssel; versendet den öffentlichen Schlüssel
Script
noscriptAltervativer Inhalt für Browser ohne Scriptunterstützung
scriptAufruf eines Scripts
canvaserzeugt eine Zeichenfläche, die von Javascript mit Bildern gefüllt wird.
templateDas HTML template-Tag ist für Javascript gedacht und fügt Struktur und Inhalt on the fly ein.
Interaktive Elemente
detailsZusätzliche Informationen, die der Benutzer sehen und verbergen kann
summeryKlickbare Überschrift für details
menuÄhnlich wie ul, Liste von Menüs
dialogÖffnet eine Overlay oder modales Fenster

HTML5 SHIV: Browser Support

Heute stellen alle modernen Browser Seiten mit HTML5-Tags bereits korrekt dar. Internet Explorer bis Version 8 hingegen konnte mit HTML5-Tags nichts anfangen.

Damit Webdesigner nicht 10 Jahre warten mussten, bereitet aFarkas/html5shiv das HTML5-Markup für alte Browser auf:

<script src="html5shiv.js"></script>

Der Gedanke hinter diesem Javascript: Wenn ein Element mit document.createElement("ELEM") erzeugt wird, wirkt CSS auch auf HTML-Tags, die vom Browser nicht unterstützt werden. HTML5 SHIV (oder SHIM) ist heute in Modernizr integriert.

Für viele Internet-Auftritte macht es keinen Sinn, alte Browser, die von ihren Herstellern nicht mehr unterstützt werden, mitzuziehen. Um die Seiten dennoch in IE9 und IE10 brauchbar zu halten, wird CSS möglichst sparsam für die semantischen HTML5-Tags eingesetzt.

Ausgestorbene Elemente

Die folgenden Elemente aus XHTML / HTML4 sind in HTML5 nicht mehr vertreten und gelten als 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 in HTML5 und verschwand wieder
marqueeerzeugt ein scrollendes Banner
hgroupkam in HTML5 und verschwand wieder
commandkam in HTML5, wurde von den Browsern nicht implementiert und verschwand wieder aus der Spezifikation
header nav footer article section section main nav aside aside aside aside