HTML5 – ein Überblick

Suchst du nach einer Lösung, wie du HTML und CSS bearbeitest? Wir haben 10 HTML-Editoren getestet und stellen sie vor. Vielleicht ist auch für dich etwas dabei?

14 HTML-Funktionen, die du noch nicht kennst

Bis heute sind insgesamt 142 HTML-Elemente vom W3C standardisiert worden, mit Ausnahme derer, die sich noch in der Phase der Standardisierung befinden und natürlich denen, die man als überholt kennzeichnet. Das bedeutet, dass man durchaus einige Elemente nicht kennt und daher nicht benutzt, obwohl sie vielleicht sehr nützlich sein könnten.

Auch im Sinne der Webstandards ist es wichtig, für gewisse Aufgaben auch dasjenige Markup zu verwenden, das für diese Aufgabe an sich vorgesehen ist. So auch die folgenden HTML Features.

1. Unabhängiges Protokoll

Wenn Du Skripte – egal ob CSS oder JavaScript – auf Deiner Seite einbindest, benutzt Du ein Protokoll. Entweder HTTP (Hypertext Transfer Protocol) oder mittlerweile eher HTTPS (Hypertext Transfer Protocol Secure).

Wenn Du Deine Seite nun auf HTTPS umstellst und noch Skripte über HTTP einbindest, werden diese nicht geladen und Fehler in der Browser Console angezeigt. Dabei hilft Dir dieser Trick, um ein unabhängiges Protkoll zu benutzen. So würde die Einbindung eines Skriptes normal (mit HTTP) aussehen:

<script src="http://example.com/js/foobar.js"></script>

Wenn Du das Protokoll weglässt und die URL mit // beginnst, nimmt der Browser das Protkoll, welches Deine Website aktuell verwendet. Damit hast Du eine potentielle Fehlerquelle (beispielsweise die „mixed content“ Warnung) beseitigt.

<script src="//example.com/js/foobar.js"></script>

Wenn Deine Seite also über HTTPS erreichbar ist, wird das Skript auch mit HTTPS eingebunden. Für HTTP gilt das gleiche.

2. Dropdown mit Suchfeld

Oft haben wir ewig lange Dropdowns mit unzähligen Einträgen. Da ist es manchmal gar nicht so einfach, den passenden Eintrag zu finden. HTML bringt von Haus aus eine Option mit, ein Dropdown “durchsuchbar” zu machen. Hier ein Beispiel:

Alles was wir dafür tun müssen, ist eine datalist einem input zuzuordnen:

  <input list="countries" class="form-control" placeholder="Suchbegriff.." id="country">  <datalist id="countries">    <option value="Deutschland">    <option value="Österreich">    <option value="Schweiz">    <option value="Frankreich">    <option value="Spanien">    <option value="Italien">  </datalist>

Ohne jegliche Programmierung haben wir ein nettes Feature eingebaut, welches nicht nur Zeit spart, sondern auch Nerven schont.

3. Gruppierungen in Dropdowns

Wir bleiben bei den Dropdowns und schauen uns ein weiteres Feaure an: Gruppierungen.

Auch dieses Feature ist simpel und genial. Wir benötigen nur den optgroup Tag. Dieses beinhaltet alle Optionen, welche einer Gruppe zugeordnet sein sollen.

<optgroup label="Priorität: Hoch">  <option>E-Mails beantworten</option>  <option>Trinken</option></optgroup>

4. Richtige Tastatur bei mobilen Inputs

Ein weiteres nützliches HTML Feature sind die richtigen Tastaturen bei mobilen Inputs. Dieses Feature wird nur auf Mobilgeräten sichtbar. Auf Desktopgeräten bleibt alles unverändert. Deshalb schau Dir dieses Beispiel am besten auf Deinem Mobilgerät an.

Wir bekommen eine leicht veränderte Tastatur angezeigt, die Sonderzeichen in die Schnellauswahl packt oder bei Nummern nur einen Nummernblock anzeigt.

Alles was wir dafür tun müssen, ist dem Input zusätzlich einen inputmode mit dem richtigen Wert zu setzen. Den richtigen Wert findest Du in der Dokumentation.

5. Anführungszeichen weglassen

Für jeden Webentwickler und Webdesigner ist klar, so sieht ein valider HTML Tag aus:

<p class="first-tag">Valider Paragraph</p>

Was für Dich aber neu sein könnte, das hier ist auch valides HTML:

<p class=first-tag>Valider Paragraph</p>

Wir können die Anführungszeichen also komplett weg lassen. Das gleiche gilt auch für alle anderen Attribute.

Mehrere Klassen kann man mit dieser Methode aber nicht einfügen. Dazu müssen wir wieder auf unsere Anführungszeichen zurückgreifen. Generell ist es also in meinen Augen nur “Nice to know!” und keine wirkliche Alternative.

6. Nicht-notwendiger Zeilenumbruch mit <wbr>

Jeder Webentwickler/Webdesigner kennt den <br> Tag, mit dem wir einen einfachen Zeilenumbruch in unseren Text einfügen können. Weniger bekannt ist hingegeben der <wbr> Tag. Dieser Tag fügt einen Zeilenumbruch nur dann ein, wenn es wirklich notwendig ist.

Im folgenden Beispiel ist im linken Text der <wbr> und im rechten Text der <br> Tag in dem fett markierten Wort eingefügt.

Öffne den CSS Tab des Pens und stelle die Breite des p Tags einmal auf 33px und einmal auf 34px. Du wirst sehen, dass der rechte Texte dauerhaft umgebrochen ist, der linke hingegen nur dann, wenn die Breite zu gering für das komplette Wort ist.

7. Inhalt ohne Input bearbeiten

Wie soll das denn gehen, fragst Du dich bestimmt!? Ich verrate es Dir: mit contenteditable. Dieses Attribut kann man einem beliebigen HTML Element geben und dadurch das Bearbeiten zulassen.

Der Text im folgenden Beispiel sieht aus wie ein normaler Paragraph, ist er auch. Mit dem Zusatz, dass er das Attribut contenteditable hat. Du kannst mit der Maus reinklicken und sieht schon den Cursor. Der Text lässt sich wie bei einem input oder textarea frei bearbeiten.

Diese Funktion ist beispielsweise beim Programmieren eines eigenen WYSIWYG Editors sehr nützlich.

Kleiner Tipp: Wenn Du den folgenden Befehl in der JavaScript Console über die Entwicklertools (F12) eingibst, kannst Du die aktuelle Seite nach belieben bearbeiten. Und keine Angst, nach einem Reload ist alles wieder normal, nichts wird dadurch beschädigt.

document.body.contentEditable = true;

8. Löschen und Einfügen von Text anzeigen

Texte und Blog-Einträge sollten stets auf dem aktuellen Stand gehalten werden. Dabei ist es oft sinnvoll die veralteten Texte nicht komplett zu löschen, sondern nur markieren, dass sie veraltet sind. Und dafür können wir die HTML Tags del und ins optimal nutzen.

So setzt Du beispielsweise die Tags für die Veränderung der Farbe ein:

<p>Dieses Tuch hat die Farbe <del>rot</del><ins>blau</ins>!</p>

Dadurch erhalten wir dieses Ergebnis, welches dem Nutzer direkt wichtige Informationen zu alten und neuen Angaben liefert:

Dieses Tuch hat die Farbe rot blau!

9. Kleingedrucktes

Oftmals vergessen oder mißachtet, und doch so einfach und stark: das <small> Element für Angebotsbedingungen, Fussnoten, EULAS und so weiter. Das HTML dazu sieht so aus:

<h2>Schlussverkauf, 50% auf Alles!<sup>*</sup></h2><p>* Ausser Hundefutter</p>

Und das Ergebnis sieht dann so ähnlich aus wie folgt:

10. Einfacher Color Picker

Bei Einstellungs-UIs sieht man häufig Felder, um eine Farbe für z.B. einen Banner oder Hintergrund auszuwählen. Diese sind oft mit zusätzlichen Plugins erstellt oder selber programmiert. Dabei bringt HTML von Haus aus einen eigenen Color Picker mit.

Natürlich haben wir die Möglichkeit im JavaScript darauf zuzugreifen, um mit den Benutzereingaben zu arbeiten. In diesem Beispiel selektiere ich den Color Picker einfach über das erste Input.

const color = document.getElementsByTagName('input')[0].value;

11. Eine Dialog-Box einbauen

Die Verwendung des Elements <dialog> ist sehr einfach und sieht in seiner Grundform so aus:

<dialog open="">Das ist eine Dialogbox!</dialog>

Das Attribut “open” sorgt dafür, dass die Dialogbox auch tatsächlich angezeigt wird. Mit etwas CSS und Javascript kann die Box dann so aussehen:

Auf Dr. Web haben wir zu dem Element einen eigenen Artikel verfasst, der sich dem Aussehen und der Interaktion mit einer Dialog-Box widmet.

• Sie überlagert den Seiteninhalt
• positioniert sich mittig
• …und wird von umgeben von einem Rahmen, dessen Größe sich über den Inhalt der Box bestimmt
• Solange die Box angezeigt wird, ist keine Interaktion mit den Inhalten außerhalb der Box möglich ist.

12. Details ein- / ausblenden

Details auf einer Website ein- und auszublenden, beispielsweise für eine Inhaltsverzeichnis, wird oftmals über ein Javascript gesteuert. Das ist aber in der Regel nicht barrierefrei, sodass Anwender mit schlechtem Augenlicht oder ohne Maus aussen vor bleiben. Das ist nicht schön und sollte vermieden werden.

Mithilfe der HTML Elemente <details> und <summary> lässt sich sowas direkt in HTML umsetzen. Und zwar so:

13. Einen Link mit Telefonnummer einbauen

Das mailto: Attribut dürfte den meisten Leuten bereits bekannt sein. Doch wie kann man aus einer Telefonnumer einen anklickbaren Link machen? Das geht einfacher als du denkst!

<a href="tel:+4976151462470">(0)761 / 51462470</a>

Im HTML muss immer die Ländervorwahl im Format +49, ohne 0 in der Ortsvorwahl und zusammengeschrieben werden.

14. Datumsauswahl nur mit HTML

Wichtig wie bei allen Formfeldern ist nicht nur das reine HTML, sondern vor allem auch, dass du sie richtig beschriftest. Beispielsweise sollte ein Platzhalter (DD/MM/YYYY) direkt im Feld vorhanden sein, damit die Besucher wissen, um welches Feld es sich genau handelt, auch wenn sie gerade unter Stress oder Zeitdruck stehen. Aus demselben Grund sollte auch über dem Feld nochmal das Label (hier: Datum) drüberstehen.

Das HTML dazu sieht so aus:

  <h1>Datumsauswahl</h1><div class="field ">  <label for="date">    <span class="field-label">Wähle ein Datum:</span><br>  </label>  <input type="date" id="date" name="date" value="" placeholder="DD/MM/YYYY"></div>

Auf Desktop und Mobile sieht das Resultat dann so aus:

Ein paar Features waren Dir sicherlich schon bekannt. Andere sind für Dich hoffentlich neu gewesen und finden zukünftig einen Weg auf Deine Website. Wie gesagt: Denk’ nicht so kompliziert, oft liegt die Lösung schon auf der Hand!

Das neue Dialog-Element von HTML 5.2

Der neue Standard HTML 5.2 bringt uns ein neues Element namens <dialog>. Damit lassen sich modale Dialogboxen erstellen, denen du mit etwas JavaScript zu Interaktivität verhelfen kannst.
Die Verwendung des Elements ist sehr einfach und sieht in seiner Grundform so aus:

<dialog open="">Das ist eine Dialogbox!</dialog>

Das zusätzliche Attribut “open” sorgt dafür, dass die Dialogbox auch tatsächlich angezeigt wird. Ohne das Attribut bedarf es schon zur Öffnung der Box des Einsatzes von JavaScript. Im Standard, also ohne, dass du CSS zum Einsatz bringst, sieht die Dialogbox ziemlich unattraktiv aus.

Sie überlagert den kompletten Seiteninhalt, positioniert sich mittig auf dem Bildschirm und wird von einer Art Trauerrand gerahmt, dessen Größe durch den Inhalt der Box determiniert wird. Die Überlagerung legt einen sogenannten Backdrop über die Seite und sorgt dafür, dass keine Interaktion mit den Inhalten außerhalb der Box möglich ist.

Backdrop ist ebenfalls neu und der Name des entsprechenden Pseudo-Elements ::backdrop, dass du mit CSS stylen kannst, um es etwa transparent, farbig oder sonstwie zu gestalten. Dialog selber gestaltest du ganz normal via CSS, wie jedes andere Element auch.

Innerhalb des Dialog-Elements verwendest du andere HTML-Elemente, um deine Dialogbox zu strukturieren und nach deinen Erfordernissen aufzubauen. Da sind deiner Fantasie prinzipiell keine Grenzen gesetzt.

Ohne JavaScript nutzt uns das Element allerdings recht wenig, denn nur ein statisch offenes oder geschlossenes Dialogfenster anzuzeigen, ist nicht so wirklich sinnvoll. Die JavaScript-Methoden showModal() und close() erlauben dir die Steuerung des bereits erwähnten Attributs open.
Die erste Methode fügt das Attribut hinzu, öffnet also die Dialogbox. Die zweite Methode entfernt das Attribut wieder, schließt also die Dialogbox. Mehr Flexibilität brauchen wir an der Stelle ja auch gar nicht.

Einfache Auszeichnung ohne Stylesheets möglich

Das „<dialog>“-Element kann an beliebiger Stelle im HTML-Body platziert werden. Allerdings sollte es nicht innerhalb eines Textes stehen, da es dann zu Darstellungsprobleme kommen kann – vor allem, wenn das „<dialog>“-Element weitere Elemente und nicht nur reinen Text enthält. Besitzt das Element die Eigenschaft „open“ wird das Dialogfenster geöffnet dargestellt. Ohne diese Eigenschaft bleibt es zunächst verborgen.

<p>Bitte lesen Sie unsere <span>AGB</span>.</p><dialog open>Unsere AGB …</dialog><p>…</p>

Im Beispiel wird ein Dialogfenster zwischen zwei Absätzen definiert. Die besondere Darstellung des Elements sorgt dafür, dass es losgelöst vom Fluss der anderen Elemente horizontal zentriert dargestellt wird und die anderen Elemente überlagert. Vertikal orientiert es sich am oberen Rand des Browserfensters. Für das Standardaussehen ist also kein zusätzliches CSS nötig, um es so zu positionieren.

Standardaussehen eines Dialogfensters
Per Stylesheets kann das Aussehen des Elements allerdings individuell angepasst werden. Hier stehen einem alle CSS-Eigenschaften zur Verfügung, mit denen Blockelemente gestaltet werden können. Vor allem mit den CSS3-Eigenschaften „border-radius“ und „shadow“ lassen sich ansprechende und gängige Dialogfenster gestalten.

Dialogfenster mit JavaScript steuern

Um das „<dialog>“-Element zu öffnen und wieder zu schließen, gibt es die JavaScript-Methoden „show()“ und „close()“.

document.getElementsByTagName("span")[0].addEventListener("click", function() {  document.getElementsByTagName("dialog")[0].show();}, false);document.getElementsByTagName("dialog")[0].addEventListener("click", function() {  this.close();}, false);

Im Beispiel werden zwei Events definiert. Das erste Event sorgt dafür, dass beim Klick auf das erste „<span>“-Element im Dokument das Dialogfenster geöffnet wird. Ein Klick auf das geöffnete Dialogfenster schließt dieses wieder.

Formular innerhalb des Dialogs

Das „<dialog>“-Element kann neben einfachem Text auch andere Elemente enthalten. Natürlich ist es auch möglich, ein Formular innerhalb des Dialogfensters zu platzieren. Für „<form>“-Elemente innerhalb des „<dialog>“-Elementes gibt es die eigene Übertragungsmethode „dialog“, die anstelle der bekannten Methoden „post“ und „get“ eingesetzt werden kann.

<dialog><p>Unsere AGB …</p><form method="dialog"><button type="submit" value="ja">Akzeptiert</button><button type="submit" value="nein">Abgelehnt</button></form></dialog>

Im Beispiel enthält das Dialogfenster ein Formular mit zwei Buttons. Der Klick auf eines der Buttons sorgt dafür, dass der Dialog geschlossen wird. Hierzu ist kein JavaScript notwendig. Soll verhindert werden, dass beim Klick auf ein Button das Fenster geschlossen wird, muss man dies per JavaScript regeln. Hierbei genügt es, das „<button>“-Element mit einem „click“-Event auszustatten, welches per „preventDefault()“ verhindert, dass das Standardverhalten des Buttons ausgeführt wird.

Auf das Schließen von Dialogfenstern reagieren

Mit dem Event „close“ ist es möglich, auf das Schließen eines Dialogfensters zu reagieren.

document.getElementsByTagName("dialog")[0].addEventListener("close", function(e) {  var antwort = this.returnValue;}, false);

Über die Eigenschaft „returnValue“ wird der „value“-Wert des Button-Elementes zurückgegeben, über welches das Dialogfenster geschlossen wurde. Wird im Beispiel der „Abgelehnt“-Button gedrückt, gibt „returnValue“ den Wert „nein“ zurück. Auf diese Weise kann man sehr einfach bestimmte Funktionen in Abhängigkeit des gedrückten Dialogbuttons ausführen.

Modale Dialogfenster erstellen

Um zu erreichen, dass der Nutzer während eines geöffneten Dialogfenster keinen Zugriff auf die anderen Inhalte des HTML-Dokuments hat, gibt es sogenannte modale Dialogfenster. Sie werden ausschließlich per JavaScript und der Methode „showModal()“ geöffnet. Eine reine HTML-Auszeichnung gibt es nicht. Modale Dialoge sorgen dafür, dass alles im Hintergrund des Dialogfensters grau überdeckt ist und nicht bearbeitet, ausgewählt oder angeklickt werden kann.

document.getElementsByTagName("dialog")[0].showModal();

Anders als normale Dialogfenster werden die modalen Varianten nicht nur horizontal, sondern auch vertikal zentriert dargestellt.

Standardaussehen eines modalen Dialogfensters
Die Farbe, die den restlichen Inhalt des HTML-Dokuments überdeckt, lässt sich mit dem Pseudoelement „::backdrop“ anpassen. Allerdings sollte eine Farbe mit geringer Deckkraft („rgba()“-Wert) verwendet werden, da der Inhalt ansonsten komplett mit der Farbe überdeckt wird und selbst nicht mehr sichtbar ist.

dialog::backdrop {  background: rgba(255, 0, 255, 0.25);}

Im Beispiel wird alles mit einem leichten Gelbton überzogen. Statt einer Hintergrundfarbe ist es auch möglich, eine -grafik zu verwenden.

Modale Dialogfenster haben eine weitere Besonderheit. Sie lassen sich grundsätzlich durch Drücken der Escape-Taste beenden. Da das „close“-Event nur ausgelöst wird, wenn ein Dialogfenster per Formularbutton geschlossen wird, gibt es zusätzlich das „cancel“-Event. Dieses wird dann ausgelöst, wenn ein modales Dialogfenster per Escape geschlossen wird.

document.getElementsByTagName("dialog")[0].addEventListener("cancel", function(e) {  var antwort = "abgebrochen";}, false);

Mehrere Dialogfenster

Es ist durchaus möglich, mehr als ein Dialogfenster zu öffnen. Per Stylesheets können diese auch so platziert werden, dass sie einander nicht überdecken.

Eine Besonderheit stellen hierbei wieder modale Dialogfenster dar. Da diese die im Hintergrund liegenden Elemente sperren, sorgen sie auch dafür, dass auch andere (modale) Dialogfenster im Hintergrund gesperrt werden. Das heißt, man muss die modalen Dialogfenster nacheinander schließen, um die anderen Inhalte des Dokumentes zu entsperren.

Browsersupport

Das „<dialog>“-Element wird derzeit nur von Chrome und Safari unterstützt. Andere Browser betrachten es als einfaches Blockelement. Das heißt, diese Browser zeigen den Inhalt des Elementes immer an, auch wenn es die Eigenschaft „open“ nicht besitzt.

document.getElementsByTagName("dialog")[0].addEventListener("click", function() {this.close();}, false);

Im Beispiel werden zwei Events definiert. Das erste Event sorgt dafür, dass beim Klick auf das erste „<span>“-Element im Dokument das Dialogfenster geöffnet wird. Beim Klick auf das geöffnete Dialogfenster wird dieses wieder geschlossen.

Alternativ gibt es auch dieses JavaScript-Polyfill um die Unwilligen zur Kooperation zu zwingen.

Apropos neu…

Das ist doch gar nicht neu, magst du jetzt einwenden. Und du hast natürlich Recht. Im Chrome etwa wird genau diese Implementierung schon seit 2014 unterstützt. Im Firefox kannst du die Unterstützung einschalten. Microsoft überlegt noch, zumindest im Edge. Andere machen gar nicht mit.

Zur Ehrenrettung sei gesagt, dass das Dialog-Element lediglich unter Accessibility-Gesichtspunkten einen Sinn ergibt. Screenreader können diese Elemente nun eindeutiger identifizieren. Für den tatsächlichen Funktionsfall, also das Anzeigen von Dialogboxen gibt es diverse Lösungen, deren bekannteste wohl die Implementation in Bootstrap sein dürfte, die sich sogar ebenfalls zugänglich umsetzen lässt.

Texte richtig in HTML auszeichnen

Um Textteile herauszustellen, gibt es zahlreiche Möglichkeiten, die bereits zu den Grundlagen von HTML gehören. Da wären zum Beispiel die Fettschrift oder Farben. Es gibt aber auch Befehle, die seltener angewendet werden.

Eine eher problematische Sache ist das Unterstreichen von Text.

<u>unterstreicht den Text</u>
unterstreicht den Text

Die Unterstreichung ist in der Regel den Hyperlinks vorbehalten, man muss also aufpassen.

Einen durchgestrichenen Text stellen Sie so dar:
<s>streicht den Text durch</s>
streicht den Text durch

Sehr viel ungewöhnlicher ist das Höherstellen, ein Buchstabe oder ein Wort hebt sich damit gewissermaßen aus der Zeile heraus:
^{stellt den Text höher}
Normaler Text ^{stellt den Text höher}

Das Gleiche geht auch andersherum, dann nennt man es Tieferstellen:
_{stellt den Text tiefer}
Normaler Text _{stellt den Text tiefer}

Mit diesem Tag markieren Sie zum Beispiel sichtbare Quellcodes, der Text wird dann in einer Art Schreibmaschinenschrift dargestellt:
<tt>Schreibmaschinenschrift</tt>
Schreibmaschinenschrift
tt steht dabei übrigens für Teletype, was so viel wie Fernschreiber heißt.

Die Entwicklung von HTML wird von der WHATWG (Web Hypertext Application Technology Working Group) vorangetrieben, einer Arbeitsgruppe, die aus dem W3C heraus entstanden ist.

HTML5 ist größtenteil abwärtskompatibel. Wer noch mit HTML4 oder XHTML gearbeitet hat, muss grundsätzlich nur die Doctype-Deklaration auf <!DOCTYPE html> ändern und einige wenige Elemente entrümpeln, die nur der visuellen Darstellung dienen, oder für die es bessere Alternativen gibt.

Natürlich kann man erst mit den neuen Elementen und Attributen die Stärken von HTML5 richtig nutzen.

Struktur ist Alles

HTML5 kennt einige neue Elemente zur besseren semantischen Strukturierung von Dokumenten. Diese sind vor allem dazu da, um mit den inzwischen verbreiteten <div id="…">-Blöcken aufzuräumen und den Aufbau einer Seite standardisiert auszuzeichnen. Die Schlüsselrollen nehmen hierbei die neuen Elemente header, nav, article, aside und footer ein, welche – grob umrissen – folgende Aufgaben erfüllen:

• header umfasst den Kopfbereich eines Dokuments und kann typischerweise den Titel des Dokuments, Logos, ein Formular zur Schnellsuche oder ein Inhaltsverzeichnis enthalten.
• nav ist – nomen est omen – für Hauptnavigationsblöcke gedacht.
• article ist der Ort für die eigentlichen Inhalte der Seite. Die Verwendung soll so erfolgen, dass article-Blöcke, für sich genommen, alleinstehend sind, also beispielsweise auch unverändert als Inhalt eines Newsfeeds verwendet werden könnten. article-Blöcke können mit section in mehrere Abschnitte unterteilt werden und sind außerdem schachtelbar.
• aside beheimatet Abschnitte, die nicht unmittelbar mit dem eigentlichen Inhalt zusammenhängen – ein klassischer Fall für Sidebars, aber auch für inhaltliche Einschübe in einem article.
• footer beinhaltet das, was man üblicherweise im Fußbereich eines Dokuments findet: Autor- und Copyright-Informationen oder Querverweise. footer kann, aber muss nicht notwendigerweise am Ende eines Dokuments stehen.

Das aktuelle Grundgerüst der Seiten des Dr. Web Magazins liefert ein prädestiniertes Beispiel für gängige HTML-Strukturen, und ließe sich einfach mit den neuen HTML5-Strukturelementen formulieren.

Mehr Wert durch mehr Bedeutung

Ausgesprochen nützlich sind jene Elemente, die nicht nur ein Mehr an Struktur bringen, sondern auch die Semantik auf Textebene bereichern.

Mit dem time-Element kann man Datums- und/oder Zeitangaben im Text gesondert auszeichnen. Angaben à la »übermorgen« kann man mit Hilfe des datetime-Attributs präzisieren. Das genaue Datum (beziehungsweise Uhrzeit) muss dabei im ISO-Format angegeben werden:

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 maschinenlesbaren Metaangaben ist beispielsweise eine Funktion zum Exportieren in ein Kalenderprogramm denkbar. Das time-Element eignet sich leider nicht für historische Angaben (die oft ungenau sind, etwa »19. Jahrhundert«) oder Daten, die nicht den gregorianischen Kalender verwenden. Dieser Umstand wird allerdings noch diskutiert, und es scheint, als sei hier das letzte Wort noch nicht gesprochen.

Ein weiteres nützliches Element ist mark. Mit mark können Textpassagen hervorgehoben werden, wie man es mit einem Leuchtstift auf Papier machen würde. Ein klassischer Verwendungszweck ist das Hervorheben von Schlüsselbegriffen auf einer Seite, die als Ergebnis einer Suche geliefert wurde.

<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>

Entwickler von Web-Applikationen werden das neue Element progress begrüßen. Es erlaubt, den Fortschritt einer Aufgabe anzuzeigen – beispielsweise als Prozent- oder Sekundenangabe – und via JavaScript laufend zu aktualisieren. Mit dem A