Jens Oliver Meiert

Optionales HTML: Alles, was man wissen muss

Artikel vom 18. Dezember 2019. ISSN 1614-3124, #64.

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, was einfache Minifizierer behandeln, weil es einiges auszulassen gibt und dies gut für uns ist.

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.

<!-- in 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 sehr, wie es unsere Präferenzen tun, dies im Handwerk oder im Tooling anzusiedeln. Aber egal wieviel 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 etwas 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, richtig auszulassen was wirklich 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üllen 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!

Über mich

Jens Oliver Meiert, am 27. September 2019.

Ich bin Jens Oliver Meiert, und ich bin ein Webentwickler und Autor. Ich experimentiere gerne, unter anderem in den Bereichen Philosophie, Kunst und Abenteuer. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.

Wenn Sie eine Anmerkung oder Frage zu dem haben, was ich schreibe, senden Sie jederzeit eine Nachricht.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

Schwerpunkt:

Cover: Das kleine Buch der HTML-/CSS-Frameworks.

Mein vielleicht nützlichstes Buch: Das kleine Buch der HTML-/CSS-Frameworks (2015/2019). Warum? Weil sowohl der Einsatz als auch die Entwicklung von Frameworks bei den Bedürfnissen unserer Projekte anfängt – und nur wir diese Bedürfnisse kennen.

Auf dem Laufenden bleiben? Am einfachsten per Feed oder auf Twitter.

Fehler entdeckt? E-Mail an jens@meiert.com.

Sie sind hier: StartseitePublikationen → Optionales HTML: Alles, was man wissen muss

Stand: 18. Dezember 2019

»Arbeit ist sichtbar gemachte Liebe