Ratgeber: "HTML5" HTML5: Quick Reference Guide
© Archiv
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
- Internet und Telefon: 15 Tricks für Fritz!Box-Besitzer
- Ratgeber: Mehr aus der Fritz!Box machen
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.
© Internet Magazin
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 |
| 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 |