CSS, HTML und Javascript mit {stil}

HTML5 Tags: Webseiten strukturieren

HTML5 Tags für die Struktur und Semantik der Seiteheadernavfooterarticlesectionsectionmainnavasideasideasideaside

HTML5 tritt mit header, nav, article, aside, footer und section der Flut der div-Tags mitsamt unzähligen CSS-Klassen in Webseiten gegenüber. Die HTML5-Tags bringen mehr Struktur und Semantik in das HTML-Markup und erleichtern den Zugriff via Javascript.

Auch wenn HTML5 von alten Browsern nicht unterstützt wird, können Tags wie article, section, header und footer genutzt werden, denn sie lassen sich den alten Browsern problemlos beibringen.

Webdesigner behalten einen besseren Überblick über den Aufbau der Seite. Die Semantik in den HTML5-Tags erleichtert Suchmaschinen die Zuordnung der Webseite zu einem Thema.

HTML und Metadaten
ElementAufgabe
!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
ElementeAufgabe
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. Inhalber der Seite
Inhalt gruppieren
ElementAufgabe
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
ElementAufgabe
aAnker oder Hyperlink
em / strongleichte Betonung, starke Betonung
smallkleiner Text
sInhalt, der nicht länger korrekt oder relavant ist
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
i / b kursiver Text, fetter 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
ElementAufgabe
delDarstellung als gelöschter Text
insDarstellung als eingefügter Text
Medien einbetten
ElementAufgabe
imgBild
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
ElementAufgabe
tableTabelle
captionKurzbeschreibung einer Tabelle
colTabellenspalte
colgroupTabellenspaltengruppe
tbodyKörper einer Tabelle
theadTabellenkopf
tbodyTabellenfuß
tdTabellenzelle
thKopfzelle einer Tabelle
trTabellenreihe
Formulare
ElementAufgabe
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 z.B. durch ein Script erzeugt wurde
progressFortschrittsbalken
meterWert innerhalb eines bestimmten Bereichs
keygenErzeugt ein Paar aus öffentlichem und privaten Schlüssel; versendet den öffentlichen Schlüssel
Interaktive Elemente
ElementAufgabe
detailsZusätzliche Informationen, die der Benutzer sehen und verbergen kann
summeryÜberschrift für details
menuÄhnlich wie ul, Liste von Menüs
dialog
Script
ElementeAufgabe
noscriptAltervativer Inhalt für Browser ohne Scriptunterstützung
scriptAufruf eines Scripts
canvaserzeugt eine Zeichenfläche, die von Javascript mit Bildern gefüllt wird
templateHTML-Templates sind ein neues Tag und z.Z. nur in Chrome und Firefox implementiert.

HTML5: Browserunterstützung

Moderne Browser stellen Seiten mit diesen HTML5-Tags bereits korrekt dar.

Internet Explorer bis Version 8 hingegen kann mit HTML5-Tags nichts anfangen.

Damit wir nicht weitere 10 Jahre warten müssen, um HTML5 auszuschöpfen, bereitet das Script html5shim das HTML5-Markup für alle Versionen von IE auf:

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

Ausgestorbene Elemente

Die folgenden Elemente aus XHTML / HTML4 sind in HTML5 nicht mehr vertreten und gelten als unerwünscht oder missbilligt.

Ausgestorben
ElementAufgabe
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
81fdfb2a8e9644c9978210ce9aeb7a06