Neues in HTML5
Geschichte von HTML5
Das W3C sah die Zukunft für HTML in XHTML2. Es wollte ein XHTML2, das ähnlich wie XML kaum fehlertolerant ist und bei kleinsten Fehlern das Rendering der Page abbricht. Man spricht in solchen Zusammenhängen von drakonischer Fehlerbehandlung (draconian error handling).
2004 bildete sich eine Arbeitsgruppe zwischen Opera Software ASA und der Mozilla Foundation, die einen eigenen Entwurf entwickelte. Die Arbeitsgruppe nennt sich Web Hypertext Application Technology Working Group (WHATWG). Die WHATWG störte sich daran, dass das W3C durch den akademischen Hintergrund viel zu lange für Weiterentwicklungen brauchte und wollte eine fehlertolerantere Interpretation.
Die WHATWG stellte 2004 ihr Konzept dem W3C vor. Das Konzept der WHATWG folgte diesen Zielvorgaben:
- Stark fehlertolerant: Wenn der Browser etwas nicht versteht, soll er es einfach übersehen und die Seite weiterrendern
- Die Technologie soll abwärts kompatibel sein
- Das Markup wird mehr Scripting-Eigenschaften erhalten
- Der praktische Nutzen wird priorisiert
- Die Spezifikation ist Geräte-unabhängig
- Die Weiterentwicklung wird in einem offenen Prozess erfolgen
Die Browserhersteller hatte Probleme damit, dass durch die Lesart der Weiterentwicklung des W3C alte Webseiten nicht mehr funktionieren würden. Andererseits konnte das W3C vor allem nichts damit anfangen, dass HTML Applikationsnähe bekommen sollte.
Das W3C lehnte den Entwurf ab, aber die WHATWG entwickelt ihr Konzept weiter, und nannte es „Web Applications 1.0“. In dieser Zeit gesellte sich Apple Inc. zur WHATWG.
Mit der Zeit sah die W3C ein, dass sie mit ihrem Ansatz nicht weiterkam und entschied 2006 ihre eigene Linie aufzugeben und auf der bisherigen Arbeit der WHATWG aufzusetzen. Ab diesem Zeitpunkt arbeiteten beide Organisationen gemeinsam. 2 Jahre später gab das W3C sogar die Entwicklung von XHTML2 auf.
Unterschiede
Die aktuelle Fassung von HTML5 ist bei beiden Gruppen trotzdem leicht unterschiedlich. Während die WHATWG die Fassung der W3C in ihrer Dokumentation includiert, erweitert sie diese um eigene Angaben und Features.
Die Unterschiede sind:
- Ein Teil ist beim W3C schon in anderen Dokumenten definiert worden
- Canvas 2D Graphics Context
- Microdata und der Microdata Sprachumfang
- Cross-document messaging (bekannt als Communications)
- Channel messaging (auch bekannt als Communications)
- Das W3C will manche Entwicklungen erst in späteren Versionen einbinden
- Das sind: das „device“-Element, das „ping“-Attribut, das „time tacked“-Modell, das „WebSRT“-Format sowie die Regeln um HTML nach ATOM zu konvertieren
- Die WHATWG-Version führt auch mehr Beispiele an und gibt Tipps zur Implementierung
Was gehört nicht zur HTML5?
Folgende Features sind nicht Teil von HTML5, entweder wurden sie aus dem Vorhaben gestrichen oder es wurde durch Dritte fälschlicherweise angenommen, dass sie zu HTML5 gehören werden:
- Web Workers
- Web Storage
- WebSocket API
- WebSocket protocol
- Server-sent Events
- Web SQL Database
- Media Type Sniffing
- The Web Origin Concept
- Geolocation API
- SVG
- MathML
- XMLHttpRequest
- Parts of CSS
Wann ist HTML5 einsetzbar?
Laut der WHATWG ist HTML5 fertig. Die Browser müssen nur alle Features unterstützen. Laut dem W3C wird die Entwicklung an HTML5 beendet sein, wenn beide Versionen zusammengeführt werden.
Die Unterschiede zwischen HTML 4 und HTML5?
Doctype
Man kann den MIME type eines Dokuments als text/html definieren
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>oder als application/xhtml+xml
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example document</title>
</head>
<body>
<p>Example paragraph</p>
</body>
</html>
Es reicht nun also den doctype so anzugeben:
<!doctype html>
Character encoding wird nun mit
<meta charset="UTF-8">
angegeben. Man kann aber weiterhin
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
schreiben.
Da sich HTML5 weiter von SGML wegbewegt, entfällt die Angabe einer DTD, beispielsweise
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Internationalized Resource Identifier (IRI)
HTML5 unterstützt Internationalized Resource Identifier (IRI), also die internationalisierte Form der Uniform Resource Identifier (URI), wenn das Dokument als UTF-8 oder UTF-16 ausgezeichnet wurde.
Strukturierung
Es gibt neue Elemente, die die Strukturierung eines Dokumentes erleichtern sollen:
- section: damit können Bereiche unterteilt werden
- article: repräsentieren fremden Content (Blog-Eintrag oder einen Zeitungsartikel)
- aside: Inhalte, der nur wenig Bezug zum Rest der Seite hat
- hgroup: Der Header einer Section
- header: repräsentiert Elemente, die bei Auszeichnung von Einleitungen oder der Navigation helfen können
- footer: ist der footer einer Sektion, es kann Informationen z.B. über den Autor halten
- nav: repräsentiert eine Sektion, die der Navigation dient
- figure: beschreibt Elemente, deren Fluß unterschiedliche zum Rest der Seite ist, etwa ein Video
- figcaption: ist ein Kind-Element von figure und beschreibt etwa die Bildunterschrift
Weitere neu eingeführte Elemente:
- video and audio: für multimedia content
- embed: wird bei plugin content benötigt
- mark: beschreibte Inhalte, der Beziehung zu anderen Kontexten erhalten werden soll
- progress: Um die Fortdauer einer Aktion zu markieren (etwa Download)
- meter: zeigt Maßeinheiten (etwa freier Speicherplatz)
- time: Datum oder Zeit
- ruby, rt and rp: Um ruby Anmerkungen zu ermöglichen
- wbr: Möglichkeit um Zeilenumbruch anzuzeigen
- canvas: Um Grafiken zu rendern
- command: Um Befehle aufrufbar zu machen
- details: zusätzliche Informationen oder Steuerung ermöglichen
- summary: bedeutet dessen Zusammenfassung oder Legende
- datalist: kann zusammen mit seinem Attribut list verwendet werden, um Comboboxen zu erstellen
<input list="browsers">
<datalist>
<option value="Safari">
<option value="Internet Explorer">
<option value="Opera">
<option value="Firefox">
</datalist>
- keygen: Schlüsselpaar Generierung
- output: etwa Ausgabe einer Kalkulation welche durch Script-Verarbeitung ermittelt wird
Neue Attribute:
- Um Konsistenz zwischen den Elementen a, area und link zu erreichen, wurde das media-Attribut dem a- und area-Element sowie die Attribute hreflang und rel dem areal-Element zugewiesen
- Target ist nun für a und area nicht mehr deprecated. Es kann nun sogar auch in base benutzt werden
- Das value-Attribut für li ist nicht mehr deprecated sowie das start-Attribut für ol
- Mit reversed kann man ol-Items als absteigend deklarieren
- menu bekommt neue Attribute, nämlich type und label, mit contextmenu kann man auf ein Kontextmenü zugreifen
- in style kann man mit scope, um zugewiesen styles nur in diesem Bereich wirksam zu machen
- async in script beeinflusst das Laden und das Ausführen von Scripts
- html erhält manifest, mit dem das offline-Verhalten beeinflussen kann
- link erfährt mit dem Attribute sizes die Möglichkeit die Größe von Favicons anzuzeigen
- Iframe bekommt drei neue Attribute: sandbox, seamless und srcdoc
Formulare
Globale Attribute:
- Die schon bestehenden Attribute: class, dir, id, lang, style, tabindex und title sind nun auf alle Elemente anwendbar
- Alle in HTML4 bekannten Attribute derart onevent-name sind nun globale Attribute
- Diese globalen Attribute sind neu dazugekommen
- Contenteditable: zeigt, dass das element editierbar ist
- Contextmenu: zeigt auf ein Kontextmenü
- data-*: hiermit kann man eigene Attribute definieren
- Draggable: kann in Zusammenhang with drag & drop benutzt werden
- Hidden: ein Element ist nicht von Bedeutung
- role and aria-*: Diese können für assisstierende Technologien benutzt werden
- spellcheck: definiert, ob die Rechtschreibung von Elementen überprüft werden darf
Elemente, die eine teilweise Änderung erhalten haben
- Ein a-Element ohne ein href-Attribute bedeutet nun ein Platzhalter
- Address wird von section begrenzt
- Das b-Element ähnelt nun einem span
- cite-Element ist nun der Titel eines Werkes (Buch, Gedicht, Lied…) und nicht der Name eines Autors
- hr bedeutet nun einen thematischen Bruch
- i ist eine Art von span, die eine alternative Stimme oder Stimmung oder einen Unterschied ausdrückt
- Wenn es das User-Interface nicht vorsieht, soll label nicht mehr auf das Control fokussieren
- menu wurde für Toolbars und Kontextmenüs umdefiniert
- small ist nun zuständig für Seitenkommentare oder rechtliche Hinweise
- strong bedeutet nun „wichtig“ statt „betont“
- Unter head-Element darf nicht mehr object als Kind-Element vorkommen
Veränderte Attribute
- Das type-Attribut ist bei script nicht mehr zwingend anzugeben, wenn ECMAScript gemeint ist und bei style nicht mehr, wenn CSS gemeint ist
- Diese Elemente können zwar aber sollen nicht mehr benutzt werden
- Border bei img
- language bei script
- Statt name bei a besser id
- Summary bei table
Entfernte Elemente
- Folgende Elemente werden zwar vom User Agent noch verstanden, sollen aber vermieden werden, weil sie Präsentations-bezogen sind, also besser mit CSS darstellbar: basefont, big, center, font, s, strike, tt, u
- Diese Elemente werden nicht mehr unterstützt, weil sie die Usability und die Zugänglichkeit (Accessibilty) einschränken: frame, frameset, noframes
- Diese Elemente werden ausgeschlossen, weil sie nicht oft benutzt wurden, unterschiedlich verstanden wurden und weil andere Elemente die Aufgaben übernehmen können:
- abbr statt acronym
- object statt applet
- isindex kann von form Bausteinen gesteuert werden
- ul statt dir
- noscript kann nicht im XML-Kontext eingesetzt werden, da es nur durch den HTML-Parser genutzt werden kann.
Attribute, die nicht mehr benutzt werden sollen
- rev und charset in link oder a
- shape und coords in a.
- longdesc in img und iframe
- target in link
- nohref in area
- profile in head
- version in html
- scheme in meta
- In object: archive, classid, codebase, codetype, declare und standby
- valuetype und type in param
- axis und abbr in td und th
- scope in td
Attribute, die nicht mehr benutzt werden können, da sie besser mit CSS beschrieben werden:
- align in caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead und tr
- alink, link, text und vlinks in body
- background in body
- bgcolor in table, tr, td, th und body
- border in table und object
- cellpadding und cellspacings in table
- char und charoffs in col, colgroup, tbody, td, tfoot, th, thead und tr
- clear in br
- compact in dl, menu, ol und ul
- frame in table
- frameborder in iframe
- height in td und th
- hspace und vspaces in img und object
- marginheight und marginwidths in iframe
- noshade in hr
- nowrap in td und th
- rules in table
- scrolling in iframe
- size in hr
- type in li, ol und ul
- valign in col, colgroup, tbody, td, tfoot, th, thead und tr
- width in hr, table, td, th, col, colgroup und pre
Neue APIs
HTML5 führt einige neue APIs ein, die vor allem bei den neuen Elementen video und audio sowie den Attributen contenteditable und draggable einsetzbar sind.
Canvas
Mit canvas kann man ein Bild rendern, mit Javascript zeichnen, was man will. Momentan ist nur 2D möglich. Das canvas ist ein Rechteckiges Element, welches ein zweidimensionales Gitternetzwerk darstellt. Die Koordinaten (0,0) stellen die oberste linke Ecke da. Die erste Zahl bedeutet die x-Achse – nach rechts gehende, die zweite Zahl die y-Achse – also nach unten gehend.
Es gibt folgende Pfad-Funktionen: moveTo(x, y) um den Stift an den übergebenen Punkt an zu setzen, es gibt lineTo(x, y) um eine Linie zu dem übergebenen End-Punkt zu zeichnen.
Mit der Eigenschaft strokeStyle kann man dem Pfad eine Farbe übergeben und mit stroke() wird endlich gezeichnet.
Der Eigenschaft font kann man Schriftart- und Größe mitteilen. Mit der Funktion fillText() den Text schreiben.
Canvas selbst folgt nicht dem Box-Model. Es gibt auch Gradienten. Mit drawImage() lassen sich Bilder zeichnen.
Video
Video: früher musste man ein Plugin wie QuickTime oder Flash haben, um Videos abzuspielen. Nicht alle Codecs werden von allen Browser unterstützt und manche haben versteckte Lizenzkosten.
<video src="pr6.webm" width="320" height="240" controls></video>
Zusätzlich einstellbar: preload=“none“ und autoplay
Browser verschiedene Formate anbieten:
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
Es kann ebenso wichtig sein, den MIME type in htaccess zu setzen
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Da nicht alle Browser alle Codecs unterstützen, muss man verschiedene Codecs anbieten. Nach meiner Meinung ist das kein Fortschritt. Als Fallback muss man wieder einen Flash-Movie anbieten.
Semantic:
Microformat und RDFa und Microdata
html is root
2 Children: head and body
<section itemscope itemtype="http://data-vocabulary.org/Person">
<h1 itemprop="name">Mark Pilgrim</h1>
<p><img itemprop="photo"
src="http://www.example.com/photo.jpg"
alt="[me smiling]"></p>
<a itemprop="url" href="http://diveintomark.org/">dive into mark</a>
Fazit
HTML5 ist einsetzbar. Sogenannte „moderne Browser“ unterstützen schon viele Features, der Internet Explorer 9 wird ebenso ein Riesenschritt in diese Richtung unternehmen.
Ansonsten kann man mit Tools nachhelfen.
- Mit Modernizer kann man feststellen, welche Features unterstützt werden.
- Html5-shims ist etwa ein Scripts welches HTML5 Funktionalität in alten Browsern simuliert.
- Explorercanvas ist eine JavaScript library, die dem IE canvas beibringt
Problem: Wenn ein Tag einem Browser nicht bekannt ist, dann wird er einmal inline angezeigt, zum zweiten wird aber auch der DOM-Tree durcheinander gebracht.
HTML5 bietet viele sinnvolle Neuerungen, mich faszinieren die Möglichkeiten einer Webseite mehr Semantik und Struktur zu geben.
Andererseits ist die Ungewissheit, wie ältere Browser die Webseite anzeigen oder der Aufwand, den man mit Workarounds hat, sicherlich ein Hindernis.
Da HTML5 alten Markup unterstützen wird, fällt ein wichtiger Anlass weg, direkt auf die neue Technologie aufzubauen.
Ich denke, dass in zwei Jahren jeder Web-Entwickler HTML5 verwenden wird.
Quellen