Veraltete HTML-Tags
Veraltete Elemente sind noch erlaubt, aber nicht empfohlen und werden durch neuere ersetzt. Liste veralteter HTML-Tags mit ihren modernen Alternativen.
Dieses Kapitel erklärt, welche HTML-Tags als veraltet gelten, warum sie aus der Mode gekommen sind und was stattdessen verwendet werden sollte. Wenn Sie altes Markup geerbt oder einen Ausschnitt aus einem alten Tutorial kopiert haben, ist dies Ihre Karte zu den modernen Alternativen.
Warum HTML-Tags als veraltet markiert werden
Die meisten veralteten Tags haben eine gemeinsame Ursache: Sie vermischen Präsentation (wie Inhalte aussehen) mit der Struktur (was Inhalte bedeuten). Frühes HTML hatte Tags wie <font>, <center> und <big>, die Farben, Ausrichtung und Größen direkt im Markup steuerten. Dieser Ansatz skaliert nicht: Das Aussehen einer Website zu ändern, bedeutete, jede Seite von Hand zu bearbeiten.
Moderne Webentwicklung folgt dem Prinzip der Trennung von Zuständigkeiten: HTML beschreibt die Struktur und Bedeutung von Inhalten, während CSS das gesamte Styling übernimmt. Das macht Seiten einfacher zu pflegen, leichter zum Herunterladen und flexibler beim Neugestalten. Es verbessert auch die Barrierefreiheit — Screenreader und andere assistive Technologien verlassen sich auf bedeutungsvolles, semantisches Markup und nicht auf visuelle Tricks. Für ein vollständigeres Bild des modernen, bedeutungsorientierten Ansatzes siehe Semantische Elemente in HTML5 und die HTML5-Einführung.
Veraltet vs. obsolet
Diese beiden Begriffe werden oft synonym verwendet, sind aber nicht dasselbe:
- Veraltet — der Tag ist noch erlaubt und die meisten Browser rendern ihn noch, aber seine Verwendung wird nicht empfohlen. Er kann in Zukunft entfernt werden.
- Obsolet — die HTML5-Spezifikation besagt, dass der Tag nicht verwendet werden darf. Browser können ihn nur aus Gründen der Abwärtskompatibilität weiterhin rendern, aber Sie sollten ihn niemals in neuem Markup verwenden.
Verlassen Sie sich nicht darauf, dass ein veralteter Tag „einfach funktioniert". Die Browser-Unterstützung kann jederzeit eingestellt werden, und diese Tags verhalten sich oft inkonsistent in verschiedenen Browsern. Bevorzugen Sie immer die moderne Alternative.
Vorher und nachher: einen veralteten Tag ersetzen
Das klassische Beispiel ist <font>, das Farbe, Größe und Schriftart direkt im Markup festlegte. Hier ist die alte Methode neben dem CSS-Äquivalent.
Veraltet, Präsentation im HTML:
<font color="red" size="5" face="Arial">Important notice</font>Modern, Struktur plus CSS:
<p class="notice">Important notice</p>.notice {
color: red;
font-size: 1.5rem;
font-family: Arial, sans-serif;
}Die zweite Version trennt was der Text ist (ein Absatz, der ein Hinweis ist) von wie er aussieht. Sie können jeden .notice-Eintrag auf der Website durch Bearbeiten einer einzigen CSS-Regel neu gestalten. Mehr dazu auf den Seiten zu CSS font und text-align.
Hinweise zur Barrierefreiheit
Einige veraltete Tags werden speziell deshalb nicht empfohlen, weil sie Barrieren für Nutzer schaffen:
<blink>und<marquee>erzeugen blinkenden oder sich bewegenden Text. Bewegung und Blinken sind für viele Leser ablenkend, können Text für Menschen mit kognitiven oder Aufmerksamkeitsunterschieden unleserlich machen, und schnelles Blinken kann bei Nutzern mit lichtempfindlicher Epilepsie sogar Anfälle auslösen. Wenn Sie Bewegung wirklich benötigen, verwenden Sie CSS animation — und respektieren Sie dieprefers-reduced-motion-Einstellung des Nutzers, damit sie deaktiviert werden kann.<acronym>wurde durch<abbr>ersetzt, weil die Unterscheidung zwischen „Akronym" und „Abkürzung" verwirrend und inkonsistent war. Das einzelne<abbr>-Element deckt beides ab, und assistive Technologien können den erweitertentitle-Text für Nutzer vorlesen.
Liste veralteter HTML-Tags
| TAG | Beschreibung | ALTERNATIVE |
|---|---|---|
<acronym> | Teilt dem Browser mit, dass die enthaltenen Zeichen ein Akronym oder eine Abkürzung sind. | <abbr> |
<applet> | Definiert ein eingebettetes Java-Applet. | <object> |
<basefont> | Legt die Standardschriftgröße und -farbe des Textes fest. | CSS styles |
<big> | Vergrößert die Schriftgröße um eine konventionelle Einheit. | CSS styles |
<blink> | Erstellt einen eingeschlossenen Text, der langsam blinkt. | animation |
<center> | Richtet den Inhalt mittig aus. | text-align |
<dir> | Definiert eine Liste von Verzeichnistiteln. | <ul> |
<font> | Definiert die Schriftartmerkmale. | CSS styles |
<frame> | Definiert ein bestimmtes Fenster, einen Frame, in das eine andere Webseite geladen werden kann. | <iframe> |
<frameset> | Definiert die Struktur eines Frames. | <iframe> |
<isindex> | Zeigt Suchstrings im aktuellen Dokument an. | <form> |
<noframes> | Enthält einen alternativen Text für Browser, die keine Frames unterstützen. | Vollständig obsolet mit <frameset>/<frame>; kein direkter Ersatz. |
<marquee> | Erstellt einen scrollenden Text oder ein Bild. | animation |
<spacer> | Fügt leeren Raum (horizontal oder vertikal) für das Layout ein. | CSS styles (margin/padding) |
<menu> | Definiert eine Liste von Befehlen. | <ul> |
<plaintext> | Teilt dem Browser mit, dass sein Inhalt als einfacher Text ohne Formatierung angezeigt werden muss. | <pre> |
<strike> | Definiert durchgestrichenen Text. | <del> |
<tt> | Definiert Text, der in Monospace-Schrift angezeigt werden soll. | <code> |
Übungen
Nächste Schritte
Jetzt, da Sie wissen, was Sie vermeiden sollten, lernen Sie die modernen, bedeutungsorientierten Alternativen in HTML-Elemente und Semantische Elemente in HTML5 kennen und verlagern Sie dann alle visuellen Stile in CSS.