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

  1. Geschichte
  2. Design
  3. Baustellen
  4. Neuerungen
  5. HTML 5 und Performance
  6. HTML 5, jetzt?
  7. 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
  • 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
  • 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="https://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
  • 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

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

War dies nützlich oder interessant? Teile diesen Beitrag, und unterstütze meine Arbeit, indem du mit meinen E-Books lernst!

Ăśber mich

Jens Oliver Meiert, am 9. November 2024.

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Webentwickler, Manager und Autor. Ich habe als technischer Leiter und Engineering Manager für kleine und große Unternehmen gearbeitet, ich bin ein gelegentlicher Mitwirkender an Webstandards (wie HTML, CSS, WCAG) und ich 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 Erfahrungen und Ansichten. (Sei jederzeit kritisch, interpretiere wohlwollend und gib Feedback.)