HTML5 Überblick

02.06.2010 15:42

von Milan Jovanovic

Was ist HTML5?

HTML5 bringt uns eine neue Generation von Webseiten. Für Web-Entwickler ist die Umstellung vergleichbar wie etwa der Umstieg von HTML-Tabellen zu DIV-Tags.

Die Gruppe WHATWG (Web Hypertext Application Technology Working Group) arbeitet seit 2004 an der Entwicklung dieser Sprache. WHATWG entstand aus Mitarbeitern von Apple, the Mozilla Foundation und Opera Software. Obwohl die Entwicklung an HTML5 erst 2022 abgeschlossen sein soll wird und kann es heute schon verwendet werden.

Wo wird HTML5 bereits heute verwendet?

Youtube und Facebook bieten heute schon die meisten Videos alternativ zu Flash auch per HTML5 an. Sie gehen auf die Bedürfnisse von iPads und iPhones ein, die aus Sicherheits- und Performancegründen ganz auf Flash verzichten.
Ein Beispiel für die Performance von HTML5-Videos gibt es unter http://www.craftymind.com.

Des Weiteren wird HTML5 gerne für Portfolio-Webseiten von Web-Entwicklern verwendet um Ihre Arbeiten darzustellen wie z. B. bei time2project.
Für weitere Beispiele zu den verschiedenen Funktionen und Möglichkeiten sind die folgenden Seiten zu empfehlen:

HTML 5 Showcase

HTML 5 forms Demo

Drag and drop Funktionalität

HTML 5 Geolocation Demo

HTML 5 Canvas Particle

Bei der Frage der Browserabhängingen Unterstützung von HTML5 geht es momentan nicht darum welcher Browser HTML5 unterstützt, sondern welcher Browser welches Element unterstützt. Hierzu gibt es auf http://html5readiness.com/ eine Grafik, die den Fortschritt und die Entwicklung der einzelnen Browser darstellt.

Der Code

Dieses Beispiel zeigt wie einfach die Einbindung eines Videos mit HTML5 funktioniert.

HTML 4.01

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/                 shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="840" height="100">

   <param name="movie" value="images/1.swf">

   <param name="quality" value="high">

   <embed src="videos/banner.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/                 download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="840" height="100">


   </object>

HTML5

<video>
<source src="videos/video1.mp4">
</video>

Nachfolgend sind die nicht mehr verfügbaren sowie die neu hinzugekommenen HTML-Elementen aufgeführt.

Liste von HTML Tags die es nicht mehr geben wird:

<acronym> Tag

Der <acronym> Tag wurde verwendet, um Abkürzungen in HTML 4 zu definieren. Ein Akronym wird wie ein Wort ausgesprochen, z. B. NATO, NASA, ASAP, GUI waren.

<applet> Tag

Der <applet> Tag wurde verwendet, um ein eingebettetes Applet zu definieren. Sie können nun <OBJECT> stattdessen verwenden.

<basefont> Tag

Der <basefont> Tag wurde verwendet, um eine Standard-Schriftart, Schriftfarbe oder Schriftgröße für den gesamten Text in einem Dokument zu definieren. Dies wird nun per CSS gesteuert.

<big> Tag

Der <big> Tag wurde verwendet, um Text zu vergrößern.

<center> Tag

Die <center> Tag wurde zur mittigen Ausrichtung von Text und Inhalt verwendet. Wird nun auch im CSS definiert.

<dir> Tag

Die <dir> Tag wurde verwendet, um eine Verzeichnis-Liste zu definieren. Ist aber mit <ol> und <ul> Tags genauso möglich.

<font> Tag

Der <font> Tag wurde verwendet, um Schriftart, Schriftgröße und die Schriftfarbe des Textes zu definieren. Er gehörte zu den am häufigsten verwendeten Tags in HTML 4. Wird in Zukunft auch nur noch über das CSS gesteuert.

<frame>, <frameset> und <noframes> Tags

Da in HTML5 keine Framesets mehr unterstützt, wird es diese Tags nicht mehr geben. Mit dem Ziel, die Benutzerfreundlichkeit zu verbessern. Framesets erschweren zugleich die Suchmaschinenoptimierung (SEO) .

Der <s> und <strike> Tag wurde verwendet, um durchgestrichenen Text darzustellen. Dies kann mittels <del> oder über das CSS genauso erfolgen.

<tt> Tag

Das TT-Element bewirkte, dass der Text als Teletype oder monospaced Text dargestellt wurde.

<u> Tag

Der <u> Tag wurde verwendet, um Text zu unterstrichenen. Wird nun ebenfalls über das CSS ermöglicht.

<xmp> Tag

<xmp> war einmal als logische Auszeichnung für Quellcode-Beispiele gedacht.

Diese Liste zeigt die neuen HTML5 Tags.

<article> Tag

Der Tag definiert externen Inhalt. Die externen Inhalte könnten von einem News-Artikel, Weblog (Blog), Forum oder jeglicher anderen externen Quelle herstammen.

<aside> Tag

Dieser Tag definiert Inhalt welcher neben solchen platziert wird. Es wäre ein geeigneter Container um z. B. die Navigation neben den Content Bereich einzufügen.

<audio> Tag

Der Tag definiert Klang wie Musik oder andere Audio-Streams.

<canvas> Tag

Der <canvas> Tag wird verwendet, um Grafiken anzuzeigen. Er ist nur ein Container für Grafiken. um Grafiken zu malen muss Javascript verwendet werden.

<command> Tag

Der <command> Tag definiert eine Befehlsschaltfläche, wie einen Radiobutton, ein Kontrollkästchen oder einen Submit-Button. Der Befehl muss in ein Menü-Element sein. Wenn er dies nicht ist, wird er nicht angezeigt.

<datalist> Tag

Der <datalist> Tag definiert eine Liste von Optionen welcher in Verwendung mit dem input-Element den Value definiert. Das DataList Element und seine Optionen werden nicht angezeigt.

<details> Tag
Der <details> Tag dient dazu, Informationen über ein Dokument oder Teile eines Dokuments zu beschreiben.

<embed> Tag

Der <embed> Tag definiert eingebetteten Inhalt wie z. B. ein Plug-in.

<figcaption> Tag

Der <figcaption> Tag enthält eine Information für das "Figur"-Element. Das "figcaption" Element sollte als das erste oder das letzte Kind der "Figur"-Element platziert werden.

<figure> Tag

Der Tagdient zum gruppieren von Elemente. Der Inhalt innerhalb eines Figurenelements ist Stand-alone-Inhalt. Üblicherweise wird es verwendet, um Teile eines Dokuments zu erklären. Kann allerdings auch außerhalb des zu erklärenden Dokuments platziert werden.

<footer> Tag

Der <footer> Tag definiert den Footer eines Abschnitts oder eines Dokuments.

<header> Tag

Der <header> Tag definiert eine Einführung in das Dokument.

<hgroup> Tag

Der <hgroup> Tag definiert die Überschrift eines Abschnitts oder eines Dokuments. Das hgroup Element gruppiert Überschriften wie z. B. <h1> <h6>

<keygen> Tag

Der <keygen> Tag definiert einen generierten Schlüssel.

<mark> Tag

Der <mark> Tag definiert markierten Text. Verwenden Sie den <mark> Tag um Teile Ihres Textes hervorzuheben.

<meter> Tag

Der <meter> Tag definiert eine Messung. Wird nur für Messungen mit einem bekannten minimalen und maximalen Wert benutzt.

<nav> Tag

Der <nav> Tag definiert einen Bereich der Navigation.

<output> Tag

Der <output> Tag definiert verschiedene Typen von Ausgaben wie z. B. die Ausgabe von einem Skript

<progress> Tag

Die <progress> Tag definiert work-in-progress. Verwenden Sie das Fortschritt Element, um den Fortschritt einer aufwendigen JavaScript-Funktion anzuzeigen.

<rp> Tag

Der <rp> Tag ist in Ruby Annotationen benutzt, um festzulegen, was Browser, die keine Unterstützung des Ruby-Elementes haben darstellen sollen. Ein Ruby Annotation sind chinesischen Schriften oder Buchstaben, welche in Ostasien verwendet werden um die Aussprache der ostasiatische Zeichen zu verdeutlichen.

<rt> Tag

Der <rt> Tag definiert eine Erklärung oder die Aussprache der Zeichen (Chinesische Schrift oder Zeichen). Gebraucht in Ostasien, um die Aussprache der ostasiatischen Zeichen zu zeigen.

<ruby> Tag

Der <ruby> Tag definiert eine Ruby Annotation (Chinese Schrift oder Zeichen). Gebraucht in Ostasien, um die Aussprache der ostasiatische Zeichen zu zeigen. Benutze ihn zusammen mit dem <rt> und / oder die <rp> tags. Das Ruby-Element besteht aus einem oder mehreren Zeichen (welche Information zu Bedeutung / Aussprache benötigt), und ein rt-Element, dass diese Informationen darstellt.Gegebenenfalls noch ein rp-Element um Browsern, die keine Unterstützung des "Ruby" Tags besitzen Alternatives anzuzeigen.

<section> Tag

Der <section> Tag definiert Abschnitte in einem Dokument. Wie z. B. chapters, headers, footers oder jedes weiteren Abschnitts des Dokumentes.

<source> Tag

Der <source> Tag definiert Medien Quellen wie z. B. <video> und <audio>.

<summary> Tag

Der <summary> Tag ist einen Header für das "Details"-Element. Es wird verwendet um weitere Informationen über ein Dokument oder Teile eines Dokuments zu beschreiben.

<time> Tag

Der <time> Tag definiert eine Zeit oder ein Datum, oder beides.

<video> Tag

Der <video> Tag definiert Video, wie z. B. einen Movieclip oder andere Video-Streams.

Fazit

Die Entwicklung und Durchsetzung von HTML5 wird sicherlich dadurch bedingt wie sich die Entwickler-Community diese Themas annimmt und wie die Benutzer es verwenden. Stärker ist es allerdings davon abhängig wie die marktführenden Firmen wie Microsoft, Google und Apple mit Ihren unterschiedlichen Plattformen darauf reagieren. Die Tendenz geht eindeutig in eine positive Richtung. Es gibt mittlerweile auch schon Skripte, die das Ausführen von HTML5 im IE6-IE8 ermöglichen.
Was den vielerorts diskutierte Vergleich von Flash und HTML5 anbelangt, so finde ich diesen unnötig. Flash hat sich in den letzten Jahren zusätzlich mit dem Flashdeveloper in die Entwicklung von Desktopapplikationen entwickelt und HTML5 kann mit seinen SVG-Zeichenfunktionen noch lange nicht an komplexe Flashanimationen ersetzen. Beide Technologien werden sich Ihre Gebiete abstecken und nach Plattform und Funktionalität eingesetzt werden.

Zurück