HTML 5 – Einblick, Überblick, Ausblick (Best of Accessibility, Düsseldorf, und WebTech, Darmstadt)

Vortrag vom 24. September 2009 (↻ 1. Dezember 2009), exklusiv für die Best of Accessibility, Düsseldorf, und die WebTech, Darmstadt. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).

Inhalt

Geschichte
Design
Baustellen
Neuerungen
HTML 5 und Performance
HTML 5, jetzt?
Referenzen

Geschichte

2003: »XForms Basic«-Vorschlag von Ian Hickson
2004 (April-Juni): Gründung der WHATWG (Web Hypertext Application Technology Working Group, aus Browser-Herstellern wie Apple, Mozilla und Opera bestehend) als Antwort auf W3C-Prozesse
2004: Umbenennung von »XForms Basic« in »Web Forms«, Übernahme durch WHATWG
2005: Erste Arbeitsentwürfe für »Web Applications 1.0«
2006 (Oktober): Idee der Gründung einer W3C-HTML-Arbeitsgruppe
- Tim Berners-Lee: »Notwendigkeit, HTML inkrementell weiterzuentwickeln«
- WHATWG bleibt bestehen
2007 (April/Mai): Beiderseitiger (WHATWG/W3C) Entschluss, HTML 5 auf Web Applications 1.0 aufzubauen
2008 (Januar): Erster öffentlicher Arbeitsentwurf (seitens W3C)
2009 (Februar): Web Forms 2.0 wird offiziell Teil von HTML 5 (seitens W3C)
2009 (Oktober): Angestrebter »Last Call«-Status des Arbeitsentwurfs (seitens WHATWG)
2010 (Oktober): Angestrebter »Recommendation«-Status (seitens W3C)

Design

Prinzipien

Verbesserung und Erweiterung von HTML-Markup
- Analyse des aktuellen Gebrauchs von HTML sowie Inhalten
  - Beispiel: 2005er »Web Authoring Stats« von Ian Hickson
Definition einer einzelnen Sprache (HTML 5), die in angepasster HTML- sowie XML-Syntax geschrieben werden kann
Abwärtskompatibilität durch
- Syntax, die entsprechend mit HTML 4 und XHTML 1 kompatibel ist
- Anforderung, dass User-Agents alte HTML-Bestandteile weiterhin unterstützen müssen (wichtig für bestehende Inhalte)
Definition detaillierter Verarbeitungsanweisungen, um interoperable Implementierungen zu erzielen
- Klartext: Vorherige HTML-Spezifikationen beinhalten einiges an »Wischi-Waschi«
Fokus auf Barrierefreiheit als »eingebautes Konzept« anstelle von Ergänzungen (»Add-ons«) wie @alt

HTML

MIME-Typ: text/html
Minimales Dokument:
```
<!DOCTYPE html>
<title> </title>
```

XHTML

MIME-Typ: application/xhtml+xml oder application/xml
DOCTYPE nicht erforderlich, da einziger Zweck das Auslösen des »Standards Mode« ist

Minimales Dokument:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title> </title>
  </head>
  <body></body>
</html>

Baustellen

HTML 5 ist noch nicht fertig
- Aber: Selbst wenn formell abgeschlossen, hängt HTML 5 von Browser-Herstellern ab (ausdrückliches Ziel: zwei unabhängige Implementierungen)
Ein paar Elemente und Attribute müssen noch genauer definiert werden
Ein paar Funktionen müssen gerade im Hinblick auf Barrierefreiheit noch näher beleuchtet werden

Neuerungen

Entfernte Elemente

acronym (irritierend → abbr)
applet (→ object)
basefont (präsentationsbezogen)
big (präsentationsbezogen)
center (präsentationsbezogen)
dir (→ ul)
font (präsentationsbezogen)
frame (problematisch für Bedienbarkeit und Barrierefreiheit)
frameset (problematisch für Bedienbarkeit und Barrierefreiheit)
isindex (→ andere Formularelemente)
noframes (problematisch für Bedienbarkeit und Barrierefreiheit)
noscript (in XHTML, da von HTML-Parser abhängend)
s (präsentationsbezogen)
strike (präsentationsbezogen)
tt (präsentationsbezogen)
u (präsentationsbezogen)

Entfernte Attribute

abbr und axis auf td und th
align auf caption, col, colgroup, div, h1, h2, h3, h4, h5, h6, hr, iframe, img, input, legend, object, p, table, tbody, td, tfoot, th, thead und tr
alink, link, text und vlink auf body
archive, classid, codebase, codetype, declare und standby auf object
background auf body
bgcolor auf body, table, td, th, und tr
border auf object und table
cellpadding und cellspacing auf table
char und charoff auf col, colgroup, tbody, td, tfoot, th, thead und tr
charset und rev auf a und link
clear auf br
compact auf dl, menu, ol und ul
frame auf table
frameborder auf iframe
height auf td und th
hspace und vspace auf img und object
longdesc auf iframe und img
marginheight und marginwidth auf iframe
name auf img
nohref auf area
noshade auf hr
nowrap auf td und th
profile auf head
rules auf table
scrolling auf iframe
scheme auf meta
scope auf td
shape und coords auf a
size auf hr
target auf link
type und valuetype auf param
type auf li, ol und ul
valign auf col, colgroup, tbody, td, tfoot, th, thead und tr
version auf html
width auf col, colgroup, hr, pre, table, td und th

Geänderte Elemente

a ohne href kann als Platzhalter verwendet werden und nun auch Block-Elemente beinhalten: <a><p>…</a>
address erfährt eine etwas andere Bedeutung im Zusammenhang mit Dokumentabschnitten (»Sectioning«): <section>…<footer><address>Kontakt: Max Mustermann</address></footer></section>
b stellt Text dar, der lediglich »stylistisch abweichend« hinsichtlich der anderen Inhalte ist, ohne dabei besonders wichtig zu sein: Schlüsselwörter: <b>Webentwicklung</b>, <b>Webdesign</b>
hr stellt einen Themenwechsel oder eine »Pause« auf Absatzebene dar: <p>…<hr><p>…
i stellt Text dar, der einer »anderen Stimme oder Stimmung« entspricht oder in anderer Form von den anderen Inhalten abweichend ist, wie technische Begriffe oder Idiome: Wenn <i>Webentwicklung</i> das Einzige ist, um das wir uns Sorgen machen …
label legt den Fokus nicht mehr auf das entsprechende Formularelement, sofern dies nicht Standard für das verwendete System/Plattform ist
menu erfährt neuen Gebrauch im Zusammenhang mit Toolbars und Kontextmenüs
small entspricht »Kleingedrucktem«, wie Kommentaren oder rechtlichen Inhalten: <small>Haftungsausschluss: …</small>
strong spiegelt Wichtigkeit wider, nicht Betonung

Geänderte Attribute

alt erfährt spezifischere Regeln:
- <img src="foo" alt="bar"> → Inhalt
- <img src="foo" alt=""> → Dekoration
- <img src="foo"> → möglicherweise Inhalt, aber kein Äquivalent verfügbar (Beispiel: Foto-Uploads) oder notwendig (Beispiel: private E-Mail)
- <img src="foo" title="baz"> → @title als Ersatz-»Legende«
- <img>/<img alt=""> → Nichts
border auf img sollte den Wert 0 haben (→ CSS)
language auf script sollte den Wert JavaScript haben (case-insensitive) (→ auslassen)
name auf a (→ id)
summary auf table (→ einleitender Text oder caption)

Neue Elemente

article als Container für Inhalte, wie Artikel oder Blog-Beiträge
aside als Element für Randbemerkungen, sowohl neben oder als Teil primärer Inhalte
audio und video nebst source für Multimedia-Inhalte (wobei einige Codec- und API-Fragen noch offen sind bzw. nicht von HTML 5 beantwortet werden): <audio src="foo"></audio>
canvas als generisches Element für dynamische Inhalte
- Demos: Torus, Painter, Fotos
command für Nutzerbefehle
datalist (zusammen mit input@list) zur Darstellung vordefinierter Optionen (die unter anderem als Slider dargestellt werden können)
details für zusätzliche Informationen oder Bedienelemente im interaktiven Kontext
embed als nun in die Familie aufgenommenes Element für Plugin-Inhalte
figure zur Verknüpfung von eingebundenen Inhalten wie Bildern oder Videos mit einer Beschreibung: <figure><dt><img src="foo" alt="bar"><dd>Beschreibung</figure>
footer als generisches Fußelement – das nicht unbedingt erst am Ende erscheinen muss – für eine Webseite oder einen Abschnitt: <footer>Letzte Aktualisierung: 12. April 2144.</footer>
header als generisches Kopfelement, zur Verwendung für die gesamte Webseite, Inhaltsverzeichnisse, ähnliches: <header><img src="logo" alt="Firma"></header>
hgroup zur Gruppierung von Überschriften: <hgroup><h1>…</h1><h2>…</h2></hgroup>
keygen zur Generierung von Schlüssel-/Wert-Paaren
mark als Element zum Hervorheben für Referenzzwecke
meter zur Maßangabe: <meter>10%</meter>, <meter min="0" max="100" value="10"></meter>
nav als Container für Navigationsbereiche: <nav><ul><li>…</ul></nav>
output (als input-Gegenstück) zur Ausgabe, beispielsweise skriptbasierter Werteberechnung
progress als Element zur Fortschrittsanzeige
rp, rt und ruby für Ruby-Annotationen (bereits Teil von XHTML 1.1)
section als generischer Dokumentabschnitt, der zusammen mit Überschriften verwendet werden kann, um die Dokumentstruktur abzubilden: <section><h1>…</h1>…</section><section><h1>…</h1>…</section>
time zur Darstellung von Zeit oder Datum: <time>15:00</time>

Neue globale Attribute

accesskey
aria-* für Zugänglichkeit
class
contenteditable
contextmenu
data-*
dir
draggable
hidden
id
itemid für Microdata
itemprop für Microdata
itemref für Microdata
itemscope für Microdata
itemtype für Microdata
lang
role für Zugänglichkeit
spellcheck
style
tabindex
title

Neue Attribute

async auf script, um das Laden und Ausführen von Skripten zu steuern
autocomplete, list, min, max, multiple, pattern und step auf input
autofocus auf button, input (sofern nicht hidden), select und textarea, um Fokus auf Formularelemente zu legen
charset auf meta, um Encoding anzugeben
(color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url und week als @type-Werte auf input, um Nutzern und Autoren das Leben einfacher zu machen)
disabled auf fieldset, um einen ganzen Formularabschnitt zu deaktivieren
form auf button, fieldset, input, output, select und textarea, um Formularelemente mit Formularen zu assoziieren (da diese außerhalb von Formularen platziert werden können)
formaction, formenctype, formmethod, formnovalidate und formtarget auf button und input, um entsprechende form-Pendants zu überschreiben
hreflang und rel auf area zwecks Konsistenz mit a und link
label und type auf menu, um weitere UI-Varianten zu ermöglichen
manifest auf html, um auf ein »Cache-Manifest« zu verweisen (→ Offline-Webanwendungen)
media auf a und area zwecks Konsistenz mit link
novalidate auf form, um etwaige Formulardatenvalidierung zu überspringen
ping auf a und area, das eine leerzeichenseparierte Liste von URLs akzeptiert, die gepingt werden, wenn Link gefolgt wird
placeholder auf input und textarea
required auf input (sofern nicht hidden oder ein Button) und textarea, um Pflichtfelder anzugeben
reversed auf ol, um die Listenreihenfolge zu invertieren
sandbox und seamless auf iframe, um Inhalte (aus Sicherheitsgründen) zu »sandboxen«, wie beispielsweise Kommentare
scoped auf style, um »spezifischere« Stylesheets zu ermöglichen
sizes auf link, um Icon-Größen anzugeben
start auf ol (wieder gestattet)
target auf a und area (wieder gestattet)
target auf base zwecks Konsistenz mit a
value auf li (wieder gestattet)

HTML 5 und Performance

Einfacher und kürzer: DTD (<!DOCTYPE html>), Encoding (<meta charset="utf-8">), MIME-Typen (<style>, <script>, …)
async und defer zur kontrollierteren Skriptausführung
- Ohne async und defer: Sofortiges Laden der Skripte, wobei restliches Laden verlangsamt werden kann
- defer (bereits Teil von HTML 4): »Skript verändert nicht das DOM, bitte weitermachen mit Parsen und Rendern«
- async: »Skript kann ausgeführt werden, sobald verfügbar«
Auslassen optionaler Tags kann über 20% Dateigröße einsparen

HTML 5, jetzt?

Ja:

<!DOCTYPE html> wird unterstützt (ruft in anderen Schreibweisen aber nicht unbedingt konsistent Standards Mode hervor)
Neue Elemente können eingesetzt und mittels document.createElement('element'); auch im Internet Explorer »stylebar« gemacht werden
<meta charset=""> funktioniert ebenso wie einige zuvor proprietäre Elemente oder Attribute (wie embed oder @autocomplete)
Validierer sind vorhanden: validator.nu, validator.w3.org
Erfahrungen sammeln, Feedback geben: public-html-comments@w3.org, whatwg@whatwg.org

Referenzen

Über mich

Jens Oliver Meiert, am 30. September 2021.

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.

Wenn du mir einen Gefallen tun magst, interpretiere wohlwollend (ich spreche drei Sprachen, und die kommen sich manchmal in die Quere), aber hinterfrage meine Arbeit und teile Feedback, damit ich lernen und Inhalte verbessern kann. Danke!