Optionales HTML: Alles, was man wissen muss

Artikel vom 18. Dezember 2019. ISSN 1614-3124, #64. Schwerpunkt:  (RSS-Feed).

Gründe, optionalen Code einzusetzen, haben oft mit Verständlichkeit zu tun, während sich Gründe, diesen auszulassen, um Performance drehen. Beides muss sich nicht unbedingt ausschließen, wenn mit optionalem Code in unseren Editoren und Repositories gearbeitet wird, aber dieser in Produktionsumgebungen entfernt wird.

Welcher Code – hier: HTML – ist aber optional? Dieser Artikel gibt einen Überblick über alles optionale Markup * mit Ausnahme von Leerzeichen und anderem, das einfache Minifizierer bereits abdecken. Es gibt einiges auszulassen und dies ist gut für uns.

Inhalt

  1. Optionale Tags
  2. Optionale Anführungszeichen
  3. Attributswert-Defaults
  4. Anhang I: Risiken
  5. Anhang II: Tooling

Optionale Tags

Die folgende Übersicht führt alle optionalen Tags (nicht Elemente, und auch nicht Attribute) laut aktuell »lebendem« HTML auf. Die End-Tags »leerer« Elemente werden nur der Vollständigkeit halber und in Klammern genannt. Es kann nützlich sein, für etwaige Bedingungen und Anforderungen den jeweiligen Teil der Spezifikation zu lesen.

Optionale Anführungszeichen

Attributswerte müssen nicht immer in Anführungszeichen gesetzt werden (unerheblich ob einfache oder doppelte Anführungszeichen). Die HTML-Spezifikation erläutert detailliert, wie das Parsen von Attributen funktioniert, und entsprechend skizziert dieser Abschnitt eher, wann Anführungszeichen ausgelassen werden können, und wann nicht.

<!-- mit Anführungszeichen -->
<link rel="stylesheet" href="default.css">

<!-- ohne Anführungszeichen -->
<link rel=stylesheet href=default.css>

Solange nach dem Gleichheitszeichen oder als Teil des Attributswertes

folgt, muss der entsprechende Attributswert nicht in Anführungszeichen gesetzt werden.

Normalerweise beendet ein Leerzeichen dann die Zeichenfolge, um zum nächsten Attribut zu führen, oder ein Größer-als-Zeichen, das bedeutet, dass das Start-Tag vollständig ist.

Gibt es einen einfacheren Weg, all diese Zeichen zu verinnerlichen? Aus meiner Erfahrung mit dem manuellen Auslassen optionalen Codes (und dem Gebrauch korrekter Zeichensetzung, was bei Anführungszeichen relevant ist), ja. Die Daumenregel, die ich verwende, besteht darin, zu schauen, ob ein Attributswert Gleichheits- oder Leerzeichen beinhaltet – wenn nicht, können die Anführungszeichen meistens ausgelassen werden.

Attributswert-Defaults

Wir können ebenfalls HTML einsparen, indem wir Attribute auslassen, deren Werte mit ihren »Defaults«, also ihren voreingestellten Werten übereinstimmen. Es folgt eine Liste von Attributen mit ihren Default-Werten, die im Wesentlichen auf der Syntax für Defaults bei fehlenden Werten fußt.

Wichtig: Boolesche Werte werden nicht aufgeführt; diese sind in der Regel »an« wenn anwesend, und »aus« wenn abwesend. Trotzdem ist die Spezifikation bei Attributswert-Defaults nicht einfach, auszulesen – lassen Sie mich wissen, wenn Ihnen Defaults auffallen, die falsch sind oder fehlen.

❧ Dies sind die drei Säulen, die optionalen HTML-Code ausmachen. Durch das Entfernen optionaler Tags, das Nicht-Anführen von Attributswerten, die keine Anführungszeichen benötigen sowie das Vermeiden von Attribut-Wert-Paaren, die auf Defaults zeigen, können wir die HTML-Last bemerklich reduzieren.

Das genaue Ausmaß der Einsparungen variiert genauso, wie es unsere Präferenzen tun, dies im Handwerk oder im Tooling anzusiedeln. Aber egal wie viel genau eingespart wird, und unabhängig davon, ob das Wissen darum in unseren Köpfen oder unserer Umgebung lebt, ist optionales HTML optionales HTML. Diese Tautologie will, dass es wichtig ist, zu wissen, was überhaupt »optional« ist, und was damit gemacht werden kann. Diese Übersicht soll dabei helfen.

König Arthur ist angesäuert.

Abbildung: Optionale Ehre. (Copyright King Features Syndicate, Inc., vertrieben durch Bulls.)

Anhang I: Risiken

Mit einem Jahrzehnt Erfahrung, (nicht) mit optionalem HTML-Code zu arbeiten und ihn sowohl manuell als auch automatisiert auszulassen, gibt es wenig für diesen Abschnitt zu ergänzen. Der Grund dafür ist nicht, dass es gar keine Risiken gibt, dass mal kurzzeitig etwas »kaputt geht«, sondern eine Routine: Validierung.

Bis zu diesem Tag ist HTML-Validierung (ebenso wie CSS-Validierung) eine vernachlässigte Praxis, die nicht nur zu unnötigem Code und Fehlern führt, sondern dessen Vernachlässigung auch unsere Profession untergräbt. Die von uns, die ihren Code regelmäßig prüfen und validieren, können einfache Syntaxfehler ausschließen und damit eine gewisse Grundqualität garantieren, und sie lernen für gewöhnlich aus ihren Fehlern und werden damit besser. Die, die nicht validieren, liefern wahrscheinlich inferioren Code aus, und mögen weniger lernen und verstehen, was gutes Markup ausmacht.

Während Validierung nun dabei hilft, auszulassen was optional ist, gibt es valide Grenzfälle, die überraschend sein können. Der prominenteste, und vielleicht der einzige, in den wir vielleicht je reinrennen, basiert auf Markup folgender Art:

<p>Beispiel</p>
<img src="foo" alt="Bar">

Wenn aller optionale Code ausgelassen wird, verwandelt sich dies in

<p>Beispiel
<img src=foo alt=Bar>

… was, wie Sie bemerken, etwas anderes ist, da das Bild, das zuvor ein anonymes Block-Element aufspannte, nun Teil des Absatzes ist. [Technisch gesehen ist dies keine Stelle, an der </p> entfernt werden sollte – danke für den Hinweis, Joel Canfield –, aber Werkzeuge tun dies bisher dennoch, und der Code ist in beiden Fällen valid.]

Es gibt hier jedoch noch immer kein Drama. Die Lösung beruht normalerweise darauf, den entsprechenden Absatz geschlossen zu halten, das Bild in einem nicht-anonymen Element unterzubringen oder, wenn semantisch angemessen, andere Elemente einzusetzen.

Es gibt keine Risiken, sondern eher viele Vorteile, optionales HTML auszulassen.

Anhang II: Tooling

Da es dieser Artikel absichtlich offenlässt, zu lernen, was in HTML optional ist, oder dieses wegzuabstrahieren, war Tooling hier kein Belang. Dennoch soll dieser Abschnitt Werkzeuge sammeln, die dabei helfen, optionales Markup auszulassen.

HTMLMinifier kann all die beschriebenen Auslassungen handhaben, und mit der Konfiguration, die ich bei sum.cumo eingeführt und in HTML-Optimierung: Eine Standardkonfiguration für HTMLMinifier beschrieben habe, gibt es dazu ein robustes Regelwerk für die Produktionsoptimierung von HTML.

Was andere Werkzeuge anbelangt, berichtet Andrey Taritsyn, dass HTML Compressor, NUglify und WebMarkupMin ebenfalls die meisten der genannten Aufgaben ausführen können.

Sind Sie anderer Ansicht oder vermissen Sie etwas, das ebenfalls genannt werden sollte? Bitte senden Sie mir eine Nachricht, so dass ich ergänzen oder nachjustieren kann.

* »Alles« optionale Markup im Sinne von »alles, soweit ich sagen kann und es für diesen Artikel wünsche«. Wenn ich etwas übersehen habe, freue ich mich über eine Mitteilung, um die Dokumentation zusammen mit Ihnen zu verbessern. Danke!

Hierüber tooten?

Über mich

Jens Oliver Meiert, am 30. September 2021.

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Bücher für O’Reilly und Frontend Dogma. Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.

Wenn du eine Frage oder Anregung zu dem hast, was ich schreibe, sende bitte jederzeit eine Nachricht. Danke!