1039408

Mit HTML 5 in das schönere Web

09.09.2010 | 12:23 Uhr |

Fragt man den Webdesigner seines Vertrauens nach einer Bildunterschrift oder einem Schieberegler in einem Formular, lautet die Antwort: Schwierig. Mit Safari 5 und anderen modernen Browsern heißt es dagegen: HTML 5

HTML5-Demo
Vergrößern HTML5-Demo

Tim Berners-Lee hat vor über 30 Jahren HTML erfunden - damit Wissenschaftler schneller zwischen zusammengehörigen Texten wechseln können. Nach 1995 kamen Bilder, Formulare und mehr hinzu und es entstand das Internet, das wir kennen. Hinter den Kulissen ringen dort Firmen, Personen und internationale Gremien um Einfluss auf HTML.

In der Regel merkt man vom Ringkampf der Browser-Hersteller nichts. Es sei denn, man sieht mal wieder eine Internet-Seite mit Videos, die unter Windows funktioniert, aber am Mac nicht. Oder ein wild verrutschtes Design, bei dem Buchstaben und Bilder übereinander stehen.

HTML 5 ist auf Betreiben einiger großer Firmen wie Apple, Mozilla, Google und Microsoft entstanden (und es entsteht noch, da dieser Standard noch nicht "offiziell" ist) und zählt in der verrückten Welt des Internets als "Nachfolger" von HTML 4.01 und XHTML 1. (XHTML 2 gilt als "tot" - ohne weitere Entwicklung).

HTML 5 macht es einfacher

Quizfrage: Lässt sich Zeile 1 oder Zeile 2 schneller lesen?

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. <!DOCTYPE html>

Für die Augen eines HTML-Designers ist diese Seite ziemlich einfach konstruiert und sie zeigt dennoch einige schöne HTML-5-Besonderheiten.
Vergrößern Für die Augen eines HTML-Designers ist diese Seite ziemlich einfach konstruiert und sie zeigt dennoch einige schöne HTML-5-Besonderheiten.

Die zweite Zeile ist HTML 5, und sie macht klar, warum nicht nur Webseitenentwickler vom neuen Standard profitieren werden: Die geringere Komplexität führt zu weniger Fehlern. Sprich: Der Aufwand für die Produktion von HTML-Seiten sinkt.

Noch viel deutlicher wird das bei einer Abbildung (Englisch: "figure"), unter oder neben der man etwas erklärenden Text stellen möchte:

<figure>

<img src="bild.jpg" >

<figcaption>Text </figcaption>

</figure>

Damit allein erzeugt man nur eine Textzeile neben dem Bild, doch wer eine zusätzliche Zeile in die Stilvorlagen (CSS-Datei) einfügt, erhält dann die gewünschte Bildunterschrift.

figure, figcaption { display: block; }

0 Kommentare zu diesem Artikel
1039408