Warum werden einige HTML-Elemente veraltet?

Das Internet gibt es schon sehr lange, und im Laufe der Zeit haben sich unsere Vorstellungen vom Webdesign verändert. Viele alte Techniken und Arbeitsweisen wurden durch neuere und bessere Alternativen ersetzt, und wir sagen, dass sie veraltet sind.

Veraltet. Das ist ein Wort, das wir oft verwenden und sehen. Aber haben Sie schon einmal darüber nachgedacht, was es in der Praxis bedeutet? Was sind einige Beispiele für veraltete Webelemente und warum verwenden wir sie nicht mehr?

Was ist Veraltung?

Im alltäglichen Sprachgebrauch bedeutet „etwas veralten lassen“, Missbilligung dafür auszudrücken. Sie könnten zum Beispiel geneigt sein, eine Nachricht, die Ihnen nicht gefällt, zu veralten lassen.

Wenn wir jedoch in einem technischen Sinne sprechen, bedeutet Veraltung die Entmutigung der Verwendung eines alten Features. Oft bleibt die alte Funktion aus Gründen der Abwärtskompatibilität funktionsfähig (damit Legacy-Projekte nicht brechen). Im Wesentlichen bedeutet dies, dass Sie technisch gesehen Dinge immer noch auf die Legacy-Art tun können. Es wird wahrscheinlich immer noch funktionieren, aber vielleicht ist es besser, den neuen Weg zu gehen. 

Ein weiteres häufiges Szenario ist, dass technische Elemente als Vorstufe zu ihrer zukünftigen Entfernung veraltet werden (was wir manchmal als „Auslaufenlassen“ eines Features bezeichnen). Dies gibt allen Zeit, vom alten Arbeitsweg auf das neue System umzusteigen, bevor der Übergang stattfindet. Wenn Sie WordPress verfolgen, haben sie dies kürzlich mit ihrem radikal neuen Gutenberg-Editor getan. Sie haben ihn veröffentlicht, aber eine Option beibehalten, um zum „klassischen“ Editor zurückzukehren, damit die Benutzer Zeit zum Übergang hatten. Eines Tages wird der „klassische“ Editor wahrscheinlich entfernt, und Gutenberg ist die einzige Option für die Bearbeitung von Beiträgen. Mit anderen Worten, WordPress lässt den „klassischen“ Editor auslaufen.

Das ist nur ein Beispiel. Wir können uns auch HTML-Features ansehen, die einst wesentliche Bestandteile waren, aber irgendwann veraltet sind.

Warum werden HTML-Elemente veraltet?

Im Laufe der Jahre hat sich unsere Denkweise über HTML weiterentwickelt. Ursprünglich war es eine Allzweck-Markup-Sprache zur Anzeige und Gestaltung von Inhalten im Internet.

Im Laufe der Zeit, als externe Stylesheets immer wichtiger wurden, begann es mehr Sinn zu machen, die Webentwicklung anders zu betrachten – als eine Trennung der Zuständigkeiten, bei der HTML den Inhalt einer Seite definiert und CSS für die Darstellung zuständig ist.

Diese Trennung von Stil und Inhalt bietet zahlreiche Vorteile

• Vermeidung von Duplizierung: Das Wiederholen von Code für jede Instanz von rotem Text auf einer Seite ist unhandlich und ineffizient, wenn Sie stattdessen eine einzige CSS-Klasse haben können, die alles auf einmal behandelt. 
• Einfache Verwaltung: Da die gesamte Präsentation von einem zentralen Stylesheet gesteuert wird, können Sie mit geringem Aufwand seitenweite Änderungen vornehmen.
• Lesbarkeit: Beim Betrachten des Quellcodes einer Website ist es viel einfacher, den Code zu verstehen, der sauber in separate Dateien für Inhalt und Stil aufgeteilt wurde. 
• Caching: Die überwiegende Mehrheit der Websites hat ein konsistentes Styling über alle Seiten hinweg. Warum also den Browser diese Stildefinitionen immer wieder herunterladen lassen? Das Platzieren des Präsentationscodes in einem dedizierten Stylesheet ermöglicht Caching und Wiederverwendung, um Bandbreite zu sparen. 
• Entwicklerspezialisierung: Große Website-Projekte können mehrere Designer und Entwickler beschäftigen, die jeweils über ihre individuellen Fachgebiete verfügen. Einem CSS-Spezialisten zu erlauben, an seinem Teil des Projekts in seinen eigenen separaten Dateien zu arbeiten, kann für alle Beteiligten viel einfacher sein. 
• Benutzeroptionen: Die Trennung von Styling und Inhalt kann es dem Entwickler ermöglichen, dem Endbenutzer einfach Anzeigeoptionen anzubieten (der immer beliebtere „Nachtmodus“ ist ein gutes Beispiel dafür) oder verschiedene Anzeigemodi für Barrierefreiheit. 
• Responsivität und Geräteunabhängigkeit: Die Trennung von Code für Inhalt und visuelle Darstellung erleichtert den Aufbau von Websites, die auf verschiedenen Bildschirmauflösungen sehr unterschiedlich angezeigt werden.

Allerdings gab es in den frühen Tagen von HTML eine beträchtliche Menge an Markup, das dazu diente, das Aussehen der Seite direkt neben dem Inhalt zu steuern. Möglicherweise sehen Sie Code wie diesen: 

<center><font face="verdana" color="#2400D3">Hello world!</font></center>

...all dies ist nun aufgrund der oben genannten Trennung der Zuständigkeiten veraltet. 

Welche HTML-Elemente sind jetzt veraltet?

Ab der Veröffentlichung von HTML5 wird die Verwendung der folgenden Elemente nicht mehr empfohlen

• <acronym> (verwenden Sie stattdessen <abbr>)
• <applet> (verwenden Sie <object>)
• <basefont> (verwenden Sie CSS-Schriftarteigenschaften wie font-size, font-family usw.)
• <big> (verwenden Sie CSS font-size)
• <center> (verwenden Sie CSS text-align)
• <dir> (verwenden Sie <ul>)
• <font> (verwenden Sie CSS-Schriftarteigenschaften)
• <frame> (verwenden Sie <iframe>)
• <frameset> (nicht mehr benötigt)
• <isindex> (nicht mehr benötigt)
• <noframes> (nicht mehr benötigt)
• <s> (verwenden Sie text-decoration: line-through in CSS)
• <strike> (verwenden Sie text-decoration: line-through in CSS)
• <tt> (verwenden Sie <code>)

Es gibt auch eine lange Liste veralteter Attribute, darunter viele Elemente, die weiterhin gültig sind (wie das Attribut align, das von vielen Elementen verwendet wird). Das W3C bietet die vollständige Liste veralteter Attribute.

Warum verwenden wir Tabellen nicht mehr für Layouts?

Bevor CSS weit verbreitet war, war es üblich, Website-Layouts mit dem <table>-Element zu erstellen. Während das <table>-Element nicht veraltet ist, wird die Verwendung für Layouts dringend abgeraten. Tatsächlich sind fast alle HTML-Tabellenattribute, die für Layouts verwendet wurden, veraltet, wie z. B. cellpadding, bgcolor und width. 

Einst schienen Tabellen eine gute Möglichkeit zu sein, eine Webseite zu gestalten. Wir konnten Zeilen und Spalten beliebig groß machen, was bedeutete, dass wir alles hineinpacken konnten. Header, Navigation, Footer... alles Mögliche!

Das würde eine Menge Website-Code erstellen, der so aussah

<table border="0" cellpadding="0" cellspacing="0" width="720">
  <tr>
    <td colspan="10"><img name="logobar" src="logobar.jpg" width="720" height="69" border="0" alt="Logo"></td>
  </tr>
  <tr>
    <td rowspan="2" colspan="5"><img name="something" src="something.jpg" width="495" height="19" border="0" alt="A picture of something"></td>
    <td>Blah blah blah!</td>
    <td colspan="3"> 
  <tr>
  <!--  and so on -->
</table>

Es gibt zahlreiche Probleme mit diesem Ansatz

• Komplizierte Layouts enden oft mit Tabellen, die in andere Tabellen verschachtelt sind, was zu einem Kopfschmerzen verursachenden Code-Chaos führt. Schauen Sie sich nur den Quellcode eines beliebigen E-Mail-Newsletters an.
• Die Zugänglichkeit ist problematisch, da Bildschirmlesegeräte bei übermäßiger Tabellennutzung leicht verwirrt werden.
• Tabellen sind langsam zu rendern, da der Browser wartet, bis die gesamte Tabelle heruntergeladen ist, bevor sie auf dem Bildschirm angezeigt wird.
• Responsives und mobilfreundliches Layout ist mit einem tabellenbasierten Layout sehr schwer zu erstellen. Wir haben immer noch keine Patentlösung für responsive Tabellen gefunden (obwohl viele clevere Ideen existieren).

Um das Thema Trennung von Inhalt und Darstellung fortzusetzen, ist CSS ein viel effizienterer Weg, um das visuelle Layout zu erstellen, ohne den Code des Haupt-HTML-Dokuments zu überladen. 

Also, wann sollten wir <table> verwenden? Eigentlich tabellarische Daten, natürlich! Wenn Sie eine Liste von Baseballergebnissen, Statistiken oder etwas Ähnliches anzeigen müssen, ist <table> Ihr Freund. 

Warum verwenden wir noch und -Tags?

<style>
  .emphasis { font-weight:bold }
</style>
    
This is a <span class="emphasis">bold</span> word!

This is a <span style="font-weight:bold">bold</span> word!

This is a <b>bold</b> word!