Neuerungen in HTML 5
In dem ersten Gastbeitrag auf SteviesWebsite berichtet Daniel Busch über die Neuerungen von HTML 5. Des Weiteren gibt es einen kleinen Ausflug zur Gründung von HTML und natürlich den Vergleich zu HTML 4.
Vorwort
Die Auszeichnungssprache HTML ist das Fundament des World Wide Web wie wir es heute kennen und wurde etwa um 1990 in Genf von Tim Berners-Lee (ein britischer Informatiker) am Genfer CERN zusammen mit einigen Kollegen als eine Initiative gestartet um das Internet für einen neuartigen Informationsaustausch zwischen den Wissenschaftlern zu nutzen.
Es ging bei dieser Initiative darum, eine Möglichkeit zu schaffen wissenschaftliche Dokumente online abrufbar zu machen. Es sollten einfache Textformatierungen und das Einbinden von Grafik möglich sein.
HTML Historie
Ganz entscheidend dabei war aber die Idee Links einzubauen zu können, so dass Dokumente mit Verweisen auf beliebige andere Dokumente versehen werden konnten. Das sollte auch dann noch möglich sein, wenn die so verknüpften Dokumente auf ganz anderen Servern im WWW liegen.
Daraus resultierte auch die Bezeichnung HTML Hypertext Markup Language was auf deutsch etwa Auszeichnungssprache (Markup Language) für eine Text der verknüpft werden kann.(Hypertext)
HTML 5
HTML 5 bietet viele neuen Elementen für die strukturelle Einteilung einer Webseite an
Beispiele dafür sind:
| header | Dieses neue Element umfasst den Kopfbereich eines Dokuments und beinhaltet typischerweise den Titel des Dokuments oder die Logos. |
| nav | Ist für Hauptnavigationsblöcke gedacht. |
| article | Hier ist der Ort für die eigentlichen Inhalte der Seite |
| aside | beheimatet Abschnitte z. B. für inhaltliche Einschübe in einem Artikel |
Weitere neue Elemente sind z. B.: embed, mark, meter, source, time oder progress.
Diese können so wie jedes andere HTML-Element auch mit Stylesheets gestaltet werden.
Viele Webseiten, die mit HTML 4 aufgebaut sind, beinhalten die typischen strukturellen Fragmente wie Titel oder Spalten
Bis dato wurde es so gelöst, dass alles in Containers (div) eingeteilt war die alle eine entsprechende Klasse (class) oder einen bestimmten Identifikator (id) hatten.
Mit HTML 5 wird es möglich sein, diese div- Konstrukte zu entwirren.
So wird die Strukturierung der Web-Seiten wesentlich einfacher bzw übersichtlich und nachvollziehbarer werden.
Was vorher mit Quelltext wie
<html> <head> <title> Fensterüberschrift </title> </head> <body> <div id=“header“>..... <div id=“nav“>... </div> </div> ... Rest des Dokuments </body> </html>
gelöst werden musste und man vor lauter abschließender div-Container nicht mehr erkannte (ohne Syntaxhervorhebung (engl. syntax highlighting)) welcher jetzt welchen Container schließt, kann jetzt mit
<html> <head> <title> Fensterüberschrift </title> </head> <body> <header>... </header> <nav>... </nav> ... Rest des Dokuments </body> </html>
gelöst werden.
Nähere Erklärung des neuen Form Elementes.
Wo man Webanwendungen findet, sind auch Formulare nicht weit weg.
Die Formulare von HTML 4 stellten bisher nur allgemeine Formularelemente zur Verfügung, wie zum Beispiel Texteingabe- und Passwortfelder, Checkboxen oder Dropdown-Listen. Bei speziellen Formularelemente (URL, Datum oder E-Mail-Felder) musste man serverseitig kontrollieren ob der Nutzer erlaubte Werte eingibt.
Mit der Version 5 von HTML werden die Möglichkeiten des input-Elements beträchtlich erweitert, denn es werden dem type-Attribut einige neue Werte hinzugefügt.
Als Beispiel möchte ich an dieser Stelle nur mal zwei anführen.
| type=“email“ | Bei diesem type wird eine E-Mail-Adresse erwartet. |
| type=“tel“ | Es wird eine Telefonnummer erwartet. |
Durch diese und andere Möglichkeiten fallen die bisher verwendeten JavaScript-Lösungen weg. Das macht das Surfen ein wenig sicherer und die Seiten werden auch mit abgeschalteten Java-Script korrekt dargestellt.
Multimedia
Was HTML 5 noch auszeichnet ist seine Multimediaunterstützung mit den Elementen
canvas, audio und video oder auch figure.
Browserunterstützung
Der Haken am neuen Webstandard ist die noch in den Kinderschuhen steckende Browser-Unterstützung.
Die Elemente video, audio und canvas können zum Teil schon bei Firefox sowie Safari und Chrome verwendet werden
In Zusammenhang mit den oben genannten Formularen sticht einzig und alleine Opera mit einer Implementierung der meisten neuen Funktionen hervor und Google Chrome sowie Apples Safari (WebKit-Browser) können in diesem Bereich auch einiges vorweisen.
Darüber hinaus gibt es immer nur vereinzelten Support für neuen Features.
Eine ständig aktualisierte Tabelle findet man in der englischen Version von Wikipedia.
Trotz dieser noch vorherrschenden Hindernisse könnte HTML 5 die große Chance auf eine einheitlichere Browserunterstützung haben.
Die vom Browserkrieg zwischen Netscape und Microsoft hervorgegangen Insellösungen und den daraus resultierenden Browser-Hacks (Browserweichen) könnten dann ebenso wie diverse andere Altlasten endgültig entsorgt werden.
Wie HTML in der Version 5 angewendet werden kann, kann man sich auf dieser Seite anschauen.
In eigener Sache
Natürlich kann hier und jetzt nicht alles erschöpfend behandelt werden aber ich werde in meinem eigenen Blog mal eine HTML5-Artikelserie machen.
Danksagung
Hiermit danke ich Stefan für die Möglichkeit auf seinem Blog einen Gastartikel veröffentlichen zu dürfen.
An dieser Stelle muss ich (Stefan) mich eigentlich für diesen schönen Beitrag bedanken. Es wäre schön, wenn ihr euch Daniels Seite mal anseht!
Hier kannst auch Du einen Gastartikel veröffentlichen: Gastautor werden
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Kommentare
Daniel schrieb am 28.04.2010:
Erst mal Danke fürs veröffentlichen. Im Satz vor der Überschrift In eigener Sache hat wohl wein Office einen Link verschluckt. Kannst du die Wortgruppe auf dieser Seite mit dem Link http://html5gallery.com/ versehen und aus dem auch ein auf machen. Und im ersten Satz des Vorwortes fehlt als letztes Wort noch , heißt.
Daniel schrieb am 28.04.2010:
PS.: Dreh mal in der Webadresse www.danielbusch.kilu.de den vor und Nachnamen rum. Sorry habe mich wohl vertippt. Also buschdaniel.kilu.de
Stefan Wienströer schrieb am 28.04.2010:
Alles gemacht, bis auf das fehlende Word heißt, wo genau so das hin? Irgendwie passt es an der Stelle wo ich glaube nicht.
Daniel schrieb am 28.04.2010:
vor (Hypertext)
Stefan Wienströer schrieb am 29.04.2010:
Daraus resultierte auch die Bezeichnung HTML Hypertext Markup Language was auf deutsch etwa Auszeichnungssprache (Markup Language) für eine Text der verknüpft werden kann.(Hypertext) heißt?
Daniel schrieb am 29.04.2010:
Ja aber der Punkt hinter kann weg dafür hinter heißt einen Punkt setzen.
Daniels Blog. Themen aus meiner Welt. schrieb am 18.05.2010:
[...] ist eine Kopie aus meinem Gastbeitrag auf stevieswebsite.de Geschrieben am 18 Mai 2010 in der Kategorie Web. Es ist kein Kommentar vorhanden. Nach vorne [...]
Meine Blog Empfehlungen (Webmaster Friday) schrieb am 11.06.2010:
[...] Fall mal ansehen sollte. Der Start dieser Reihe fing mit einem Gastbeitrag auf SteviesWebsite an: Neuerungen in HTML 5. Neben Webentwicklung werden ab un dan auch noch andere Themen besprochen, die im Netz aktiv [...]
Daniel schrieb am 26.07.2010:
Die neue URL meines Blog's: http://www.buschimnetz.de
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project