Veraltete HTML-Elemente

Was wir prüfen

Wir suchen auf der Startseite nach HTML-Elementen, die in HTML5 nicht mehr vorgesehen sind:

Element	Wofür es früher diente	Heute
<font>	Schriftart, -grösse, -farbe	CSS
<center>	Zentrieren	CSS text-align oder Flexbox
<big>, <tt>, <strike>	Grösse, Schreibmaschinenschrift, Durchstreichen	CSS oder <s>, <code>
<marquee>, <blink>	Lauftext, Blinken	keine Entsprechung (stört)
<frame>, <frameset>	Seite in Rahmen aufteilen	normales Layout
<applet>	Java-Programme	gibt es nicht mehr
<acronym>, <dir>, <basefont>	Abkürzungen, Listen, Grundschrift	<abbr>, <ul>, CSS

Finden wir mindestens eines davon, gibt es eine Warnung. Im Bericht siehst Du, welche Elemente wie oft vorkommen.

Warum das wichtig ist

Diese Elemente stammen aus den Anfängen des Webs, als Gestaltung und Inhalt noch nicht getrennt waren. Mit HTML5 wurden sie aus dem Standard gestrichen.

• Keine Garantie: Browser stellen die meisten noch dar, aus Rücksicht auf alte Websites. Sie können die Unterstützung aber jederzeit einschränken.
• Schlecht für Smartphones: Feste Schriftgrössen und Layouts aus <font> und <center> passen sich nicht an kleine Bildschirme an.
• Schlecht für Barrierefreiheit: Lauftext und Blinken stören Menschen mit Konzentrationsschwierigkeiten und Epilepsie-Risiko.
• Zeichen für Alter: Solche Elemente zeigen, dass Teile der Website lange nicht überarbeitet wurden.

So behebst Du es

Texte im CMS

Häufigste Ursache sind Texte, die aus Word, E-Mails oder einer alten Website in den Editor kopiert wurden. So behebst Du es:

1. Öffne den Text im Editor.
2. Markiere den betroffenen Abschnitt und entferne die Formatierung («Formatierung löschen», meist ein Symbol mit durchgestrichenem T).
3. Formatiere ihn neu mit den Mitteln des Editors: Überschrift, fett, Ausrichtung.

Tipp: Kopiere Texte künftig als «Nur Text einfügen» (Ctrl+Shift+V bzw. Cmd+Shift+V).

Im Code

Ersetze die Elemente durch CSS:

<!-- alt -->
<center><font color="red" size="4">Aktion!</font></center>

<!-- neu -->
<p class="hinweis">Aktion!</p>

.hinweis { text-align: center; color: #c00; font-size: 1.25rem; }

Frames

Ist die ganze Website mit <frameset> aufgebaut, ist sie technisch über 20 Jahre alt. Hier lohnt sich ein Neuaufbau statt einer Reparatur.

So prüfst Du es selbst

Öffne den Seitenquelltext und such mit Ctrl+F nach <font, <center und <marquee. Der W3C-Validator meldet veraltete Elemente ebenfalls.

Häufige Fragen

Woher kommen solche Elemente in einer modernen Website?

Oft aus Texten, die aus Word oder einer alten Website kopiert wurden, aus alten Editoren im CMS oder aus eingebetteten Widgets. Selten stammen sie aus dem Theme selbst.

Lassen sie sich einfach löschen?

Meist ja, aber dann fehlt die Gestaltung, die sie bewirkt haben, etwa eine Farbe oder Zentrierung. Ersetze sie durch die passende Formatierung im Editor oder im CSS.