Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Clemens Kaposi 10. November 2009

HTML5 – ein Überblick

HTML5 ist der­zeit in aller Munde.  Ende Mai ließ Google auf der Entwicklerkonferenz »Google I/O 2009« in San Francisco auf­hor­chen, als groß Werbung für den zukünf­ti­gen Webstandard betrie­ben wur­de, wel­cher die Basis für kom­men­de Google-Anwendungen stel­len soll.  Einen wei­te­ren Schub erhielt die neue HTML-Version, als das Standardisierungskonsortium W3C (eng­lisch) Anfang Juli die Einstellung der Arbeiten am par­al­lel ent­wi­ckel­ten XHTML2-Standard ankün­dig­te, um sich voll und ganz auf HTML5 kon­zen­trie­ren zu kön­nen.

HTML5 soll das in die Jahre gekom­me­ne HTML4 bezie­hungs­wei­se XHTML 1 ablö­sen und bes­ser an die neu­en Anforderungen des viel­zi­tier­ten Web 2.0 ange­passt sein. Aufwändige Workarounds sol­len damit der Vergangenheit ange­hö­ren.  Die Entwicklung wird von der WHATWG (eng­lisch) (Web Hypertext Application Technology Working Group) vor­an­ge­trie­ben, einer Arbeitsgruppe, die aus dem W3C her­aus ent­stan­den ist.  Mit Ausnahme Microsofts sind alle nam­haf­ten Browserhersteller in der WHATWG invol­viert.

Wer sich bereits der neu­en Technologie anneh­men will, muss nicht not­wen­di­ger­wei­se alles Alte über Bord wer­fen.  HTML5 ver­sucht groß­teils, abwärts­kom­pa­ti­bel zu sein.  Wer aktu­ell mit den Strict-Varianten von HTML4 oder XHTML 1 arbei­tet, muss grund­sätz­lich nur die Doctype-Deklaration auf <!DOCTYPE html> ändern und eini­ge weni­ge Elemente ent­rüm­peln, die nur der visu­el­len Darstellung die­nen, oder für die es bes­se­re Alternativen gibt.  Natürlich kann man erst mit den neu­en Elementen und Attributen die Stärken von HTML5 rich­tig nut­zen.

Struktur ist Alles

HTML5 kennt eini­ge neue Elemente zur bes­se­ren seman­ti­schen Strukturierung von Dokumenten.  Diese sind vor allem dazu da, um mit den inzwi­schen ver­brei­te­ten <div id=”…”>-Blöcken auf­zu­räu­men und den Aufbau einer Seite stan­dar­di­siert aus­zu­zeich­nen.  Die Schlüsselrollen neh­men hier­bei die neu­en Elemente hea­der, nav, arti­cle, asi­de und foo­ter ein, wel­che – grob umris­sen – fol­gen­de Aufgaben erfül­len:

  • hea­der umfasst den Kopfbereich eines Dokuments und kann typi­scher­wei­se den Titel des Dokuments, Logos, ein Formular zur Schnellsuche oder ein Inhaltsverzeichnis ent­hal­ten.
  • nav ist – nomen est omen – für Hauptnavigationsblöcke gedacht.
  • arti­cle ist der Ort für die eigent­li­chen Inhalte der Seite.  Die Verwendung soll so erfol­gen, dass arti­cle-Blöcke, für sich genom­men, allein­ste­hend sind, also bei­spiels­wei­se auch unver­än­dert als Inhalt eines Newsfeeds ver­wen­det wer­den könn­ten.  arti­cle-Blöcke kön­nen mit sec­tion in meh­re­re Abschnitte unter­teilt wer­den und sind außer­dem schach­tel­bar.
  • asi­de behei­ma­tet Abschnitte, die nicht unmit­tel­bar mit dem eigent­li­chen Inhalt zusam­men­hän­gen – ein klas­si­scher Fall für Sidebars, aber auch für inhalt­li­che Einschübe in einem arti­cle.
  • foo­ter beinhal­tet das, was man übli­cher­wei­se im Fußbereich eines Dokuments fin­det: Autor- und Copyright-Informationen oder Querverweise.  foo­ter kann, aber muss nicht not­wen­di­ger­wei­se am Ende eines Dokuments ste­hen.

Das aktu­el­le Grundgerüst der Seiten des Dr. Web Magazins lie­fert ein prä­de­sti­nier­tes Beispiel für gän­gi­ge HTML-Strukturen, und lie­ße sich ein­fach mit den neu­en HTML5-Strukturelementen for­mu­lie­ren.

Reformulierung des HTML-Grundgerüsts des Dr. Web Magazins in HTML5

Reformulierung des HTML-Grundgerüsts des Dr. Web Magazins in HTML5

Mehr Wert durch mehr Bedeutung

Ausgesprochen nütz­lich sind jene Elemente, die nicht nur ein Mehr an Struktur brin­gen, son­dern auch die Semantik auf Textebene berei­chern.

Mit dem time-Element kann man Datums- und/oder Zeitangaben im Text geson­dert aus­zeich­nen.  Angaben à la »über­mor­gen« kann man mit Hilfe des datetime-Attributs prä­zi­sie­ren.  Das genaue Datum (bezie­hungs­wei­se Uhrzeit) muss dabei im ISO-Format ange­ge­ben wer­den:

Der diesjährige »CSS Naked Day« <time datetime="2009-04-09">anfang April</time> fand wieder mehr als 1000 Unterstützer aus aller Welt.

Durch die maschi­nen­les­ba­ren Metaangaben ist bei­spiels­wei­se eine Funktion zum Exportieren in ein Kalenderprogramm denk­bar.  Das time-Element eig­net sich lei­der nicht für his­to­ri­sche Angaben (die oft unge­nau sind, etwa »19. Jahrhundert«) oder Daten, die nicht den gre­go­ria­ni­schen Kalender ver­wen­den.  Dieser Umstand wird aller­dings noch dis­ku­tiert, und es scheint, als sei hier das letz­te Wort noch nicht gespro­chen.

Ein wei­te­res nütz­li­ches Element ist mark.  Mit mark kön­nen Textpassagen her­vor­ge­ho­ben wer­den, wie man es mit einem Leuchtstift auf Papier machen wür­de.  Ein klas­si­scher Verwendungszweck ist das Hervorheben von Schlüsselbegriffen auf einer Seite, die als Ergebnis einer Suche gelie­fert wur­de.

<p>In der Bucht von San Francisco befindet sich unter anderem die ehemalige Gefängnisinsel <mark>Alcatraz</mark>, wo eine Flucht nahezu unmöglich war.</p>

Anzeigebeispiel für mit dem neuen mark-Element hervorgehobenen Text

Anzeigebeispiel für mit dem neu­en mark-Element her­vor­ge­ho­be­nen Text (Opera 10.01/Linux)

Entwickler von Web-Applikationen wer­den das neue Element pro­gress begrü­ßen.  Es erlaubt, den Fortschritt einer Aufgabe anzu­zei­gen – bei­spiels­wei­se als Prozent- oder Sekundenangabe – und via JavaScript lau­fend zu aktua­li­sie­ren. Mit dem Attribut value (bezie­hungs­wei­se mit dem Elementinhalt) läßt sich der aktu­el­le Wert set­zen.  Das max-Attribut spe­zi­fi­ziert den Wert, der bei Vervollständigung des Tasks erreicht wird.  Ein enger Verwandter von pro­gress ist meter, wel­ches einen sta­ti­schen Überblick über einen aktu­el­len Ist-Zustand gibt, etwa den aktu­el­len Platzverbrauch des eige­nen Webmail-Kontos:

Fortschritt: <progress max="100" value="67">67%</progress>
<meter min="0" max="100" value="75">75 von 100 MiB verbraucht</meter>

Multimedia total

Eine wei­te­re Neuerung stellt das Element figu­re dar.  Damit kön­nen Abbildungen mit einer Beschriftung ver­se­hen wer­den (legend), wie man es aus dem Printbereich kennt.  Bislang muß­te man sich dazu mit Mikroformaten (eng­lisch) behel­fen.  Man ist dabei frei­lich nicht auf Fotos oder Grafiken beschränkt, son­dern kann dies bei­spiels­wei­se auch für Videos oder Programmier-Codeausschnitte ver­wen­den, zum Beispiel:

<figure>
<img src="golden-gate-bridge.jpg" alt="" />
<legend>Abbildung 1.  Die Golden Gate Bridge. (© Christian Mehlführer)</legend>
</figure>
<figure>
<pre><code>print "Hello, world!"</code></pre>
<legend>Abbildung 2.  Das »Hello, world!«-Programm in Python.</legend>
</figure>

Anzeigebeispiel für ein mit dem figure-Element eingebettetes Bild (Opera 10.01/Linux)

Anzeigebeispiel für ein mit dem figu­re-Element ein­ge­bet­te­tes Bild (Opera 10.01/Linux)

Vor allem Bilder- und Videogalerien wer­den von die­sem neu­en Element pro­fi­tie­ren und zukünf­tig ein­heit­lich aus­ge­zeich­net wer­den kön­nen, womit man auch schon bei der nächs­ten Neuerung ange­langt ist: den Elementen video und audio.

Zunehmende Bandbreiten haben in den letz­ten Jahren die sprung­haf­te Verbreitung von Videodaten im WWW mög­lich gemacht, Stichwort: YouTube.  Mittlerweile fin­det man Filmchen und Audioschnipsel an allen Ecken.  Dieser Trend war bei der Erstellung der alten HTML-Spezifikation vor zir­ka zehn Jahren, als die heu­ti­gen Möglichkeiten des Internet noch nicht ein­mal in den Kinderschuhen steck­ten, nicht abseh­bar.  Entsprechend umständ­lich ist bis­wei­len immer noch die brow­ser- und platt­form­über­grei­fen­de Einbindung von Multimediadateien.

video und audio sol­len dem ein Ende set­zen und bie­ten eine ein­fa­che Lösung an:

<video src="montana-to-rice.ogv" type="video/ogg; codecs='theora, vorbis'" controls="controls"></video>
<audio src="the-play-radio-call.oga" type="audio/ogg; codecs='vorbis'"></audio>

Anzeigebeispiel für ein mit dem video-Element eingebettetes Video (Firefox 3.5.4/Linux)

Anzeigebeispiel für ein mit dem video-Element ein­ge­bet­te­tes Video (Firefox 3.5.4/Linux)

Wenn – wie im Beispiel – das con­trols-Attribut gesetzt ist, kön­nen die Browser dann selbst alle nöti­gen Kontroll-Elemente zur Steuerung anzei­gen, etwa Fortschrittsbalken, Start/Pause-Schaltfläche oder Lautstärkenregelung.  Die Crux an der Geschichte, es wird in der Spezifikation wohl kein gemein­sa­mes Audio- und Videoformat fest­ge­legt wer­den, wel­ches jeder Browser unter­stüt­zen soll­te.  Daher ist es rat­sam, mit dem type-Attribut den MIME-Type der ein­ge­bun­de­nen Mediendatei zu spe­zi­fi­zie­ren. Ursprünglich waren die frei­en Codecs der Ogg-Familie (eng­lisch) als gemein­sa­me Basis ange­dacht, doch das wider­spricht bei­spiels­wei­se Apples Interessen, wel­ches sein haus­ei­ge­nes Quicktime-Format vor­an­trei­ben will.  Somit müs­sen Videoersteller wei­ter­hin hof­fen, daß eine mög­lichst gro­ße Zahl an Clients ihr gewähl­tes Videoformat unter­stützt.  Ob damit eine Abkehr von den gän­gi­gen sub­op­ti­ma­len Flash-Lösungen gelingt, bleibt abzu­war­ten.

Web-Applikationen

Die größ­te Aufmerksamkeit erregt aktu­ell das can­vas-Element.  Es stellt grund­sätz­lich eine 2D-Bitmap-Zeichenfläche frei defi­nier­ba­rer Größe zur Verfügung.  Mittels JavaScript kann man dar­in zeich­nen und Grafiken on-the-fly erstel­len.  Somit las­sen sich zum Beispiel Diagramme ein­fach dyna­misch gene­rie­ren, oder man kann auch Mini-Spiele damit pro­du­zie­ren.

<canvas width="150" height="100" id="canvas" />

wird mit ent­spre­chen­dem JavaScript

var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(160, 63, 63, 0.5)';
ctx.fillRect(20, 20, 80, 60);
ctx.fillStyle = 'rgba(63, 63, 160, 0.5)';
ctx.fillRect(70, 30, 40, 60);
}

zu

Anzeigebeispiel für eine canvas-Zeichnung (Firefox 3.5.4/Linux)

Anzeigebeispiel für eine can­vas-Zeichnung (Firefox 3.5.4/Linux)

An und für sich wären sol­che Anwendungen auch mit dem bereits eta­blier­ten XML-Vektorformat SVG (eng­lisch) rea­li­sier­bar, doch der Durchbruch im Web wur­de bei SVG nie erreicht.  Auch wenn sich der Browserhersteller aus Redmond mit der Unterstützung von can­vas noch ziert, besteht hier mehr Hoffnung.  Das neue Element ist zum einen ein Teil der kom­men­den Spezifikation und kei­ne eigen­stän­di­ge Technologie und zum ande­ren bringt es eine fla­che­re Lernkurve mit sich, da es über das Entwicklern bereits ver­trau­te JavaScript zu bedie­nen ist.

Web Forms 2.0

Wo Web-Applikationen sind, sind Formulare nicht weit.  HTML4 stellt nur all­ge­mei­ne Formularelemente zur Verfügung, wie zum Beispiel Texteingabe- und Passwortfelder, Checkboxen oder Dropdown-Listen.  Wenn man in einem Textfeld etwa eine Datumseingabe erwar­tet, so ist man in der Regel gezwun­gen, ser­ver­sei­tig zu veri­fi­zie­ren, ob es sich bei der Benutzereingabe über­haupt um ein gül­ti­ges Datum han­delt.  Ähnlich ver­hält es sich bei URLs, nume­ri­schen Werten oder ande­ren Eingaben.

HTML5 erwei­tert die Möglichkeiten des input-Elements beträcht­lich, indem es dem type-Attribut eini­ge neue Werte beschert.  So kann man bei­spiels­wei­se mit type=“email” ange­ben, dass man eine E-Mail-Adresse erwar­tet.  Die Überprüfung, ob es sich bei einer Eingabe um eine gül­ti­ge Adresse han­deln kann, fin­det dann bereits direkt im Browser statt – ohne, dass der Web-Entwickler dazu einen Finger rüh­ren muss.  Weitere neue type-Werte sind date, time und datetime (bzw. datetime-local) für Datums- und/oder Zeitangaben, num­ber für nume­ri­sche Werte, color für RGB-Farbwerte in Hex-Notation oder url für Internetadressen.

Anzeigebeispiel für einige der neuen input-Eingabetypen (Opera 10.01/Linux)

Anzeigebeispiel für eini­ge der neu­en input-Eingabetypen (Opera 10.01/Linux)

Für kom­ple­xe­re Fälle kann man über das pat­tern-Attribut ein Suchmuster in Form eines regu­lä­ren Ausdrucks ange­ben, auf wel­ches der Eingabewert zutref­fen muss.  Sehr prak­tisch ist in die­ser Hinsicht auch das neue Attribut requi­red.  Wenn es gesetzt ist, muss das betref­fen­de Feld vom Benutzer aus­ge­füllt wer­den, unab­hän­gig von mög­li­chen wei­te­ren Werteinschränkungen.

Ein wei­te­res Highlight des neu­en input-Elements ist das auto­com­ple­te-Attribut.  Setzt man die­ses auf on, so wird dem Browser signa­li­siert, dass Eingaben in die­ses Feld gespei­chert und bei zukünf­ti­gen Seitenaufrufen zur auto­ma­ti­schen Vervollständigung ange­bo­ten wer­den sol­len – ein klas­si­scher Anwendungsfall für Suchfelder.  In die­sel­be Kerbe schlägt das list-Attribut, wo man die id eines im Dokument ange­führ­ten data­list-Elements ange­ben kann. Die opti­on-Einträge unter­halb der so ver­knüpf­ten data­list die­nen dem input-Element als Eingabevorschläge.

<label for="datalist">Suche Statistiken für…</label>
<input id="datalist" type="text" name="name" list="mylist" />
<datalist id="mylist">
<option value="Joe Montana" />
<option value="Jerry Rice" />
<option value="Steve Young" />
</datalist>

Anzeigebeispiel für ein input-Feld mit Eingabevorschlägen eines datalist-Elements (Opera 10.01/Linux)

Anzeigebeispiel für ein input-Feld mit Eingabevorschlägen eines data­list-Elements (Opera 10.01/Linux)

Nützlich ist eben­falls das Attribut auto­fo­cus.  Ist es bei einem Element gesetzt, so wird die­ses auto­ma­tisch fokus­siert, sobald die Seite voll­stän­dig gela­den ist.  Damit kann ein Benutzer sofort mit dem Ausfüllen eines Formulars begin­nen, ohne erst noch das betref­fen­de Eingabefeld extra ankli­cken zu müs­sen.

Allein durch die­se hier auf­ge­zähl­ten Neuerungen wer­den zahl­rei­che gän­gi­ge JavaScript-Lösungen durch einen ein­heit­li­chen Standard obso­let.

Schöne neue Welt

Der Standardisierungs- und Spezifizierungsprozess von HTML5 ist aktu­ell noch im Gang und soll bis 2010 abge­schlos­sen wer­den.  Dieser Artikel stellt nur einen kur­zen Streifzug mit einer unvoll­stän­di­gen Auswahl an neu­en Elementen dar.  HTML5 kann dar­über hin­aus auch noch viel mehr – bei­spiels­wei­se wer­den JavaScript-Schnittstellen zur Benutzerinteraktion defi­niert, unter ande­rem Drag-and-Drop-Support.

Der Haken am neu­en Webstandard: die Browser-Unterstützung steckt noch in den Kinderschuhen.  Einzig in punc­to Formulare sticht Opera mit Implementierung der meis­ten neu­en Funktionen her­vor und auch WebKit-Browser wie Apples Safari sowie Google Chrome kön­nen in die­sem Bereich schon eini­ges vor­wei­sen.  video, audio und can­vas kön­nen zum Teil schon bei Firefox sowie Safari und Chrome ver­wen­det wer­den. Darüber hin­aus gibt es immer wie­der nur punk­tu­el­len Support für ein­zel­ne Features. Die eng­lisch­spra­chi­ge Wikipedia bie­tet lau­fend aktua­li­sier­te Vergleichstabellen an.

Dies muss jedoch nicht not­wen­di­ger­wei­se ein Hindernis für den Einsatz sein.  Dank Graceful degra­da­ti­on wer­den unbe­kann­te Elemente meist sinn­voll dar­ge­stellt.  Stolpert ein Browser bei­spiels­wei­se in einem Dokument über das ihm unbe­kann­te mark-Element, so wird der Inhalt übli­cher­wei­se als nor­ma­ler Fließtext dar­ge­stellt.

Bis auf Microsofts Internet Explorer las­sen sich die neu­en Elemente grund­sätz­lich tadel­los via CSS for­ma­tie­ren und auch dem Redmonder kann man mit dem HTML5 enab­ling script (eng­lisch) von Remy Sharp auf die Sprünge hel­fen. Alternativ kann man dem IE auch mit einem Plugin, Google Chrome Frame (eng­lisch), moder­ne HTML5-Funktionalität bei­brin­gen.

Konkrete Beispiele, wie HTML5 bereits heu­te schon in frei­er Wildbahn ein­ge­setzt wird, bie­tet die HTML5 Gallery (eng­lisch), wo ambi­tio­nier­te Entwickler von bestehen­den Seiten ler­nen und sich inspi­rie­ren las­sen kön­nen.

Mit HTML5 besteht die gro­ße Chance auf eine ein­heit­li­che­re Browserunterstützung eines Standards. Die teil­wei­se wüs­ten Auswüchse von brow­ser­ei­ge­nen Features aus dem ehe­ma­li­gen Browserkrieg zwi­schen Netscape und Internet Explorer kön­nen eben­so wie diver­se Altlasten end­gül­tig ent­sorgt wer­den. (tm)

Clemens Kaposi

Clemens Kaposi arbeitet als Software Engineer im Mobilfunkbereich und ist in seiner Freizeit als Entwickler von Web-Applikationen tätig. Er ist Herausgeber von 49ersFanZone.net, der deutschsprachigen Community für Fans der San Francisco 49ers. Clemens studierte Angewandte Informatik an der Universität Salzburg.

36 Kommentare

  1. Sehr schön.

    Bis auf den unschö­nen Fehler das figu­re nicht mit legend benutzt wer­den kann, das ist inva­li­der HTML Code.
    Zum Beschriften von figu­re wird fig­cap­ti­on benutzt.

    Ich weiss jetzt aller­dings nicht wie das zu dem Zeitpunkt war als der Artikel erstellt wur­de.

  2. Immer die­se Vorfreude und dann muß man doch wie­der jah­re­lang auf die IE-Benutzer war­ten.

  3. Herzlichen Dank für den Überblick – da freut man sich doch auf die Zukunft! Flash adieu!

  4. Verrückt wenn man sich mal über­legt was wir in den letz­ten zehn Jahren für eine Entwicklung mit­ge­macht haben. HTML5 ist mal wie­der das nächs­te Level und bis es wirk­lich in allen Lebenslagen und Interaktionen ver­wirk­licht ist, gibt es schon wie­der das nächs­te Level!
    Unsere Grosseltern dach­ten, sie hät­ten bei der Erfindung des Telefons was gro­ßes mit­er­lebt… hard­core! I love it!

  5. Die Möglichkeit, Text mehr­spal­tig dar­zu­stel­len, wird es in Zukunft wohl geben. Da es sich dabei aller­dings um etwas han­delt, das ledig­lich der opti­schen Darstellung dient, ist das gan­ze nicht in HTML5 son­dern in CSS3 ange­sie­delt – Stichwort »Multi-column Layout Module«. Die Einführung zur aktu­el­len W3C-Empfehlung lie­fert ein paar schö­ne Beispiele hier­zu: http://www.w3.org/TR/css3-multicol/

  6. Sehr guter Beitrag!

    Eine Frage an den Autor: Ich habe gehört, dass es in HTML 5 mög­lich sein soll Text mehr­spal­tig zu lay­ou­ten, ohne dafür div id=“links”, id=“mitte”, usw… zu benut­zen. Also so etwas wie “spal­ten” mit attri­bu­ten für anzahl, höhe etc. Gibt es die­ses Element wirk­lich, oder ist das nur ein Gerücht?

  7. schlies­se mich den VorrednerInnen an: sehr schö­ner Überblick.

    Übrigens gibt es unter http://remysharp.com/2009/01/07/html5-enabling-script/ ein klei­nes Script, dass die Verwendung der neu­en HTML5-Elemente auch im IE ermög­licht.

  8. Vielen Dank für die­sen gelun­ge­nen Artikel. Ich hab ihn mit gros­sem Interesse fast kom­plett durch­ge­le­sen (nor­ma­ler­wei­se über­flie­ge ich sonst die meis­ten Artikel im Schnell-Lese-Verfahren). Freue mich schon jetzt auf HTML5, denn es bie­tet im Gegensatz zu frü­he­ren Erweiterungen des HTML-Standards alle­samt nütz­li­che Funktionen.

  9. @Harry Schmieder (#18): Ich kann mir schon den­ken, war­um Google die logi­sche Struktur ver­bes­sert haben will: Sie wol­len so ein­fach wie mög­lich Artikel aggre­gie­ren. Da hilft “arti­cle” sehr dabei. Beispielsweise.

    Ich habe kei­ne der Funktionen gese­hen, die für den User inter­es­sant wären. Auch bei Video hat man sich nun nicht auf einen Standard geei­nigt. Dem User ist es egal, wie logisch struk­tu­riert eine HTML-Seite ist. Er schaut sie nur an. Er will ja den Content nicht maschi­nell wei­ter­ver­ar­bei­ten.

    Auf Seiten mit WErbung, die auch von Werbung leben, dürf­te es etwas hei­kel wer­den. Was machen die, wenn sich die User per User-CSS nur “arti­cle” und “nav” zei­gen las­sen?

    Also ent­we­der wird das dann nicht kor­rekt aus­ge­zeich­net -um eben die Werbung anzu­zei­gen, Werbebanner also inner­halb “arti­cle” – oder es wird ein­fach auf wer­be­fi­nan­zier­ten Seiten nicht ein­setz­bar sein.

  10. Danke für die Info!

    für mich heißt dies aber, viel Mühe für etwas, dass man eigent­lich nicht braucht. Eine ver­nünf­ti­ge Auszeichnung hat man bei den heu­ti­gen Standards nach XHTML auch. Den Kunden inter­es­siert es in der Regel über­haupt nicht (noch nicht mal die heu­ti­gen Standards) und er möch­te des­halb dafür auch nicht bezah­len! Das Ganze ist haupt­säch­lich etwas für Spezialisten und Fetischisten ;-) – lei­der.

    Was mir auf den ers­ten Blick auch nicht gefällt, ist dass star­re Korsett. Mit DIV’s, ID’s und Klassen, bin ich ein­fach fexi­bler, ent­spre­chend mei­ner indi­vi­du­el­len Anforderung/Site. Wenn man hier die aktu­el­len Standards ver­nünf­tig ver­wen­det hat man genug Möglichkeiten. Bei CSS3 sehe ich es ggf. etwas anders, da es ja hier im wesent­li­chen um Gestaltung geht, und hier­bei wie­der­um um Vereinfachung. Was der Kunde braucht sind “Einfach gute Websites” und wenig kom­pli­zier­tes und auf­wen­di­ges :-). Und da MS$ nicht mit zieht bzw. dabei ist, wird dass nächs­te Problem wie­der sicht­bar… Also für was den Aufwand? – Leider.

    Gruß Johannes

  11. Schöner Überblick.
    Da freu ich mich schon­mal drauf.

  12. Danke für die­sen Überblick.
    Wasser auf unse­re Mühlen.
    Aber bis das mal umge­setzt ist, wird noch viel Wasser die Isar hin­ab flies­sen. Die (sehr gro­ße) Firma in der ich neben­bei arbei­te, hat Anfang 2009 (!) den Standard-Browser ihrer Firmen-Rechner von IE6 auf IE7 umge­stellt…

  13. Die Definition von «asi­de» wur­de übri­gens im ehe­ma­li­gen Sinn geän­dert – «asi­de» steht nur für Elemente, die sekun­dä­re Informationen rela­tiv zum Artikel bzw. zur Seite bie­ten – es soll­te also inner­halb eines arti­cle-ele­ments nicht als direk­ten Ersatz von «sidebar»-Divs benutzt wer­den.
    sie­he auch http://html5doctor.com/aside-revisited/

  14. …fei­ner blog – wir kom­men öfter.

    PREGAS

  15. Schöner und anschau­li­cher Artikel. Doch bis auch der Internet Explorer (und damit vie­le Internetnutzer) HTML5 unter­stützt, wird noch viel Wasser den Rhein lang flie­ßen.

    Gruß
    Armin

  16. Wirklich ein tol­ler Bericht. Ich freue mich schon auf die neu­en Standards. Auch wenn ich zuge­ben muss, mich sel­ten 100% an Standards gehal­ten zu haben. Dem Großteil mei­ner Kunden sind die­se Standards egal, denn sie erzie­len kei­nen Gewinn. Selbst die Extrakosten die wir für den IE6 neh­men, wer­den ohne Murren bezahlt. Ich hof­fe das die­ser Browser irgend­wann stirbt und das der Hersteller sei­ne Programme zukünf­tig anders opti­miert. Die Philosophie von Microsoft ist ja längst bekannt. Schade eigent­lich. Wäre das nicht wun­der­bar, wenn wir eine Website/Projekt umset­zen, die auf allen Browsern gleich aussieht/läuft und die ver­schie­de­nen Browser nur noch dazu da wären, um unter­schied­li­che Funktionen anzu­bie­ten bzw. er unab­hän­gig von der Renderengine wäre? *trau­men­de* :)

  17. Gute und inter­es­san­te Hinweise von Clemens Kaposi, dafür mei­nen Dank.

    Wenn aller­dings die Standardisierung von HTML 5 für die wich­tigs­ten Browser genau­so lan­ge dau­ert wie die von CSS 3, dann sehe ich schwarz für die effek­ti­ve Nutzung von HTML 5 in naher Zukunft.

    Es ist wirk­lich längs­tens an der Zeit, den wich­tigs­ten Browser-Herstellern gewis­se Dinge “auf­zu­zwin­gen”, die sowohl für Seitenentwickler wie auch für Benutzer wich­tig und gut sind.

    Eine zeit­na­he Umsetzung aller Browser-Lieferanten zumin­dest der sinn­volls­ten Neuerungen von HTML 5 und CSS 3 wäre zu erhof­fen und zu erwar­ten.

    Bisher waren die Browser auf dem Markt näm­lich nur so gut, wie es auch die Webdesigner waren! Weil – gera­de seit Web 2.0 – NUR die Webdesigner gro­ßen Wert auf die Einhaltung aktu­el­ler Standards gelegt haben, woge­gen es die meis­ten Browserhersteller mehr oder weni­ger nicht inter­es­siert hat.
    Es soll­te aber so sein: Ein guter Browser ist nur der, der die sinn­vol­len und vom W3C abge­seg­ne­ten neu­en Standards schnell und sau­ber imple­men­tiert!

    Und trotz zuneh­men­der Anzahl von Seiten, die mit Hilfe von css in Form und Inhalt getrennt und an Annäherung an Barrierefreiheit erstellt sind, gibt es noch immer unzäh­li­ge ärger­li­che Darstellungs-Unterschiede und Interpretationsarten unter den Browsern.
    Da machen dann Browser wie wir sie ken­nen und auch das W3C nicht wirk­lich Sinn, und man soll­te sich über­le­gen, ob zukünf­tig Browser nur noch von Webdesignern her­ge­stellt wer­den.

    Das Internet gibt es jetzt schon über 16 Jahre. Langsam soll­te man uns Webdesignern unse­re Arbeit durch Einhaltung von Standards mal etwas leich­ter machen.

    Und auch gewis­se Suchmaschinen soll­ten sich ihrer Wurzeln besin­nen und dar­auf, dass sie schlicht­weg dazu da sind, Seiten anhand von Suchbegriffen der User zu fin­den. Nicht aber, um Webdesignern vor­zu­schrei­ben, wie sie ihre Seiten erstel­len müs­sen und vie­le ande­re Dinge berück­sich­ti­gen müs­sen, damit die Seiten über­haupt find­bar wer­den.
    Das habe ich noch nie ver­stan­den und das wer­de ich auch nie ver­ste­hen.

  18. Ich war schon immer ein Anhänger von HTML. Als Grundstruktur ist es
    im Browserbetrieb nicht mehr ver­zicht­bar. Behandelt wur­de es oft wie ein
    Gehbehinderter, der an Krücken gehen muß und in alle Richtungen wur­de
    nach Alternativen gesucht. HTML zu ver­bes­sern und wei­ter­hin zu benut­zen,
    war die effek­ti­ve­re und klü­ge­re Idee. Schlank wirkt es und cle­ver ist es auch,
    gute Handhabung wird ver­spro­chen. Ich bin begeis­tert, hat sich doch die
    Erkenntnis, sim­pel ist noch immer das Beste, gera­de bei denen durch­ge­setzt,
    die ger­ne mal alles Alte über den Haufen wer­fen, auch um den Preis, daß
    Ihre Neuerungen alles ver­kom­pli­zie­ren und ein­heit­li­che Standards
    grund­sätz­lich in Frage gestellt wer­den. Das muß viel­leicht so sein, Hauptsache
    man fin­det anhand der Brotkrumen den Weg zurück. Na dann, viel neu­en Spaß !

  19. Naja E-Mail und Datumseingabefelder hin oder her. Kontrollieren muss man trotz­dem immer. Es ist immer ein­fa­cher zu schum­meln und wenn man sieht wie vie­le User noch immer mit dem anti­quier­ten IE6 unter­wegs ist, da weiß jeder das es noch Jahre braucht ehe man wirk­lich mal eine HTML5-Seite effek­tiv erstel­len und “ver­kau­fen” kann.

  20. Hi Zusammen,

    aus­ser das DIVs nun spre­chen­de Namen bekom­men und es nun mög­lich ist cli­ent­sei­tig etwas “malen” zu las­sen, ist das für mich kein Grund, war­um es HTML5 geben soll. Besser wäre alle Browserhersteller wür­den sich auf EINEN Standart eini­gen und den auch kosen­quent umset­zen. Alles Andere ist doch heu­te schon dank JS-Frameworks mög­lich. Einfach als JQuery und Co. geht es ja kaum noch, oder?

  21. @Fritz, das stimmt nicht ganz. In HTML 4 und damit auch in XHTML 1 ist dl eine »defi­ni­ti­on list«, also zum Auszeichnen von Definitionen gedacht.
    Wer in die­sen Sprachen ein Bild mit den ent­spre­chen­den Elementen nur beschreibt aber nicht defi­niert, der erzeugt eben kein kor­rek­tes Markup, son­dern nur eine Layouttabelle mit ande­ren Mitteln.

    Erst in HTML5 wur­de das Element als »descrip­ti­on list« umge­deu­tet, seman­tisch auf­ge­weicht und für eine brei­te­re Anwendung auf­be­rei­tet. Das muß man nicht mögen – in HTML5 geht Pragmatismus eben vor Eleganz – aber wir kön­nen damit leben, den­ke ich.

    Ältere (nur?) Versionen JAWS’ behan­deln das noch als Definitionsliste und sagen vor jedem dd »ent­spricht«.
    Darauf soll­te man beim Auszeichnen und bei den Formulierungen noch eine Weile Rücksicht neh­men, denn ob des hohen Preises wird JAWS nicht oft aktua­li­siert.

  22. Hallo Clemens,

    »dt« und »dd« hat aber nichts mit HTML 5 zu tun, son­dern wird auch unter den aktu­el­len (X)HTML Versionen genau für den beschrie­be­nen Zweck schon seit lan­gem ver­wen­det, vor allem auf Seiten, die sich um seman­tisch kor­rek­tes Markup bemü­hen.

  23. Achja… die Zukunft könn­te so schön wer­den. :D

  24. Danke sehr für die­sen super Beitrag und die damit her­vor­ge­brach­te Übersicht der gro­ßen Neuerungen.

    Gruß.

  25. Danke Thomas, Du hast natür­lich völ­lig recht. Es tut mir leid, daß das an mir vor­bei­ge­gan­gen ist. Es wer­den nun­mehr »dt« für die Beschriftung und »dd« als Wrapper für die Abbildung selbst »miß­braucht«. Eine typisch prag­ma­ti­sche Entscheidung.

  26. legend ist schon vor ein paar Wochen aus figu­re ent­fernt wor­den, weil die Umsetzung in den ein­zel­nen Browser so schwie­rig ist.

  27. Super Artikel, der einen schö­nen Überblick gibt.
    Ich bin gespannt, wie schnell die Browserhersteller mit kom­pa­ti­blen Versionen auf­war­ten.

    Spannend wird sicher auch, wie Google und ande­re Suchmaschinen den Einsatz von HTML5 in ihren Ranking-Algorithmen “beloh­nen”.
    Davon wird dann abhän­gen, wie schnell gro­ße kom­mer­zi­el­le Angebote ent­spre­chend über­ar­bei­tet wer­den.

  28. Schöner Überblick. Ein wenig mehr auf die ein­zel­nen Elemente gehen die Webkrauts ein – ich darf hier doch mal einen Link pos­ten?
    http://www.webkrauts.de/2009/10/06/html5-in-der-praxis-2/
    Nur eine Korrektur: Formularangaben soll­te man lie­ber cli­ent­sei­tig mit JavaScript prü­fen, aber das wird ja dann mit HTML 5 über­flüs­sig;-)

  29. Klingt wirk­lich porn­ös!! Hoffentlich kommt das bald!

  30. dan­ke, in der Hoffnung dass mal ein sicht­ba­rer Vorteil gegen­über Baukastensystemen ein­ge­bracht wird.

  31. Guter Abriß der wich­tigs­ten Neuerungen, die dann in 5 – 10 Jahren Standard sein wer­den. ;-)

  32. Sehr inter­es­san­ter Artikel.
    Ja bis das alle Browser unter­stüt­zen, ist die eine Seite.
    Bis alle User die­sen Browser auch benut­zen, ist die ande­re Seite. Wieviel sur­fen noch mit IE6?

  33. Schöne Übersicht, freu mich auf HTML 5 – kann es kaum abwar­ten. Bis das jedoch alle Browser unter­stüt­zen wird wohl noch eini­ge Zeit ver­ge­hen.

  34. Hui…endlich mal wie­der ein brauch­ba­rer Beitrag! Bin begeis­tert!

    HTML5 ist eine sehr gute Evolution, aber kei­ne Revolution.

Schreibe einen Kommentar zu fewe Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.