Menü

Ratgeber: "HTML5" HTML5: Quick Reference Guide

Die wichtigsten Tags auf einen Blick: In unserem praktischen "Cheat Sheet"-Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte auf HTML5.

HTML5: Quick Reference Guide © Archiv
Ratgeber: "HTML5"

Macht es Sinn, eine Website auf HTML5 umzustellen, obwohl der Zeitpunkt, zu dem diese Auszeichnungssprache der allgemeingültige Standard sein wird, noch in weiter Ferne liegt? Schließlich bedeutet das Upgrade je nach Größenordnung des Projektes eine Menge Arbeit, da abgesehen vom Design der gesamte Quellcode neu entwickelt werden muss. Anschließend ist man wahrscheinlich ebenso lange mit Debugging beschäftigt und weiß noch gar nicht, wie sich die Änderungen dann auf das Suchmaschinenranking auswirken.

Wir finden: Ja, es macht Sinn. Denn auch wenn HTML5 überall als heißes Zukunftsthema gehandelt und eher die theoretischen Möglichkeiten online im Gespräch sind - kein noch so informativer Artikel kann eigene praktische Erfahrungen ersetzen. HTML5 kommt in jedem Fall. Warum also mit dem Erarbeiten von erfolgreichen Vorgehensweisen bis 2014 oder später warten, wenn bereits absehbar ist, dass diese Syntax der Standard werden wird?

Was bleibt und was wird anders?

Mehr lesen

Die Syntax von HTML5 ähnelt der von HTML 4.01 sehr und unterliegt nicht so strikten Regeln wie XHTML, sondern führt diverse neue Tags ein, die zur Verbesserung der Semantik gedacht sind. Hier soll die allgemeine Verständlichkeit optimiert werden. Die Elemente section, nav, article, aside, hgroup, header und footer sollen Ihnen eine bessere Strukturierung ermöglichen.

Für den menschlichen Besucher einer Website ist es zwar bedeutungslos, ob ein Navigationselement von <div> umrandet wird oder wie unter HTML5 von <nav>, doch kann man bereits an diesem bewusst schlicht gewählten Beispiel verdeutlichen, wie viel eindeutiger die Erfassung durch Suchmaschinen möglich sein wird - und SEO ist und bleibt nun mal für jede erfolgsorientierte Website ein wichtiges Thema.

Praxis: Die besten Tipps zu mobilem HTML5

HTML5 wird parallel vom WHATWG-Gremium und der W3C-HTML-Arbeitsgruppe entwickelt. Die Semantik von HTML5 kann in totalem Widerspruch zu der von HTML 4.01 gewohnten stehen, bei der beispielsweise <h1> grundsätzlich die wichtigste aller Überschriften kennzeichnet, während in HTML5 jede "section" eine mit <h1> ausgezeichnete Überschrift beinhalten kann.

Eigentlich ganz einfach, aber …

Der Doctype ist sehr abgespeckt und schnell fällt ins Auge: Eigentlich sieht HTML5 so aus wie eine valide XHTML-Seite. Doctype austauschen und auf center, font, strike, noframes und so weiter verzichten, schon hat man eine HTML5-Seite, die in den meisten Browsern keine Probleme erzeugt - aber eben auch keine besonderen Highlights, denn es sind ja vor allem die Spezialeffekte durch neue Attribute und Elemente, die HTML5 so spannend machen.

Unter www.inmotionhosting.com/infographics/_img/html5_cheat_sheet_browser_support.png finden Sie ein Cheat Sheet für den Browsersupport von Inmotionhosting. © Internet Magazin
Unter www.inmotionhosting.com/infographics/_img/html5_cheat_sheet_browser_support.png finden Sie ein Cheat Sheet für den Browsersupport von Inmotionhosting.

Mit Unterstützung durch HTML5 lassen sich multimediale Inhalte (Audio, Video, Grafik und vieles mehr) direkt im Browser anzeigen, ohne ergänzende Technologien durch Plug-ins wie Flash, Java, Quicktime und Co. einzusetzen. Das größte Problem dabei ist, dass heute noch nicht sämtliche Browser alles können: Auf HTML5 umstellen, kann leider auch bedeuten, dass einige der schönen neuen Features noch lange nicht auf allen Plattformen fehlerfrei oder überhaupt angezeigt werden. Im besten Fall wird dann gar nichts angezeigt, im schlimmsten wimmelt es von Fehlern - ein Test mit browsershots.org oder einem anderen Prüfdienst ist also unerlässlich.

Ratgeber: So nutzen Sie HTML5-Videos richtig

Über den Twitter-Feed der WHATWG können Sie sich über die aktuellsten HTML5-Entwicklungen auf dem Laufenden halten - die Developer-Dokumentation wird akribisch und konsequent aktualisiert.

Für Ihre tägliche Arbeit

Cheat Sheets oder Quick Reference Guides sind ein bewährtes Arbeitsmittel für Webworker, weil sie alle wesentlichen Informationen auf einer einzigen Seite vereinen und für die Grundlagen und andere Infos das umständliche Nachschlagen in Wikis und Handbüchern sparen. Unser Cheat Sheet ist naturgemäß statisch, hält daher die wesentlichsten Grundlagen und Tags für Sie fest. Wir haben uns auf die wichtigsten Tags beschränkt und Basics, etwa für Tabellen und Fettdruck, wegfallen lassen. Über Ihr Feedback freuen wir uns, damit die nächsten Cheat Sheets noch besser werden.

HTML5 wird vermutlich nur HTML heißen

Unsere zweiseitige Arbeitshilfe hat einen winzigen Schönheitsfehler: HTML5 als in Entwicklung befindliche Auszeichnungssprache wird es unter diesem Namen vielleicht gar nicht geben. Denn anders als beim World Wide Web Consortium hat man bei der WHATWG festgelegt, dass die immer weiter fortgeführte Evolution eines Webstandards wie in diesem Fall bei HTML5 eben nicht durchnummeriert werden sollte wie eine von vielen Entwicklungsstufen, sondern das angestrebte Ergebnis besser einfach nur HTML heißen sollte, ohne die 5.

Das mag zwar eine sehr logische Namensvergabe sein, macht es aber nicht unbedingt übersichtlicher, das heranwachsende HTML mit den bestehenden HTML-Standards zu vergleichen. Kein Wunder also, dass man im Web grundsätzlich weiter von HTML5 spricht und damit aber wiederum teilweise sehr großzügig diverse technologische Entwicklungen und Dienste zusammenfasst.

Um Missverständnisse zu vermeiden: Unser Cheat Sheet beschäftigt sich ausdrücklich nur mit der Auszeichnungssprache als offiziellem Nachfolger von HTML 4 und nennt den sich noch immer in den Kinderschuhen befindlichen nächsten Standard durchgehend HTML5.

HTML5 von a bis z
<!--> <!--Dies ist ein Kommentar-->
<!DOCTYPE> Doctype-Deklaration für HTML5
<a> Hyperlink (href, hreflang, media, ping, rel, target, type)
<abbr> Abkürzung, engl. „abbreviation“
<address> Kontaktinformation innerhalb von <section>
<area> Bereich innerhalb Image Map (alt, coords, href, hreflang, media, ping, rel, shape, target, type)
<article> Artikel, Blog-Posting, Magazinbeitrag – umschließt Postings (cite, pubdate)
<aside> Querverweis, Randbemerkung, oft als Seitenleiste
<audio> Musikdatei/Podcast (autobuffer, autoplay, controls, src)
<base> Standalone-Tag, definiert die Basis-URL einer Webseite (href, target)
<bdi> Bi-directionale Isolation, Textteile rückwärts darstellen
<bdo> Bi-directional Override überschreibt die angegebene Textrichtung (dir)
<button> Klickbarer Button (form, autofocus, disabled, formaction, formenctype, formmethod, formnovalidate, formtarget, name, value, type)
<canvas> Mit HTML-Code definierter Bereich, in dem mit Javascript ohne Plug-ins dynamisch in 2D gezeichnet werden kann (height, width)
<caption> Tabellenüberschrift
<code> Codierter Text (autobuffer, autoplay, controls, src)
<colgroup> Definiert eine Gruppierung von <col> Tabellenspalten (span)
<command> Innerhalb von <menu>, auslösender Button (checked, disabled, icon, label, radiogroup, type)
<datalist> Dropdown-Liste
<dd> Description Definition, beschreibt Item <dt> in einer Definition List <dl>
<del> Entfernter Text (cite, datetime)
<details> Optionale zusätzliche Informationen, aber nicht Fußnoten
<dfn> Kennzeichnen einer Definition
<dialog> Zeigt einen Dialog oder eine Unterhaltung an, zum Beispiel im Forum oder Chat
<div> Bestimmt einen Abschnitt im Dokument
<dl> Definition List, siehe <dd>
<dt> Definition Term, siehe <dd> und <dl>
<em> Hervorgehobener Text
<embed> Externer Content oder ein Plug-in (height, src, type, width)
<fieldset> Fieldset (disabled, form, name)
<figcaption> Optionale Ergänzung im <figure>-Tag um Beschreibung/Unterschrift
<figure> Gruppiert ergänzende Infos wie Bilder, Filme, Quellcode
<footer> Fußnotenbereich für eine Seite, einen Artikel oder ein Dokument
<form> Formular (accept-charset, action, autocomplete, enctype, methode, name, novalidate, target)
<h1> bis <h6> Überschriften, stehen zwischen den <hgroup>-Tags
<head> Head-Container mit Meta-Informationen
<header> Header-Bereich für Seite, innerhalb <section> oder <article>
<hgroup> Gruppiert mehreren Überschriftenebenen die <h1> bis <h6>
<keygen> Generiert kryptografisches Schlüsselpaar (autofocus, challenge, disabled, form, keytype, name)
<kbd> Keyboard-Eingaben
<legend> Titel im Fieldset
<link> (href, hreflang, media, rel, sizes, type)
<map> Clientbasierte Imagemap (area, name)
<mark> Highlighter. Setzt eine gelbe Markierung, um relevanten Text hervorzuheben, zum Beispiel in Suchergebnislisten.
<menu> Nicht als Platz für das Navigationsmenü gedacht, sondern für Kontextmenüs, Dropdown-Listen in Formularen und Toolbars (label, type)
<meta> Metadaten, neu in HTML5 <meta charset="UTF-8"> (charset, content, name, http-equiv)
<meter> Größenanteile grafisch darstellen (high, low, value, min, max, optimum)
<nav> Navigationsmenü. Enthält eine Anzahl von Links/Elementen, die der Navigation innerhalb einer Site dienen
<noscript> Alternative Information bei abgeschalteten Skripten
<object> Embedded Object für Audio, Video, Java Applets, ActiveX, PDF, Flash (data, form, height, name, type, usemap, width)
<optgroup> Gruppiert Optionen einer Select-Liste in einem HTML-Formular (label, disabled)
<option> Auswahlmöglichkeit in einer Auswahlliste (disabled, label, selected, value)
<output> Bereich für dynamisch erzeugte Ausgabe (for, form, name)
<param> Parameter eines Objekts bei object-Element (name, value)
<progress> Element für Fortschrittsbalken einer Aktion, basiert auf Javascript (max, value)
<q> Wörtliche Rede
<rp> Umschließender Inhalt für Ruby-Annotationen, für Anmerkungen, wenn Ruby nicht angezeigt wird
<rt> Inhalt von Ruby-Annotationen
<ruby> Seitenbereich für Ruby-Annotationen
<samp> Beispieltext in einer Dokumentation
<script> Skriptbereich für Javascript und andere Skripte (async, type charset defer, src)
<section> Legt unterschiedliche Abschnitte – nicht <p>-Absätze, sondern Bereich – einer Seite oder eines Artikels fest, enthält Überschriften und Absätze (cite)
<select> Auswahlliste in Formular (autofocus, disabled, form, multiple, name, size)
<source> Alternative Ressourcen innerhalb audio- oder video-Element (media, src, type)
<span> Abschnitt innerhalb Absatz
<style> Bereich für Stylesheet-Definitionen, etwa in CSS (type, media, scoped)
<sub> Tiefgestellter Text
<summary> Legt eine klickbare Headline für das <details>-Element fest, die angeklickt werden kann, um die Angaben anzuzeigen oder zu verbergen.
<sup> Hochgestellter Text
<textarea> Mehrzeiliger Eingabebereich in Formular (autofocus, cols, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap)
<time> Datums- oder Zeitangaben (als erstes Element im <details>-Tag
<title> Titel eines HTML5-Dokuments
<track> Markiert Bereiche für Medieneinbettung (audio, video)
<var> Variabler Name in einem dokumentierenden Text
<video> Einbettung einer Video-Datei (autobuffer, autoplay, controls, height, loop, sec, width)
<wbr> Die Stellen eines Wortes, an denen Zeilenumbrüche stattfinden dürfen
ganze Tabelle anzeigen

Veraltete Tags (werden in HTML5 nicht mehr unterstützt)
<acronym> Akroynme unter HTML 4.01
<applet> Eingebettetes Applet
<basefont> Font Properties für alle Texte in einem Dokument
<big> Vergrößerter Text
<center> Zentrierter Text
<dir> Directory List
<font> Festlegung Schriftart, Farbe, Größe
<frame> Ein Frame in einem Frameset
<frameset> Frameset-Rahmen zur Organisation mehrerer Fenster
<noframe> Text für Browser, die keine Frames darstellen
<strike> Durchgestrichener Text
<tt> Teletype-Text
<u> Unterstrichener Text
<xmp> Vorformatierter Text
 
HTML5 Globale Attribute
accesskey Legt Keyboard Shortcut zu einem Element fest (character)
class Legt Namen einer Elementklasse im Stylesheet fest (classname)
contenteditable Legt fest, ob der User Inhalte editieren darf (true, false)
contextmenu Legt das Kontextmenü für ein Element fest (menu_id)
dir Legt Textrichtung fest (tr, rt)
draggable Legt fest, ob ein User ein Element verschieben darf
dropzone Legt fest, was mit den verschobenen Daten passiert (copy, move, link)
hidden Legt nicht relevante Elemente fest
id Legt einzigartige ID für ein Element fest
lang Legt Sprache für Inhalte fest (language_code)
spellcheck Legt fest, ob die Rechtschreibung geprüft werden muss (true, false)
style Legt Inline-Style für ein Element fest (style_definition)
tabindex Legt die Tab-Anordnung eines Elements fest (number)
 
HTML5 Ereignis-Attribute (Window)
onafterprint Ausführen nach dem Druck eines Dokuments
onbeforeprint Ausführen vor dem Druck
onbeforeonload Ausführen, bevor das Dokument geladen wird
onerror Ausführen, wenn ein Fehler auftritt
onhaschange Ausführen bei Veränderungen im Dokument
onmessage Ausführen bei neuer Nachricht
onoffline Ausführen, wenn Dokument offline geht
ononline Ausführen, wenn Dokument online geht
onpagehide Ausführen, wenn ein Fenster versteckt wird (hidden)
onpageshow Ausführen, wenn ein Fenster sichtbar wird
onpopstate Ausführen, wenn die History des Windows sich ändert
onredo Ausführen, wenn das Dokument neu aufgebaut wird
onresize Ausführen, wenn die Fenstergröße geändert wird
onstorage Ausführen, wenn ein Dokument lädt
onundo Ausführen, wenn Events rückgängig gemacht werden
onload Ausführen, wenn ein User das Dokument lädt
onunload Ausführen, wenn der User das Dokument verlässt
 
HTML5 Ereignis-Attribute (Form)
onchange Ausführen bei Änderungen eines Elements
oncontextmenu Ausführen wenn ein Context-Menü angesprochen wird
onformchange Ausführen bei Formularänderung
onforminput Ausführen bei Input durch User in Formular
oninput Ausführen bei Input durch User für Element
oninvalid Ausführen bei ungültigen Elementen
onselect Ausführen wenn Element gewählt wird
onsubmit Ausführen wenn ein Formular abgeschickt wird
 
HTML5 Ereignis-Attribute (Eingaben Tastatur/Maus)
onclick Ausführen bei Mausklick
ondblclick Ausführen bei doppeltem Mausklick
ondrag Ausführen wenn ein Element verschoben wird
ondragend Ausführen am Ende des Verschiebens
ondragenter Ausführen wenn ein Element ans Ziel verschoben wird
ondragleave Ausführen wenn ein Element auf einem validen Ziel abgelegt wurde
ondragover Ausführen, während ein Element auf ein Ziel verschoben wird
ondragstart Ausführen zum Start des Verschiebens
ondrop Ausführen, wenn verschobenes Element am Ziel ankommt
onmousewheel Ausführen, wenn das Mausrad betätigt wird
onkeydown Ausführen bei Tastenbetätigung
onkeypress Ausführen bei festgehaltener und wieder losgelassener Taste
onkeyup Ausführen beim Loslassen einer Taste
onmousedown Ausführen bei gedrückter Maustaste
onmousemove Ausführen bei Cursorbewegung durch Maus
onmouseout Ausführen, wenn der Cursor ein Element verlässt
onmouseover Ausführen, während der Cursor über ein Element geführt wird
onmouseup Ausführen, wenn der Mausbutton losgelassen wird
onscroll Ausführen, wenn die Scrollbar eines Elements gescrollt wird
 
HTML5 Ereignis-Attribute (Media)
oncanplay Ausführen, wenn Medien abgespielt werden sollen
oncanplaythrough Ausführen, um Medien ganz abzuspielen
ondurationchange Ausführen, wenn die Spiellänge geändert wird
onemptied Ausführen, wenn eine Medienressource geleert wird
onended Ausführen, wenn Abspielen beendet
onerror Ausführen bei Fehler während des Abspielens
onloadeddata Ausführen, sobald Medien geladen
onloadedmetadata Ausführen, wenn die Zeitdauer eines Medienelements vorgeladen wurde
onloadstart Ausführen, wenn der Browser mit dem Abspielen beginnt
onpause Ausführen, wenn Medienelement pausiert wird
onplay Ausführen bei Start Abspielen Medienelement
onplaying Ausführen, während Medienelement abgespielt wird
onprogress Ausführen, während Browser Mediendaten lädt
onratechange Ausführen, wenn Abspielgeschwindigkeit verändert
onreadystatechange Ausführen, wenn Bereitschaftszustand geändert
onseeked Ausführen, wenn Suchattribute eines Elements nicht zutreffend
onseeking Ausführen, wenn Suchattribute eines Elements zutreffend
onstalled Ausführen bei Fehler während Bereitstellung Mediendaten
onsuspend Ausführen, wenn Bereitstellung gestoppt
onvolumechange Ausführen bei Lautstärkenänderung oder Stummstellen
onwaiting Ausführen, wenn Medienwiedergabe gestoppt
ganze Tabelle anzeigen

 
Anzeige
Anzeige
x