HTML 5

HTML 5
Max Beckers
Universität Osnabrück
Inhaltsverzeichnis
1. Einleitung.................................................................................................................................................. 2
2. Geschichte................................................................................................................................................ 3
3. Die Idee...................................................................................................................................................... 4
4. Veränderungen..........................................................................................................................................
4.1 Neue Elemente..................................................................................................................................
4.2 Neu definierte Elemente....................................................................................................................
4.3 Neue Attribute....................................................................................................................................
4.4 Doctype..............................................................................................................................................
4.5 Entfernte Elemente............................................................................................................................
4.6 Entfernte Attribute..............................................................................................................................
5
5
8
8
9
9
10
5. Verbesserungen........................................................................................................................................ 11
6. HTML5 heute............................................................................................................................................. 12
7. Schlusswort.............................................................................................................................................. 13
8. Quellen...................................................................................................................................................... 14
1. Einleitung
2
1. Einleitung
Das Internet ist ständig in Bewegung. Täglich entstehen viele neue Websites. Dank Tim Berners-Lee, der
Erfinder von HTML, Begründer des WWW(World Wide Web) und Vorsitzender des W3C (World Wide Web
Consortium) ist es überhaupt möglich, dass dies auf eine recht einfache Art und Weise zu gestalten ist. HTML
ist vor allem dafür entworfen worden, wissenschaftliche Dokumente zu präsentieren. Es ist die meist verbreitetste
Sprache zum erstellen von Websites. Sie wird von Entwicklern von Websites verwendet. HTML hat seinen
weltweiten Erfolg der leichten Verwendbarkeit und den logischen und einprägsamen gewählten Vokabeln zu
verdanken. Um HTML aber wirklich zu Verstehen sollte man sich beispielsweise auch mit DOM Core und DOM
Events auskennen. Auch hilfreich ist es, wenn man mit der Verwendung vom HTTP, Javascript, XML und/oder
CSS vertraut ist, aber nicht notwendig um HTML anwenden zu können.
Derzeitig verwendet man HTML4, welches schon vor circa einem Jahrzehnt entwickelt wurde. Doch da es so
viel im Einsatz ist hat Berners-Lee auch nicht ganz unrecht, wenn er sagt: „Es ist notwendig HTML inkrementell
weiterzuentwickeln.“ Und somit sind etliche Entwickler schon in Teilen seit 2003 dabei die nächste große
Überarbeitung der Hypertext Markup Language (HTML) zu entwickeln, die in ein paar Jahren HTML4 ablösen
wird.
2. Geschichte
3
2. Geschichte
HTML5 soll HTML4 ersetzen, dass bereits seit 1997 genutzt wird. Die Entwicklung der neuen HTML-Version
sieht wie folgt aus:
• 2003: „XForms Basic“-Vorschlag von Ian Hickson (Entwickler von Browsertests)
• Frühjahr 2004: Gründung der WHATWG (Web Hypertext Application Technology Working Group, bestehend
aus Browser-Herstellern wie Mozilla, Apple und Opera)
• Juni 2004: Die WHATWG veröffentlicht einen ersten Vorschlag für HTML5 unter dem Namen Web Applications
1.0.
• 2004: „XForms-Basic“ wird in „Web Forms“ umbenannt und von der WHATWG übernommen.
• 2005: Erste Arbeitsentwürfe für Web Applications 1.0.
• Oktober 2006: wird zu der WHATWG von der W3C eine Arbeitsgruppe gegründet, die beginnt eine Sprache
zu entwickeln die sich zwar an der klassischen HTML-Syntax orientiert, aber auch als XML-Formulierung
verwendet werden kann.
• Frühjahr 2007: W3C und WATHWG beschließen HTML5 auf Web Applications 1.0 aufzubauen.
• 2007: Es wird sich darauf geeinigt, dass W3C die Copyrigths bekommt. Beide Arbeitsgruppen arbeiten jetzt
zusammen.
• Januar 2008: W3C veröffentlicht den ersten Arbeitsentwurf.
• Februar 2009: Die W3C macht „Web Forms(2.0)“ zu einem offiziellen Teil von HTML5.
• Derzeit erwartetes Jahr der Fertigstellung: 2012
Aber selbst wenn HTML5 im Jahr 2012 formell fertiggestellt sein sollte, so hängt es dann von den
Browser-Herstellern ab, wann HTML5 wirklich benutzt werden kann. Hier ist es den Entwicklern sehr wichtig,
dass es zwei Implementationen gibt. Einige Neuheiten von HTML5 sind allerdings schon jetzt in den aktuellen
Versionen der Browser enthalten.
3. Die Idee
4
3. Die Idee
Die eigentliche Idee von HTML5 ist es nicht nur ein Update von HTML4 zu machen. HTML 5 ist eine Sprache,
die in angepasster HTML- sowie XML-Syntax geschrieben werden kann. Dennoch entsteht eine Syntax, die
entsprechend mit HTML 4 und XHTML 1 kompatibel ist. Es ist von enormer Bedeutung, dass bestehende
Websites nicht sofort nach Einführung von HTML 5 in HTML5 umgeschrieben werden müssen, sondern auch
erst nach der Einführung von HTML 5 kann mit der Umstellung begonnen werden.
HTML bis einschließlich HTML4 ist eine SGML(Standard Generalized Markup Language)-Anwendung. Allerdings
verfügen selbst die modernen Webbrowser über keinen „echten“ SGML-Parser. Ein Parser ist ein Prüfprogramm,
das die Struktur eines Dokumentes gegen eine Dokumenttypdefinition (DTD) abprüft und so sicherstellt, dass
das Dokument den Regeln der DTD entspricht und fehlerfrei von Programmen verarbeitet werden kann. Falls
das Programm auf einen Fehler trifft, so wird dieser ausgegeben. In der DTD steht also beispielsweise drin,
welche Elemente erlaubt sind und welches Element welche Attribute hat und ob diese optional oder
vorgeschrieben sind.
Zurück zu den Webbrowsern, welche aber einen HTML-Parser besitzen. Deshalb können bestimmte syntaktische
SGML-Regeln in HTML nicht angewendet werden. Weshalb HTML5 jetzt versucht nicht mehr auf SGML zu
basieren, sondern es wird eine eigene HTML-Syntax definiert. Diese wird sich zwar an der klassischen
HTML-Syntax orientieren, aber beispielsweise die Fehlerbehandlung wird neu definiert werden. Hierbei wird
versucht sich möglichst an vorhandene Implementierungen der Browser zu orientieren, damit die Syntax
rückwärtskompatibel bleibt, also beispielsweise HTML4 weiterhin läuft. So werden zwar auch die Browser noch
einige Neuerungen vornehmen müssen, aber rein theoretisch (praktisch nicht, da ja die Implementierung ja
noch fehlt) könnten einige HTML5-Befehle schon heute von den aktuellen Browsern verarbeitet werden.
4. Veränderungen
5
4. Veränderungen
Bevor ich nun auf die Neuerungen im Einzelnen eingehe möchte ich kurz beschreiben, was sich allgemein
geändert hat erst einmal im Hinblick darauf, was sich unter HTML5 besser oder auch einfach einfacher darstellen
lässt. HTML5 hat sich insgesamt in vielen Bereichen erneuert. Besonders die Funktionen für multimediale
Inhalte hat sich um einiges spezifiziert und auch vereinfacht. In HTML5 ist es auch deutlich einfacher Formulare
zu erstellen, da die Entwickler auch hier eine Notwendigkeit für eine Verbesserung gesehen haben. Auch um
es für den Programmierer noch übersichtlicher zu machen haben sich die Entwickler Mühe gegeben, eine noch
deutlichere und klarere Struktur einzuführen. Dies kann man schon daran sehr gut erkennen, wenn man sich
einmal die Neuerungen anschaut, also das was unter HTML5 komplett neu ist und dann im Vergleich dazu,
was es unter HTML5 nicht mehr gibt.
Zunächst werde ich jetzt einmal aufzeigen, was unter HTML 5 alles neu ist. Anschließend alles was man unter
HTML5 nicht mehr zur Verfügung hat, was sich aber in HTML5 auf eine andere Art und Weise mindestens
genau so gut darstellen lässt.
4.1 Neue Elemente
In den folgenden Abschnitten werden Elemente beschrieben, die es unter den Vorgängern noch nicht gab. Die
meisten Neuheiten sind hier im Bereich der Seiteneinteilung oder Seitengestaltung und auch im multimedialen
Bereich. Es wird also deutlich vereinfacht, Audio- und Video-Datein in eine Website mit einzubinden.
• header
Mit diesem Element wird ein Kopfbereich für einen Abschnitt definiert. In dem Kopfbereich steht die
Überschrift. Neben der eigentlichen Überschrift kann dieser zum Beispiel auch die Version des folgenden
Textes enthalten. Die einzelnen Informationen im Kopfbereich müssen selbst definiert werden.
Beispiel:
1 <header>
2
<h1>Titel</h1>
3
<h2>Untertitel</h2>
4 </header>
• footer
Mit diesem Element wird die Fußzeile für einen Abschnitt oder eine Seite definiert. Die Fußzeile gibt
weitergehende Auskünfte über den Text wie zum Beispiel den Autor oder Informationen über die Webseite
wie zum Beispiel das Impressum. Hier findet aber zum Beispiel auch das „Kleingedruckte“ oft seinen Platz
was ja eigentlich dazu da ist, dass es übersehen wird, was weit unten auf einer Webseite öfter der Fall ist.
• article
Mit „article“ wird ein Textabschnitt definiert, der im direkten Zusammenhang mit den Vorfahrelementen
steht. Beispiele dafür sind Nachrichtenartikel oder auch Forenbeiträge.
• section
Damit wird ein Abschnitt mit thematisch zusammenhängenden Inhalt definiert. Dieser Abschnitt kann auch
gleichzeitig einen Kopf- und Fußbereich enthalten.
• aside
Mit „aside“ wird ein Abschnitt beschrieben, der zwar nicht zu dem eigentlichen Artikel gehört aber thematisch
schon dazu passt. Beispielsweise könnten es Quell- oder Querverweise für einen Nachrichtenartikel sein.
• nav
4. Veränderungen
6
Mit diesem Element wir ein Navigationsbereich in einem Dokument erstellt. So Beispielsweise das Menü
auf einer Webseite. Dieser kann sowohl interne als auch externe Links enthalten.
• dialog
Dieses Element ist zur Kennzeichnung eines Dialoges in einem HTML-Dokument. In diesem Zusammenhang
gibt es die neuen Elemente „dd“ und „dt“. Diese beiden Elemente formatieren den Dialog dann um einen
Dialog übersichtlich zu gestalten ohne dass man noch groß formatieren muss. Mit dt werden die Personen
markiert, die an dem Dialog teilnehmen. Mit dd wird dementsprechend dann gekennzeichnet und formatiert,
was die einzelnen Personen sprechen oder schreiben. Dialog kann beispielsweise für Gespräche, Chats,
Interviews, Drehbücher und vieles mehr eingesetzt werden.
Beispiel:
1 <dialog>
2
<dt>Reporter</dt>
3
<dd>Was sagen sie dazu?</dd>
4
<dt>Gesprächspartner</dt>
5
<dd>Ähm...ja also ich finde das gut!</dd>
6
...
7 </dialog>
http://www-lehre.inf.uos.de/~maxbecke/dia.html
• audio und video
Wie der Name schon vermuten lässt sind diese beiden Elemente zum einbetten von Audio- bzw.Videodatein.
HTML5 soll verschiedene Schnittstellen zur Verfügung stellen, um die Wiedergabe dieser Dateien steuern
zu können. Video kann man die Attribute src, poster, autobuffer, autoplay, loop, controls, width und height
zuweisen. Audio src, autobuffer, autoplay, loop und controls.
Beispiel:
1 <video src="Quelle" poster="Bild" controls>
2
<a href="Quelle">Film herunterladen</a>
3 </video>
http://www-lehre.inf.uos.de/~maxbecke/vid.html
Der in dem Beispiel eingesetzte Link kann auch durch einen beliebigen anderen Text ersetzt oder auch
weggelassen werden. Alles was zwischen <video> und </video> steht wird nämlich nur angezeigt, wenn
der Browser aus welchen Gründen auch immer das Video nicht darstellen kann. Es sei denn man verwendet
hier das neue source-Element, aber dazu in dem entsprechenden Abschnitt Näheres.
• embed
Dieses Element ist schon aus HTML4 bekannt. In HTML4 wurden damit Audio- und Videodatein eingebunden.
Unter HTML5 sollen mit „embed“ externe Anwendungen und interaktive Inhalte eingebunden werden. So
werden zum Beispiel Flash-Animationen weiterhin mit embed in das HTML-Dokument eingebettet.
• canvas
Das Canvas-Element, was übersetzt Leinwand heißt, und das beschreibt auch schon ziemlich gut, was
man damit machen kann. Von dezenten optischen Extras bis hin zu kompletten eigenen
Programmoberflächen kann man damit einiges anstellen und alles was man dafür braucht, ist ein klein
wenig Ahnung von HTML und Javascript. Von einfachen Formen die man bildlich darstellt, wie zum Beispiel
Rechtecke, über Texte schreiben und Spielgrafiken darstellen bis hin zu Bildbearbeitung ist hier so einiges
möglich. Das Canvas-Element ist standartmäßig auf 300x150 Pixel gesetzt, kann durch die beiden Attribute
width ung heigth aber beliebig verändert werden. Das Canvas ist aufgebaut wie ein Koordinatensystem
wobei der Nullpunkt oben links in der Ecke ist.
Noch ist das Canvas nur zweidimensional, aber es ist schon in Planung, dass es das auch irgendwann in
3d geben wird. Also mit dem Canvas wird bald so einiges möglich sein, was jetzt noch gar nicht oder nur
sehr schwer umzusetzen ist.
Beispiel:
4. Veränderungen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
7
...<head>...<script>
function drawCanvas(){
var canvas = document.getElementById('canvas1');
if(canvas.getContext){
var context = canvas.getContext('2d');
context.fillStyle = "rgb(255, 0, 255)";
context.fillRect(0, 0, canvas.width, canvas.height);
}
}
</script>...</head>
<body onload=„drawCanvas()“>
...
<canvas id=„canvas1“ width=„300“ heigth=„200“>
</canvas>
http://www-lehre.inf.uos.de/~maxbecke/bsp.html
• time
Hiermit soll es möglich sein, einen interaktiven Kalender zu erzeugen oder Daten und Uhrzeiten darzustellen.
• source
Für ein Medienelement unterschiedlicher Art können mit diesem Element unterschiedliche Quellen angegeben
werden. Damit soll z.B. dem Browser geholfen werden, das passende Plugin/externe Programm zur
Darstellung zu finden.
Beispiel:
1 <audio autoplay loop>
2
<source src=„Quelle 1“ type=„audio/mpeg“>
3
<source src=„Quelle 2“ type=„audio/ogg“>
4 </audio>
• progress
Die Bezeichnung kommt aus dem Englischen und heißt „Fortschritt“. Diese Aufgabe soll das Element auch
erfüllen. Es dient zu einer Fortschrittsanzeige bei der Ausführung von bestimmten Aufgaben - wie z.B. bei
einer mehrseitigen Umfrage.
• m
Dieses Element hebt u.a. den Text hervor, der von einer Suchmaschine gefunden wurde und sichtbar
markiert wird. Damit hat der Benutzer bzw. der Browser die Möglichkeit, den Text schneller zu finden.
Anderweitig hervorgehobene Texte wie z. B. durch <b> spielen hier keine Rolle.
• meter
Damit wird z. B. angezeigt, wie gut ein Suchergebnis zum eingegebenen Suchbegriff ist oder die Einschätzung
eines Produktes im Vergleich zur besten Bewertung.
• mark
Dieses Element kennzeichnet eine Reihe von markierten Texten.
• details
Hier werden dem Benutzer einige zusätzliche Informationen bereitgestellt, die dieser nach Bedarf aufrufen
kann.
• datalist
Kann mit Hilfe des für input neuen Attribut list dazu verwendet werden, Comboboxen zu erstellen.
• keygen
4. Veränderungen
8
Das keygen-Element ist wie der Name schon sagt dazu da, Schlüssel zu generieren. Zum Beispiel für den
Login auf Websites.
• output
Dieses Element ist beispielsweise zum Ausgegeben von irgendwelchen Ergebnissen, wenn eine Berechnung
durchgeführt wurde.
4.2 Neu definierte Elemente
In den folgenden Abschnitten werden Elemente beschrieben, die von ihren Entwicklern neu definiert worden
sind, die ihrer Anwendung entsprechen sind und den Sinn der Elemente dem Nutzer verdeutlichen sollen. Am
praktischen Einsatz dieser Elemente wird sich kaum etwas bis gar nichts ändern. Die Elemente können also
weiterhin verwendet werden wie immer nur jetzt ist anhand der Definitionen verständlicher gemacht worden,
was diese Elemente bezwecken sollen. Vor allem weil sie meist auch nur in dem Kontext verwendet werden
wie sie in den neuen Definitionen beschrieben werden.
• i
Bisher erzeugte das Element einen kursiv (= schräg) geschriebenen Text. Jetzt sollen damit Texte markiert
werden, die im Normalfall kursiv dargestellt werden sollen - z. B. Gedanken, Titel usw.
• b
Früher hat dieses Element einen Textabschnitt "fett" markiert. Mit HTML5 soll mit diesem Element ein
Abschnitt hervorgehoben werden, der aber keine wichtigere Bedeutung als der gesamte Text hat. Bestimmte
Schlüsselwörter oder Produktbezeichnungen sind zwei Beispiele dafür.
• em
Damit wird weiterhin Text markiert, der hervorgehoben werden soll. Allerdings verstärkt sich der Effekt des
Elementes dadurch, wenn es verschachtelt angewendet wird.
• hr
Bisher erzeugte dieses Element eine waagerechte Linie. In HTML5 hat sich daran nichts geändert, jedoch
symbolisiert die Linie zusätzlich einen thematischen Umbruch zwischen einzelnen Textabschnitten.
• small
Bisher wurde damit ein Text pauschal kleiner als die normale Schriftgröße formatiert. In HTML5 soll damit
das „Kleingedruckte“ wie Geschäftsbedingungen, Urheberrechtshinweise oder Einschränkungen in der
rechtlichen Handhabung ausgezeichnet werden.
• strong
Die bisherige Aufgabe dieses Elementes wird in HTML5 durch das „em“-Element übernommen. Jetzt stellt
dieses Element die besondere Wichtigkeit des damit gekennzeichneten Textabschnittes da.
4.3 Neue Attribute
Auch im Hinblick auf die Attribute hat man sich einige Gedanken gemacht, was sich vereinfachen lässt und
was es eventuell auch noch gar nicht gab. Im folgenden werde ich einige neue Attribute vorstellen:
• Neue Werte für den Input
Eine besonders große Neuerung sind die vielen neuen type-Werte für den Input. Und zwar hat man hier
um sowohl dem Programmierer als auch dem Anwender mit folgenden neuen Attributen so einiges
vereinfacht: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url und
week. Dadurch dass man jetzt einem Input einem bestimmten Typ zuweisen kann und HTML5 dann
4. Veränderungen
9
selbständig dafür sorgt, dass beispielsweise bei Date auch nur ein Datum eingegeben wird, muss hier keine
extra Fehlerbehandlung mit Hilfe von Javascript durchgeführt werden, weil die Browser das selbst überprüfen.
Des weiteren hat man dem Input noch autocomplete, list , min/max (minimale/maximale Anzahl von
Zeichen),multiple und pattern hinzugefügt, um die Eingabe noch weiter spezifizieren zu können.
In einem Formular möchte man manchmal auch einige Eingabefelder zu Pflichtfeldern machen. Auch dafür
gibt es jetzt ein neues Attribut: required (funktioniert nur wenn der Input nicht hidden ist).
• autofocus
Ein weiteres neues Attribut ist autofocus auf button, input (sofern nicht hidden), select und textarea, um
den Fokus auf Formularelemente zu legen. Somit kann man wenn man autofocus zum Beispiel auf button
legt gleich indem man „Return/Enter“ drückt den Button aktivieren.
• sizes
Sizes ist ein neues Attribut für das link-Element um Icon-Größen angeben zu können.
• form
Dieses Attribut ist um die Formularelemente button, fieldset, input, output, select und textarea, die auch
außerhalb von Formularen stehen stehen können mit Formularen zu assoziieren.
• disabled
Man kann ein fieldset auf disabled setzen, um einen ganzen Formularabschnitt zu deaktivieren.
• async
Das Attribut asynic auf script ist dazu entworfen, um das Laden und Ausführen von Skripten steuern zu
können.
4.4 Doctype
Wie auch schon die älteren Versionen von HTML benötigt auch das HTML5 Dokument einen Doctype. Allerdings
waren die Doctypes früher immer recht lang. Dies hing damit zusammen, dass HTML SGML benötigte und der
Verweis auf eine DTD machte den Doctype dann immer sehr lang und schwer zu merken. Dies ändert sich
unter HTML5 grundlegend. Da HTML ja nicht mehr auf SGML baut braucht man auch keinen Verweis mehr
auf irgendeine DTD. Der Doctype sieht daher recht übersichtlich aus und ist auch um einiges besser zu merken:
<!DOCTYPE html>. Mit diesem Befehl wissen die Browser, dass hier ein HTLM-Dokument kommt und können
dies dann entsprechend verarbeiten.
4.5 Entfernte Elemente
Es wurden einige Elemente entfernt, die größtenteils veraltet sind und daher nur sehr selten verwendet werden
oder die unter HTML5 unnötig sind, weil sie nicht mehr benötigt werden oder aber von anderen Elementen mit
übernommen werden.
• acronym
Das Element acronym wurde entfernt, da abbr die Aufgaben von acronym einfach mit übernimmt, weil beide
dazu da sind, Abkürzungen zu markieren (z.b. <ABBR TITLE="United Nations">U.N.</ABBR> )
• Einige präsentationsbezogene Elemente
Die Elemente basefont, font, big, center, tt, strike, u, s zum formatieren von Präsentationen wird es in
HTML5 nicht mehr geben.
• noscript
Noscript wird nicht mehr benötigt, da dies nur für Probleme mit den Parsern da war, da HTML5 nun nicht
mehr auf SGML basiert hat sich das Problem von selbst gelöst.
4. Veränderungen
10
• frame, frameset, noframe
Die Elemente hat man entfernt, da es Probleme mit der Bedienbarkeit und der Barrierefreiheit gab. Deshalb
wird es unter HTML5 nur noch IFrames geben. Diese werden auch jetzt schon zum größten Teil verwendet,
von daher wird es in diesem Bereich keine große neue Umstellung geben. Denn eigentlich alle Websites,
die mit Frames arbeiten, verwenden IFrames und es werden auch keine neuen Websites (die Frames
verwenden) mehr mit den normalen Frames programmiert.
4.6 Entfernte Attribute
Es sind auch einige Attribute entfernt worden. Ich habe mal einige wichtige Attribute herausgesucht, die jetzt
nicht mehr verwendet werden können.
• name
auf img, also zum benennen eines Bildes, gibt es nicht mehr.
• abbr
kann jetzt nicht mehr bei th und td verwendet werden.
• bgcolor
auf body, table, td, th, und tr wurde entfernt.
• algin
zum Ausrichten von caption, col, colgroup, div, h1, h2, h3, h4, h5, h6, hr, iframe, img, input, legend, object,
p, table, tbody, td, tfoot, th, thead und tr wurde ebenfalls entfernt.
• frameborder
wurde auch nicht übernommen, da in HTML5 nur noch iframes verwendet werden.
• Für den body
wurden alink, link, text und vlink und background entfernt.
5. Verbesserungen
11
5. Verbesserungen
Also was sich mit Sicherheit sagen lässt, ist dass der Doctype deutlich angenehmer und besser zu merken
geworden ist. Aber wenn das alles wäre was sich für den Programmierer verbessert hätte, dann bräuchte man
kein HTML5 schreiben. Obwohl natürlich die Veränderung, die dahinter steht nicht zu verachten ist. Es ist nicht
so, dass man einfach nur die Adresse weglässt, sondern das hängt damit zusammen, dass man nicht mehr
auf SGML baut. Aber was für den Programmierer von besonderer Bedeutung ist, dass der Programmcode
durch die Neuerungen um Einiges übersichtlicher geworden ist. Und einen übersichtlichen, gut strukturierten
Programmcode kann man viel besser bearbeiten und es kann auch schneller ein Fehler erkannt werden. Denn
Fehler passieren immer und diese in einem unübersichtlichen Programmcode zu suchen macht keinen Spaß.
Dann haben sich die Elemente zu Seiteneinteilung vereinfacht, so dass auch für einen noch nicht so geübten
Programmierer sofort klar ist, wo er sich befindet. So weiß man wenn man eine Überschrift erstellen muss
sofort man braucht <header> und muss nicht erst noch die <div id=„header“> schreiben. Die neuen
Bezeichnungen sind also selbsterklärend. Dies gilt natürlich auch für die anderen Elemente zur Seiteneinteilung.
Wobei natürlich zu bemerken ist, dass das zwar jetzt eine gute Neuerung ist und einem auch die entsprechende
CSS-Datei jeweils um ein Zeichen verkürzt, da man jetzt einfach die Raute vor #header weglässt und dann so
das Element definiert.
Dann ist durch die entsprechenden Attribute und Elemente die Ein- und Ausgabe vereinfacht worden, dadurch
dass die Eingabe beispielsweise durch die neuen Attribute so vereinfacht wurde dass man einfach als type='date'
einfügt und jetzt können nur noch Daten eingegeben werden. In Opera 9 wird das Eingabefeld in Kombination
mit dem Attribut „date“ beispielsweise gleich zu einer Kombobox, wo man dann das entsprechende Element
auswählen kann. Oder auch die Fehlerbehandlung muss jetzt nicht noch in Javascript dazugeschrieben werden,
sondern die wird gleich von den Browsern mit übernommen. Auch durch das Anpassen von einigen Definitionen
an das, für was die Elemente auch jetzt schon eingesetzt werden macht diese Elemente auch besser, da sie
jetzt auch zu dem verwendet werden, was die Definition vorschreibt für was sie zu verwenden sind.
6. HTML5 heute
12
6. HTML5 heute
Das ist natürlich eine der interessantesten Fragen für einen Programmierer. Kann ich heute schon meine
Website in HTML5 schreiben? Doch die Antwort ist etwas schwieriger als man zunächst denken würde. Es ist
nämlich in gewissem Sinne schon möglich auch einige Teile in HTML5 zu schreiben. Denn einige
HTML5-Elemente werden auch schon von den aktuellen Versionen unserer Browser unterstützt. So können
beispielsweise schon die Elemente zu Seiteneinteilung, also <header>,<nav>, und <article> verwendet werden.
Aber alle Elemente sind nicht verwendbar, da ein Teil auch noch gar nicht komplett fertig entwickelt und
implementiert ist.
Auch die neuen Inputs können so verwendet werden. Wenn ein Browser zum Beispiel für ein <input type="date">
eine Zeitpicker-Funktion zur Verfügung stellt ist das gut, aber wenn der Browser als Fallback für unbekannte
Input-Typen type="text" verwendet (wie das das bei den meisten aktuellen Browsern der Fall ist), dann geht
das auch.
Aber einige Browser unterstützen HTML5 stärker, andere sind da noch nicht so weit. Am weitesten sind in
diesem Bereich auf jeden Fall Google Chrome und Safari 4. Bei diesen beiden Browsern sind auch schon
Elemente wie beispielsweise video, audio oder auch canvas benutzbar. Aber auch hier kann es bei Attributen
noch zu Problemen kommen. Auch Opera oder Monzilla geben sich Mühe da mitzuhalten, hier bekommt man
aber noch deutlich mehr Probleme im Umgang mit HTML5. Ganz weit abgeschlagen im Bereich HTML5 ist der
InternetExplorer wo es auch in näherer Zukunft noch keine HTML5-Unterstützung geben wird.
Für den InternetExplorer gibt es allerdings eine Möglichkeit diesem die Elemente sozusagen beizubringen.
Jetzt stellt sich natürlich die Frage wie man das denn macht. Also gehen wir mal davon aus wir würden gerne
das „section“-Element einsetzen. Das wäre dann mit folgendem Javascript zu verwirklichen:
1 document.createElement('section');
Wenn man nicht nur einzelne Elemente mit einbinden möchte, sondern alle dann kann man es sich auch etwas
vereinfachen und muss nicht jedes einzeln „erstellen“, sondern kann mit dem folgenden Skript alle gleichzeitig
einbinden:
1 <!--[if IE]>
2
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
3
<![endif]-->
Aber natürlich hat dieser Trick auch einen Haken: Wenn Javascript deaktiviert ist, dann sind die betroffenen
Elemente auch unbrauchbar, weil die jetzt durch Javascript in die Website eingebunden werden. Somit ist dies
zwar in manchen Fällen vielleicht eine gute Übergangslösung, aber mit Sicherheit nichts von Dauer. Also heißt
es jetzt warten, bis endlich 2012 ist und alle Elemente frei verwendet werden können.
Allerdings hat Youtube als Beispiel schon einmal eine Seite in HTML5 ins Internet gestellt:
http://www.youtube.com/html5
7. Schlusswort
13
7. Schlusswort
Im Prinzip spricht also nichts gegen den Einsatz von HTML5, auch heute schon, man muss sich halt nur
überlegen wie viel HTML5 man einsetzt möchte. Was man aber auf jeden Fall gut machen kann ist, dass man
die Elemente verwendet, die es unter HTML4 auch schon gab und die nur in ihrer Definition verändert wurden.
Der einfache Doctype ist auch ein Beispiel für einen echten Bonus ohne Haken. Was man auf jeden Fall gut
machen kann ist normales XHTML zu schreiben und dann einfach den neuen Doctype darüber zu setzen.
Außerdem sollte man sich überlegen wenn man interessiert daran ist, welchen Browser man dann verwendet,
da wir ja im vorherigen Abschnitt gesehen haben, dass es nicht ganz egal ist, welchen Browser man verwendet,
sondern dass man schon einen von den nehmen sollte, der etwas mehr HTML5 beherrscht wie zum Beispiel
Google Chrome. Auch sollte man überlegen, wenn man eine Webseite in HTML5 ins Netz stellt ob das schon
Sinnvoll ist, da man dann ja auch sicherstellen sollte, dass die Benutzer der Webseite auch einen Webbrowser
benutzen sollten, der die Webseite dann auch anzeigen kann. Denn es bringt einem ja nichts, wenn man zwar
eine Seite in HTML5 online hat, aber kaum einer der Benutzer überhaupt was mit der Seite anfangen kann,
da die meisten nur ein weißes Bild oder so etwas sehen können.
8. Quellen
8. Quellen
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
http://de.wikipedia.org/wiki/HTML5
http://dev.w3.org/
http://www.peterkroener.de/
http://www.whatwg.org/
http://www.html-world.de/
http://www.alistapart.com/articles/previewofhtml5
https://developer.mozilla.org/
http://webkit.org/blog/140/html5-media-support/
http://www.w3schools.com/
http://www.webmasterpro.de/
http://9elements.com/
http://www.golem.de/
http://szenesprachenwiki.de/
http://meiert.com/de/
http://www.webkrauts.de/
http://www.slideshare.net/
http://carsonified.com/
http://maettig.com/
http://www.designmadeingermany.de/
http://www.teialehrbuch.de/
http://powerbook.blogger.de/
http://www.html-5.de/
http://codecandies.de/
http://html5demos.com/
http://www.bluishcoder.co.nz/
http://www.zeit.de/
http://createordie.de/
http://martin.podhovnik.at/
http://www.jonasjohn.de/
14