Firefox 3.5 ist da – ein Grund einen Blick auf HTML5 zu werfen

Firefox 3.5 Logo

Wie in den letzten Tagen des Öfteren zu lesen war, ist der neue Browser Mozilla Firefox in der Version 3.5 erschienen und bringt damit einige Neuerungen. Neben Geschwindigkeitsoptimierungen interessiert Webentwickler wohl vor allem die Neuerungen des W3C-Standards HTML 5 die z. T. Einzug in Firefox halten, so wie auch teilweise schon in Safari 4 und Opera 10, aber auch von Googles Chrome 2 unterstützt werden oder geplant sind.
Wenn Microsoft mit seinem Internet Explorer 8, welcher schon ziemlich gut geworden ist was Webstandards angeht, nicht bald mit einer Zwischenversion nachzieht, tritt wieder das ein, was die ganze Zeit schon ein Problem war: Browser wie Firefox, Opera und Safari unterstützten standardkonformen HTML-Code, XHTML und CSS und der Internet Explorer (wie in der Version 6 und teilweise auch 7) interpretierten was sie wollen, aber nicht standardkonform oder unterstützten eben manche HTML-Tags gar nicht. Viele Dinge waren damit im IE (bis einschließlich Version 7) einfach nicht sinnvoll zu realiseren oder gar unmöglich. Webentwickler können ein Lied davon singen, was es heißt eine Webseite für die gängistens fünf, sechs Browserversionen zu optimieren.

Zum Beispiel wird Firefox 3.5 die neuen HTML5-Tags für audio und video Inhalte unterstützen. Für die Inhalte wird der Firefox 3.5 die frei verfügbaren Codecs Ogg Theora (Video) und Ogg Vorbis (Audio) nativ unterstützen – es ist also kein PlugIn nötig. Wie bei golem.de zu lesen ist, wird Apple mit Safari auf den H.264 Codec setzen, aber auch Ogg unterstützen. Wie ich aus dem Artikel von golem herauslese, ist dem W3C viel daran gelegen, dass ein freier und nicht proprietärer Codec eingesetzt wird, so wie die von Ogg. Auch heise.de hat einen ausführlichen Artikel über Firefox 3.5 und etwas über HTML 5 veröffentlicht.

Bevor ich eine kleine Übersicht neuer Tags aus HTML 5 gebe, hier ein Video von Mozilla das die Neuerungen in der Version 3.5 (unabhängig von HTML 5) zeigt.

Die Tags audio und video

Der video-Tag lässt sich wie folgt einsetzen.

<video alt=”Ein Beispiel Video” src=”http://www.eineurl.de/mitvideo.avi” height=”123” width=”234” title=”Das ist ein Beispiel-Video” autoplay=”noautoplay” loop=”nolooping”/>Sie können das Video nicht anzeigen</video>

Inklusive einem Text, falls der Tag vom Browser nicht unterstützt wird. Momentan wird auch von vielen Seiten (Videoportalen) Flash für das Streaming von Videos benutzt. Der neue Tag könnte, wenn er breitflächig unterstützt wird, das Ende von Flash zum Streamen von Videos sein.

Ein Beispiel zu Audio Tags:

<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>Your browser does not support the <code>audio</code> element. </audio>

Damit lassen sich dann Audio-Dateien im Ogg Vorbis Format abspielen. Beide Tags werden in der neuen Ffox Version 3.5 unterstütz.

Der Tag article

Der article-Tag ist ein Element, um Text (bspw. einen Zeitungsartikel, Forenbeiträge usw.) also solche auszuzeichnen und wird nur als umschließendes Element verwendet. Man könnte es also durchaus als eine art Meta-Element bezeichnen, da es selbst keinen weiteren Zweck erfüllt als den Inhalt näher zu “beschreiben”.

<article> <p><a href="http://www.karrock.de/daf/">das darmstädterFiltrat</a><br /> Aus Darmstadt gibt es einige Blogs, das darmstädterFiltrat gehört auch dazu. Eine Auflistung der Blogs...</p> </article>

Der Tag aside

Der HTML5-Tag aside bezeichnet Inhalt der “nebenstehend” zum Gesamtinhalt gehört, aber ihm nicht direkt zugehörig ist. Damit sind bspw. weiterführende Artikel gemeint. Sie gehören nicht direkt zum Artikeltext, aber sind “angegliederte” Inhalte.

<aside> <ul><li>Quelle 1</li> <li>Quelle 2</li></ul> </aside>

Der Tag dialog

Der dialog-Tag kennzeichnet einen Dialog z. Bsp. ein Interview. Dabei können Fragen und Antworten in der üblichen durch Zeitungen bekannten Form ausgewiesen werden.
Bei diesem Tag fällt mir übrigens wieder ein mal auf, dass das US-amerikanische Englisch immer mehr Einzug sowohl in Programmiersprachen als auch ins Web hält. Nach britischem Englisch heißt es eigentlich “dialogue”. Genau wie es eigentlich “colour” heißt.

Die dt-Elemente kennezeichnen den Namen des Dialogpartners und dd die Frage bzw. Antwort, also den gesprochenen Text.

<dialog> <dt>Zeitung</dt> <dd>Wird es nach der Bundestagswahl eine Erhöhung der MwSt geben?</dd> <dt>Bundeskanzlerin Angela Merkel</dt> <dd>Ähm, ja, also, wissen Sie, ähm. Das gehen wir objektiv an, da müssen wir rein gehen. Das wird von uns in den Ausschüssen geklärt und dann werden wir zu einer sinnvollen Einigung kommen.</dd> <dt>Zeitung</dt> <dd>Äh... Ja!</dd> </dialog>

Der Tag figure

Der figure-Tag kann Elementen eine Bildunterschrift verpassen. Ein Beispiel von microformats.org (s. Quellen):

<figure id="fig2"><legend>Figure 2. Install Mozilla XForms dialog</legend> <img alt="A Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" /></figure>

Der Tag footer

Der footer-Tag kann auch in Kombination z. Bsp. mit dem adress-Tag benutzt werden.

Der Tag header

Der header-Tag ist, genau wie footer, ein neuer Tag zum Kapseln des Kopfbereichs. Zum Beispiel für eine Überschrift mit Teaser:

<header><h3>Firefox 3.5 ist da - ein Grund ein Blick auf HTML 5 zu werfen</h3> <p>Dieser Artikel bietet einen Einblick in die Neuerungen von HTML 5 die zum Teil auch vom Firefox 3.5 unterstützt werden.</p></header>

Der Tag nav

<nav><ul><li>Startseite</li> <li>Seite 2</li> <li>Seit 3</li></nav>

Ein Tag um die Seiten-Navigation zu kapseln.

Der Tag embed

Der Tag embed dient dazu Medieninhalte einzubetten. Das könnte z. Bsp. ein Video sein, wie in unserem Beispiel (mal ausgeblendet, dass es für Videos nun auch das video-Tag gibt).

<embed type="video/quicktime" src="/web_design/paris_vegas.mov" width="340" height="140" />

Der Tag meter

Dieser Tag ist dazu da ein Verhältnis (einen Wert) auszuweisen. Gibt man z. Bsp. eine Bewertung eines Elements zur maximalen Bewertung an, so kann man dies mit dem meter-Tag ausweisen.

<meter min="0" max="4711" title="Gewicht / kg">99kg</meter>

Der Tag source

Der Tag source ist ein extra Tag für das Attribut src für Medienelemente. So kann z. Bsp. aus mehreren angegeben Videos das passende ausgesucht werden.

<audio> <source src="pfad/zum_lied.mp3" type="audio/mpeg"> <source src="pfad/zumlied.ogg" type="audio/ogg"> <p>Dein Browser unterstützt den audio-Tag nicht</p> </audio>

Der Browser wählt dann die passende Quelle aus.

Der Tag time

Dieser Tag ist dazu da Zeit-Angaben zu kapseln.

Dieser Tag, könnte bspw. auch für Zeiten für einen Kalender zur Auszeichnung benutzt werden. Unter umständen wären damit automatische Anordnungsregeln, Kalender usw. möglich.

Der Tag canvas

Der canvas-Tag ist wohl eine der interessantesten neuen Tags, auch wenn mir dessen Anwendungsmöglichkeiten momentan noch nicht ganz erschließt. Hier ist es möglich via DOM eine Fläche auszuzeichnen auf der 2d-Zeichnen möglich sein soll. Auf quackit.com wird folgendes Beispiel aufgeführt (dort in Kombination mit einem Javascript – s. Quellen):

<canvas id="myCanvas" width="300" height="200">Your browser does not support the canvas tag. At the time of writing, Firefox, Opera, and Chrome support this tag.</p> <p>Here's an <a href="/pix/html_5/tags/html_canvas_tag.gif">image of what it's supposed to look like</a>.</canvas>