Veraltete Elemente und Attribute im HTML5
Welche Elemente und Attribute sind im HTML5 deprecated ?
Wenn wir von Neuerungen in HTML5 sprechen, müssen wir uns natürlich auch fragen, welche Features wir ab jetzt nicht mehr verwenden sollen. In anderen Spezifikationen des W3C ist in diesem Zusammenhang oft von deprecated die Rede, einem Begriff, der bei HTML5 jedoch keine Gültigkeit besitzt. Da HTML5 rückwärtskompatibel ist, müssen auch solche Features vom Browser korrekt angezeigt werden. Für den Autor einer Seite allerdings hält die Änderungs-Spezifikation eine Liste an Elementen und Attributen bereit, die er nicht mehr verwenden sollte beziehungsweise darf.
An die Stelle von deprecated tritt nun der Ausdruck absent.
Ein Blick auf das Wordle in Abbildung zeigt, was endgültig out ist: font und center. An ihre Stelle treten, wie bei den Elementen u, big, strike, basefont, s oder tt auch, zeitgemäßere Lösungen mit CSS. An die Stelle von frame, frameset und noframes treten nun iframes; statt acronym soll man abbr, statt dir besser ul verwenden, und isindex geht in den neuen Möglichkeiten von Formularen auf. Sollten Sie einige der angesprochenen Elemente im Wordle vermissen, so liegt das daran, dass sie sehr selten verwendet wurden und eben auch aus diesem Grund nicht mehr Teil von HTML5 sind.
Genauso eindeutig ist das Bild bei veralteten Attributen. Breite (width), Höhe (height), Ausrichtung (align, valign), Abstände (cellpadding, cellspacing) und Farbgebung (bgcolor) dominieren im Wordle aus Abbildung. Sie erscheinen meist in Kombination mit table, td oder body und sind, wie viele der veralteten Elemente auch, ab jetzt durch CSS zu ersetzen.
Abbildung: Elemente, die nicht mehr in HTML5 verwendet werden sollen.
Abbildung: Attribute, die nicht mehr in HTML5 verwendet werden sollen.
Woher weiß man nun im Detail, welche Elemente und Attribute nicht mehr zu verwenden sind? Ein ständiges Abgleichen mit der Änderungs-Spezifikation ist sehr mühsam und wohl nicht zielführend. Auf der Suche nach einer Lösung dieses Problems werden wir beim HTML5-Validator fündig: Er weiß genau, was richtig und falsch ist. Probieren wir es aus: Wählen wir dazu Text Field als Eingabemodus, und ersetzen wir im vorausgefüllten HTML-Grundgerüst die Zeile <p></p> durch folgendes, falsches Markup:
<center>
<acronym>WHATWG</acronym>
</center>
Als Antwort bekommen wir zwei Fehlermeldungen, folgendermaßen lauten:
- 1. Error: The
centerelement is obsolete. Use CSS instead. - 2. Error: The
acronymelement is obsolete. Use theabbrelement instead.
Der Link bei Use CSS instead führt uns übrigens direkt ins WHATWG-Wiki zur Seite Presentational elements and attributes, auf der wir Details zur richtigen Verwendung nachlesen können. Auch Syntaxfehler werden vom Validator direkt angezeigt, wie der nächste Test demonstriert. Versuchen wir es mit folgendem Quellcode:
<!DOCTYPE html>
<title>
Die Antwort ist wieder eine Fehlermeldung, diesmal mit dem Hinweis, dass das Dokument noch nicht komplett und deshalb ungültig ist:
- 1. Error: End of file seen when expecting text or an end tag.
Wenn wir diesen Fehler durch Hinzufügen des </title>-End-Tags beheben, verschwindet auch diese Fehlermeldung, und wir haben das kürzestmögliche gültige HTML5-Dokument erzeugt:
<!DOCTYPE html>
<title></title>
Die Basis der Fehlererkennung im Validator ist eines der Key-Features von HTML5, der HTML-Parser. Er wurde im Gegensatz zu allen bisherigen Spezifikationen bis ins letzte Detail ausformuliert und liest sich auf 90 Seiten annähernd so spannend wie das Telefonbuch von München oder Wien. Aus technischer Sicht allerdings ist dieses Kapitel essenziell, denn es definiert, wie HTML5-Markup zu parsen und der DOM-Baum des Dokuments aufzubauen ist.
Unser Minimalbeispiel von vorhin generiert also in Wirklichkeit einen kompletten HTML5-DOM-Baum inklusive html-, head- und body-Elementen. Den Beweis dafür liefert uns ein weiteres Tool, der HTML5 DOM Live Viewer – probieren Sie es aus!
In HTML5 wurden eine Menge neuer Elemente eingeführt, aber die Spezifikation schafft auch einige gebräuchliche Elemente ab, die Sie eventuell in Ihren Webseiten verwenden. Diese sollten Sie beim Umstieg entfernen:
basefontbigcenterfontsstrikettu
Einige dieser Tags sind ziemlich veraltet. Aber da draußen finden Sie viele Seiten, die mit visuellen Editoren wie zum Beispiel Dreamweaver bearbeitet werden und deshalb eine Menge font- und center-Tags enthalten.
Neben gestalterischen Elementen wurde auch die Unterstützung von Frames entfernt.
Frames waren immer sehr beliebt in Enterprise-Webanwendungen wie zum Beispiel PeopleSoft, Microsoft Outlook Web Access und sogar in speziell entwickelten Portalen. Trotz der weit verbreiteten Verwendung haben Frames so viele Schwierigkeiten im Hinblick auf Benutzerfreundlichkeit und Barrierefreiheit mit sich gebracht, dass man sie loswerden musste. Dementsprechend sind die folgenden Elemente verschwunden:
frameframesetnoframes
Sie sollten Möglichkeiten finden, das Layout Ihrer Benutzeroberflächen mit regulärem CSS und ein bisschen JavaScript auch ohne Frames zu gestalten. Falls Sie mit Frames dafür sorgen, dass Kopfzeile, Fußzeile und Navigation auf jeder Seite Ihrer Anwendung gleich angezeigt werden, können Sie das auch mit den Tools Ihres Webentwicklungs-Frameworks erreichen. Einige andere Elemente sind verschwunden, weil es bessere Optionen dafür gibt:
acronymwird durchabbrersetzt.appletwird durchobjectersetzt.dirwird durchulersetzt.
Zusätzlich zu den veralteten Elementen sind auch viele Attribute nicht mehr zulässig. Dazu gehören Darstellungs-Attribute wie zum Beispiel:
alignlink,vlink,alinkundtextfür dasbody-Tagbgcolorheightundwidthscrollingfür dasiframe-Elementvalignhspaceundvspacecellpadding,cellspacingundborderfürtable
Falls Sie für Ihre Links target verwenden, wie z.B. in:
<a href="https://www.html-lernen.info/" target="_blank">
sollten Sie stattdessen JavaScript verwenden, da auch target abgeschafft wurde.
Das Attribut profile des head-Tags wird auch nicht mehr unterstützt. Das ist etwas, was Sie tendenziell in einer Menge WordPress-Vorlagen finden.
Zu guter Letzt ist das Attribut longdesc für img- und iframe-Elemente verschwunden. Für Verfechter der Barrierefreiheit ist das ein bisschen enttäuschend, da longdesc die allgemein anerkannte Möglichkeit war, Benutzern mit Bildschirmlesegeräten zusätzliche beschreibende Informationen zu bieten.
Falls Sie vorhaben, HTML5 für Ihre vorhandenen Websites zu verwenden, sollten Sie diese Elemente ausfindig machen und entfernen oder durch semantischere Varianten ersetzen. Validieren Sie Ihre Seiten unbedingt mit dem Validierungs-Service des W3C , der Ihnen dabei helfen wird, veraltete Tags und Attribute aufzuspüren.