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 Attribut value (beziehungsweise mit dem Elementinhalt) läßt sich der aktuelle Wert setzen. Das max-Attribut spezifiziert den Wert, der bei Vervollständigung des Tasks erreicht wird. Ein enger Verwandter von progress ist meter, welches einen statischen Überblick über einen aktuellen Ist-Zustand gibt, etwa den aktuellen Platzverbrauch des eigenen 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 weitere Neuerung stellt das Element figure dar. Damit können Abbildungen mit einer Beschriftung versehen werden (legend), wie man es aus dem Printbereich kennt. Bislang mußte man sich dazu mit Mikroformaten (englisch) behelfen. Man ist dabei freilich nicht auf Fotos oder Grafiken beschränkt, sondern kann dies beispielsweise auch für Videos oder Programmier-Codeausschnitte verwenden, zum Beispiel:

<figure>
   <img src="golden-gate-bridge.jpg.webp" 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>

Vor allem Bilder- und Videogalerien werden von diesem neuen Element profitieren und zukünftig einheitlich ausgezeichnet werden können, womit man auch schon bei der nächsten Neuerung angelangt ist: den Elementen video und audio.

Zunehmende Bandbreiten haben in den letzten Jahren die sprunghafte Verbreitung von Videodaten im WWW möglich gemacht, Stichwort: YouTube. Mittlerweile findet man Filmchen und Audioschnipsel an allen Ecken. Dieser Trend war bei der Erstellung der alten HTML-Spezifikation vor zirka zehn Jahren, als die heutigen Möglichkeiten des Internet noch nicht einmal in den Kinderschuhen steckten, nicht absehbar. Entsprechend umständlich ist bisweilen immer noch die browser- und plattformübergreifende Einbindung von Multimediadateien.

video und audio sollen dem ein Ende setzen und bieten eine einfache 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>

Wenn – wie im Beispiel – das controls-Attribut gesetzt ist, können die Browser dann selbst alle nötigen Kontroll-Elemente zur Steuerung anzeigen, etwa Fortschrittsbalken, Start/Pause-Schaltfläche oder Lautstärkenregelung. Die Crux an der Geschichte, es wird in der Spezifikation wohl kein gemeinsames Audio- und Videoformat festgelegt werden, welches jeder Browser unterstützen sollte. Daher ist es ratsam, mit dem type-Attribut den MIME-Type der eingebundenen Mediendatei zu spezifizieren. Ursprünglich waren die freien Codecs der Ogg-Familie (englisch) als gemeinsame Basis angedacht, doch das widerspricht beispielsweise Apples Interessen, welches sein hauseigenes Quicktime-Format vorantreiben will. Somit müssen Videoersteller weiterhin hoffen, daß eine möglichst große Zahl an Clients ihr gewähltes Videoformat unterstützt. Ob damit eine Abkehr von den gängigen suboptimalen Flash-Lösungen gelingt, bleibt abzuwarten.

Web-Applikationen

Die größte Aufmerksamkeit erregt aktuell das canvas-Element. Es stellt grundsätzlich eine 2D-Bitmap-Zeichenfläche frei definierbarer Größe zur Verfügung. Mittels JavaScript kann man darin zeichnen und Grafiken on-the-fly erstellen. Somit lassen sich zum Beispiel Diagramme einfach dynamisch generieren, oder man kann auch Mini-Spiele damit produzieren.

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

wird mit entsprechendem 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

An und für sich wären solche Anwendungen auch mit dem bereits etablierten XML-Vektorformat SVG (englisch) realisierbar, doch der Durchbruch im Web wurde bei SVG nie erreicht. Auch wenn sich der Browserhersteller aus Redmond mit der Unterstützung von canvas noch ziert, besteht hier mehr Hoffnung. Das neue Element ist zum einen ein Teil der kommenden Spezifikation und keine eigenständige Technologie und zum anderen bringt es eine flachere Lernkurve mit sich, da es über das Entwicklern bereits vertraute JavaScript zu bedienen ist.

Web Forms 2.0

Wo Web-Applikationen sind, sind Formulare nicht weit. HTML4 stellt nur allgemeine Formularelemente zur Verfügung, wie zum Beispiel Texteingabe- und Passwortfelder, Checkboxen oder Dropdown-Listen. Wenn man in einem Textfeld etwa eine Datumseingabe erwartet, so ist man in der Regel gezwungen, serverseitig zu verifizieren, ob es sich bei der Benutzereingabe überhaupt um ein gültiges Datum handelt. Ähnlich verhält es sich bei URLs, numerischen Werten oder anderen Eingaben.

HTML5 erweitert die Möglichkeiten des input-Elements beträchtlich, indem es dem type-Attribut einige neue Werte beschert. So kann man beispielsweise mit type="email" angeben, dass man eine E-Mail-Adresse erwartet. Die Überprüfung, ob es sich bei einer Eingabe um eine gültige Adresse handeln kann, findet dann bereits direkt im Browser statt – ohne, dass der Web-Entwickler dazu einen Finger rühren muss. Weitere neue type-Werte sind date, time und datetime (bzw. datetime-local) für Datums- und/oder Zeitangaben, number für numerische Werte, color für RGB-Farbwerte in Hex-Notation oder url für Internetadressen.

Für komplexere Fälle kann man über das pattern-Attribut ein Suchmuster in Form eines regulären Ausdrucks angeben, auf welches der Eingabewert zutreffen muss. Sehr praktisch ist in dieser Hinsicht auch das neue Attribut required. Wenn es gesetzt ist, muss das betreffende Feld vom Benutzer ausgefüllt werden, unabhängig von möglichen weiteren Werteinschränkungen.

Ein weiteres Highlight des neuen input-Elements ist das autocomplete-Attribut. Setzt man dieses auf on, so wird dem Browser signalisiert, dass Eingaben in dieses Feld gespeichert und bei zukünftigen Seitenaufrufen zur automatischen Vervollständigung angeboten werden sollen – ein klassischer Anwendungsfall für Suchfelder. In dieselbe Kerbe schlägt das list-Attribut, wo man die id eines im Dokument angeführten datalist-Elements angeben kann. Die option-Einträge unterhalb der so verknüpften datalist dienen 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>

Nützlich ist ebenfalls das Attribut autofocus. Ist es bei einem Element gesetzt, so wird dieses automatisch fokussiert, sobald die Seite vollständig geladen ist. Damit kann ein Benutzer sofort mit dem Ausfüllen eines Formulars beginnen, ohne erst noch das betreffende Eingabefeld extra anklicken zu müssen.

Allein durch diese hier aufgezählten Neuerungen werden zahlreiche gängige JavaScript-Lösungen durch einen einheitlichen Standard obsolet.

HTML5 und die Web-Audio-API: Audiodateien abspielen, manipulieren und Klänge erzeugen

Mit HTML5 und dem „<audio>“-Element ist es möglich, Audiodateien ganz ohne Plug-in im Browser abzuspielen. Mit der neuen Web-Audio-API kann man nun Audiodateien direkt per JavaScript laden oder eigene Klänge erzeugen. Außerdem kann die API die Wiedergabe von Audiodateien manipulieren, indem zum Beispiel Frequenzbereiche verändert werden. Wir werfen einen genaueren Blick auf die musikalische Schnittstelle.

Anwendungsfall 1: Wiedergabe einer Audiodatei

Zunächst einmal muss festgelegt werden, welche Quelle für die Audiowiedergabe genutzt werden soll. Wir könnten eine Audiodatei direkt per JavaScript laden oder eine per „<audio>“-Element bereits definierte Quelle nutzen. In jedem Fall muss ein „AudioContext“ bereitgestellt werden. Anschließend wird die Quelle definiert.

var musik = new AudioContext();
var quelle = musik.createBufferSource();

Im Beispiel soll eine Audiodatei direkt per JavaScript geladen werden. Dazu weisen wir dem „AudioContext“-Objekt („musik“) die Methode „createBufferSource()“ zu. Im nächsten Schritt wird die Audiodatei mittels „XMLHttpRequest()“ geladen.

var xhr = new XMLHttpRequest();
xhr.open("GET", "musik.mp3", true);
xhr.responseType = "arraybuffer";
xhr.addEventListener("load", function() {
  quelle.buffer = musik.createBuffer(xhr.response, false);
  quelle.connect(musik.destination);
  quelle.start(0);
}, false);
xhr.send();

Der Aufruf per „XMLHttpRequest()“ ist notwendig, um Zugriff auf die Audiodatei zu erlangen. Wichtig ist, dass der „responseType“ den Wert „arraybuffer“ besitzt. Nur so kann die Antwort des Requests – also der Inhalt der Audiodatei – korrekt behandelt werden. Im Beispiel wird damit die Datei „musik.mp3“ geladen. Innerhalb des Event-Listeners wird der Inhalt der Audiodatei über die Methode „createBuffer()“ der Audioquelle („quelle“) als Buffer zugewiesen.

Die Quelle verbinden wir nun noch per „connect()“ mit dem „AudioContext“-Objekt. Im letzten Schritt wird mit der Wiedergabe per „start()“ begonnen. Die Zahl innerhalb der „start()“-Methode gibt die Zeit in Sekunden an, nach der die Wiedergabe beginnen soll. Bei einem Wert größer Null wird die Wiedergabe erst nach Ablauf der angegebenen Sekunden gestartet; ansonsten beginnt sie sofort.

Anwendungsfall 2: Eigene Klänge erzeugen

Statt eine Audiodatei wiederzugeben, ist es mit der Web-Audio-API auch möglich, einen eigenen Klang zu erzeugen. Hierzu wird die Methode „createOscillator()“ genutzt.

var musik = new AudioContext();
var quelle = musik.createOscillator();
quelle.frequency.value = 440;
quelle.type = "sine";
quelle.connect(musik.destination);
quelle.start(0);

Auch in diesem Beispiel erstellen wir zunächst ein „AudioContext“-Objekt und definieren eine Quelle. Die Quelle ist in diesem Fall jedoch keine Bufferquelle, sondern ein Oszillator. Über die Eigenschaft „frequency“ geben wir eine Frequenz in Hertz an, wobei „type“ die Art der Frequenzschwingung bezeichnet. Neben einer Sinusschwingung („sine“) sind Rechteckschwingung („square“), Dreieckschwingung („triangle“) und Kipp- beziehungsweise Sägezahnschwingung („sawtooth“) möglich.

Per „connect()“ wird die Quelle wieder dem „AudioContext“-Objekt zugewiesen. Da in diesem Beispiel keine Datei geladen werden muss, ist der Einsatz von „XMLHttpRequest()“ nicht nötig. Per „createOscillator()“ generierte Klänge spielen solange, bis sie per „stop()“ angehalten werden. Während des Abspielens ist es jedoch möglich, die Frequenz zu verändern.

Statt eine feste Frequenz anzugeben, können Sie also per „setTimeout()“ die Frequenz während der Wiedergabe verändern.

var quelle_frequenz = 100;
var quelle_frequenz_richtung = 1;
window.setTimeout("frequenzen()", 10);
function frequenzen() {
  if (quelle_frequenz_richtung == 1) {
    quelle_frequenz += 1;
    if (quelle_frequenz > 200) quelle_frequenz_richtung = -1;
  } else {
    quelle_frequenz -= 1;
    if (quelle_frequenz < 100) quelle_frequenz_richtung = 1;
   }
   quelle.frequency.value = quelle_frequenz;
   window.setTimeout("frequenzen()", 10);
}

Im Beispiel wird eine Frequenz bei 100 Hertz beginnend jede Hundertstelsekunde um ein Hertz noch oben verändert, bis sie 200 Hertz erreicht hat. Anschließend wird die Frequenz auf gleichem Wege reduziert. Diese Frequenzveränderung wird im Beispiel als Dauerschleife abgespielt.

Natürlich können auch mehrere Quellen gleichzeitig spielen. Für jedes „AudioContext“-Objekt lassen sich beliebig viele Quellen definieren und wiedergeben. Wichtig ist, dass jede einzelne Quelle per „start()“ startet.

quelle1.musik.createOscillator();
quelle2.musik.createOscillator();
quelle1.frequency.value = 250;
quelle2.frequency.value = 500;
quelle1.connect(musik.destination);
quelle2.connect(musik.destination);
quelle1.start(0);
quelle2.start(1);

Im Beispiel werden zwei Quellen, die unterschiedlich definiert sein können – zum Beispiel per „createOscillator()“ und „createBufferSource()“ –, dem  „AudioContext“-Objekt zugewiesen. Anschließend startet die Wiedergabe, wobei die zweite Quelle eine Sekunde später beginnt.

Wiedergabe manipulieren

Statt eine Audiodatei oder einen Klang nur wiederzugeben, bietet die Web-Audio-API mehrere Methoden, um die Wiedergabe zu manipulieren. So können biquadratische Filter („createBiquadFilter()“) auf die Wiedergabe angewendet werden. Diese Filter erlauben die Dämpfung bestimmter Frequenzbereiche.

Tiefpassfilter („lowpass“) dämpfen Frequenzen oberhalb einer gesetzten Grenze, Hochpassfilter („highpass“) dämpfen Frequenzen unterhalb einer Grenze. Bei Bandbreitenfilter („bandpass“) werden Frequenzen außerhalb einer Frequenzbandbreite abgeschwächt. Darüber hinaus gibt es Filter zur Anhebung und Absenkung von Tiefen beziehungsweise Höhen („lowshelf“ und „highshelf“) für bestimmte Frequenzen und einen Filter, der Tiefen und Höhen innerhalb eines Frequenzbereich anhebt und absenkt („peaking“).

Die Methode „createBiquadFilter()“ ähnelt sehr der „createOscillator()“-Methode. Neben der Eigenschaft „frequency“ gibt es für einige Filter noch die zusätzliche optionale Eigenschaft „Q“, welche die Qualität des Filters angibt. Beim Tiefpassfilter wird über die Eigenschaft definiert, wie stark die umliegenden Frequenzen berücksichtigt werden sollen. Erlaubt sind Werte zwischen 0,1 und 1000, wobei 1 der Standardwert ist.

var musik = new AudioContext();
var quelle = musik.createOscillator();
var filter = musik.createBiquadFilter();

quelle.frequency.value = 500;
quelle.type = "sine";
filter.frequency.value = 250;
filter.Q.value = 2;
filter.type = "lowpass";
quelle.connect(filter)
filter.connect(musik.destination);
quelle.start();

Im Beispiel wird ein Tiefpassfilter auf Frequenzen oberhalb von 250 Hertz angewendet. Damit der Filter auch zum Einsatz kommt, muss er per „connect()“ dem „AudioContect“-Objekt zugewiesen werden. Natürlich können auch mehrere Filter angewendet werden. Die „connect()“-Methode sieht vor, dass alle Audioknoten, die erzeugt werden, quasi in Reihe miteinander verbunden werden.

quelle.connect(filter1);
filter1.connect(filter2);
filter2.connect(filter3)
filter3.connect(musik.destination);

Im Beispiel wird die Quelle zunächst mit „filter1“ verbunden. Dieser wird mit „filter2“ und dieser wiederum mit „filter3“ verbunden. Der dritte Filter wird schließlich mit dem „AudioContect“-Objekt verbunden.

Es gibt eine Reihe weiterer Möglichkeiten, um die Wiedergabe zu manipulieren. Mit „createConvolver()“ fügt man der Wiedergabe einen Nachhall hinzu. Mit „createChannelSplitter()“ und „createChannelMerge()“ werden Audiokanäle separiert beziehungsweise zusammengefügt. Außerdem lässt sich mit „createDynamicsCompressor()“ ein Kompressor einrichten, welcher die Lautstärkespitzen abschwächt.

Wiedergabe eines „<audio>“-Elementes

Statt eine Audiodatei direkt per JavaScript zu laden, erlaubt die Web-Audio-API auch, auf ein „<audio>“-Element zuzugreifen.

var musik = new AudioContext();
var quelle = musik.createMediaElementSource(document.getElementsByTagName("audio")[0]);

Statt „createBufferSource()“ wird in diesem Fall die Methode „createMediaElementSource()“ verwendet. Der Methode wird das jeweilige „<audio>“-Element per „getElementsByTagName()“ oder anderen ähnlichen Methoden zugewiesen.

Anschließend kann die Quelle mit den vorgestellten Möglichkeiten manipuliert werden. Eine Wiedergabe per „quelle.start()“ ist hierbei jedoch nicht möglich. Die Wiedergabe wird entweder über die Steuerleiste des „<audio>“-Elementes gestartet oder über die JavaScript-Methode „play()“ für die Steuerung des „<audio>“-Elementes.

document.getElementsByTagName("audio")[0].play();

Browserunterstützung

Die Web-Audio-API wird bereits seit Chrome in der Version 11 unterstützt. Der in älteren Versionen verwendete Vendor-Präfix ist mittlerweile nicht mehr nötig. Außerdem unterstützen Firefox ab Version 25 und Opera ab Version 15 die API. Der Internet Explorer unterstützt die API derzeit noch nicht.