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
- 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
-
Analyse des aktuellen Gebrauchs von HTML sowie Inhalten
- 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
oderapplication/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
undaxis
auftd
undth
align
aufcaption
,col
,colgroup
,div
,h1
,h2
,h3
,h4
,h5
,h6
,hr
,iframe
,img
,input
,legend
,object
,p
,table
,tbody
,td
,tfoot
,th
,thead
undtr
alink
,link
,text
undvlink
aufbody
archive
,classid
,codebase
,codetype
,declare
undstandby
aufobject
background
aufbody
bgcolor
aufbody
,table
,td
,th
, undtr
border
aufobject
undtable
cellpadding
undcellspacing
auftable
char
undcharoff
aufcol
,colgroup
,tbody
,td
,tfoot
,th
,thead
undtr
charset
undrev
aufa
undlink
clear
aufbr
compact
aufdl
,menu
,ol
undul
frame
auftable
frameborder
aufiframe
height
auftd
undth
hspace
undvspace
aufimg
undobject
longdesc
aufiframe
undimg
marginheight
undmarginwidth
aufiframe
name
aufimg
nohref
aufarea
noshade
aufhr
nowrap
auftd
undth
profile
aufhead
rules
auftable
scrolling
aufiframe
scheme
aufmeta
scope
auftd
shape
undcoords
aufa
size
aufhr
target
auflink
type
undvaluetype
aufparam
type
aufli
,ol
undul
valign
aufcol
,colgroup
,tbody
,td
,tfoot
,th
,thead
undtr
version
aufhtml
width
aufcol
,colgroup
,hr
,pre
,table
,td
undth
Geänderte Elemente
a
ohnehref
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 istmenu
erfährt neuen Gebrauch im Zusammenhang mit Toolbars und Kontextmenüssmall
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
aufimg
sollte den Wert0
haben (→ CSS)language
aufscript
sollte den WertJavaScript
haben (case-insensitive) (→ auslassen)name
aufa
(→id
)summary
auftable
(→ einleitender Text odercaption
)
Neue Elemente
article
als Container für Inhalte, wie Artikel oder Blog-Beiträgeaside
als Element für Randbemerkungen, sowohl neben oder als Teil primärer Inhalteaudio
undvideo
nebstsource
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 Nutzerbefehledatalist
(zusammen mitinput@list
) zur Darstellung vordefinierter Optionen (die unter anderem als Slider dargestellt werden können)details
für zusätzliche Informationen oder Bedienelemente im interaktiven Kontextembed
als nun in die Familie aufgenommenes Element fĂĽr Plugin-Inhaltefigure
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-Paarenmark
als Element zum Hervorheben fĂĽr Referenzzweckemeter
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
(alsinput
-GegenstĂĽck) zur Ausgabe, beispielsweise skriptbasierter Werteberechnungprogress
als Element zur Fortschrittsanzeigerp
,rt
undruby
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änglichkeitclass
contenteditable
contextmenu
data-*
dir
draggable
hidden
id
itemid
fĂĽr Microdataitemprop
fĂĽr Microdataitemref
fĂĽr Microdataitemscope
fĂĽr Microdataitemtype
fĂĽr Microdatalang
role
für Zugänglichkeitspellcheck
style
tabindex
title
Neue Attribute
async
aufscript
, um das Laden und AusfĂĽhren von Skripten zu steuernautocomplete
,list
,min
,max
,multiple
,pattern
undstep
aufinput
autofocus
aufbutton
,input
(sofern nichthidden
),select
undtextarea
, um Fokus auf Formularelemente zu legencharset
aufmeta
, um Encoding anzugeben- (
color
,date
,datetime
,datetime-local
,email
,month
,number
,range
,search
,tel
,time
,url
undweek
als@type
-Werte aufinput
, um Nutzern und Autoren das Leben einfacher zu machen) disabled
auffieldset
, um einen ganzen Formularabschnitt zu deaktivierenform
aufbutton
,fieldset
,input
,output
,select
undtextarea
, um Formularelemente mit Formularen zu assoziieren (da diese außerhalb von Formularen platziert werden können)formaction
,formenctype
,formmethod
,formnovalidate
undformtarget
aufbutton
undinput
, um entsprechendeform
-Pendants zu ĂĽberschreibenhreflang
undrel
aufarea
zwecks Konsistenz mita
undlink
label
undtype
aufmenu
, um weitere UI-Varianten zu ermöglichenmanifest
aufhtml
, um auf ein »Cache-Manifest« zu verweisen (→ Offline-Webanwendungen)media
aufa
undarea
zwecks Konsistenz mitlink
novalidate
aufform
, um etwaige Formulardatenvalidierung zu ĂĽberspringenping
aufa
undarea
, das eine leerzeichenseparierte Liste von URLs akzeptiert, die gepingt werden, wenn Link gefolgt wirdplaceholder
aufinput
undtextarea
required
aufinput
(sofern nichthidden
oder ein Button) undtextarea
, um Pflichtfelder anzugebenreversed
aufol
, um die Listenreihenfolge zu invertierensandbox
undseamless
aufiframe
, um Inhalte (aus Sicherheitsgründen) zu »sandboxen«, wie beispielsweise Kommentarescoped
aufstyle
, um »spezifischere« Stylesheets zu ermöglichensizes
auflink
, um Icon-Größen anzugebenstart
aufol
(wieder gestattet)target
aufa
undarea
(wieder gestattet)target
aufbase
zwecks Konsistenz mita
value
aufli
(wieder gestattet)
HTMLÂ 5 und Performance
- Einfacher und kĂĽrzer: DTD (
<!DOCTYPE html>
), Encoding (<meta charset="utf-8">
), MIME-Typen (<style>
,<script>
, …) -
async
unddefer
zur kontrollierteren SkriptausfĂĽhrung- Ohne
async
unddefer
: 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«
- Ohne
- 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 (wieembed
oder@autocomplete
)- Validierer sind vorhanden: validator.nu, validator.w3.org
- Erfahrungen sammeln, Feedback geben: public-html-comments@w3.org, whatwg@whatwg.org
Referenzen
- HTML-5-Arbeitsentwurf
- Unterschiede zwischen HTMLÂ 4 und 5
- Listenarchiv von public-html@w3.org
- Ăśbersicht aller HTML-Elemente
Ăśber mich
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 Mitwirkender an verschiedenen Webstandards 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 Erfahrungen und Ansichten. (Sei kritisch, interpretiere wohlwollend und gib Feedback.)
Ähnliche Beiträge
Das könnte dich ebenfalls interessieren:
- HTML und Performance: Ăśber das Auslassen optionaler Tags und AnfĂĽhrungszeichen
- Upgrade Your HTML V
- CSS Optimization Basics
Freund von optimiertem HTML? Probier Upgrade Your HTML (2019–2024). Gutes HTML ist nicht einfach. Minimales HTML wird unterschätzt. HTML aus dem Alltag kann man oft verbessern. Diese Buchserie macht das. Erhältlich bei Amazon, Apple Books, Kobo, Google Play Books und Leanpub.