Optionales HTML: Alles, was man wissen muss
Artikel vom 18. Dezember 2019. ISSN 1614-3124, #64. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).
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
- Optionale Tags
- Optionale Anführungszeichen
- Attributswert-Defaults
- Anhang I: Risiken
- 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.
- (
</area>
) - (
</base>
) <body>
und</body>
- (
</br>
) </caption>
- (
</col>
) <colgroup>
und</colgroup>
</dd>
</dt>
- (
</embed>
) <head>
und</head>
- (
</hr>
) <html>
und</html>
- (
</img>
) - (
</input>
) </li>
- (
</link>
) - (
</meta>
) </optgroup>
</option>
</p>
- (
</param>
) </rp>
</rt>
- (
</source>
) <tbody>
und</tbody>
</td>
</tfoot>
</th>
</thead>
</tr>
- (
</track>
) - (
</wbr>
)
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
- kein einfaches oder doppeltes Anführungszeichen (offensichtlich, da wir von der Syntax ohne Anführungszeichen sprechen) oder Gravis (»`«),
- kein Gleichheitszeichen (»=«),
- kein Größer-als- (»>«) oder Kleiner-als-Zeichen (»<«),
- kein Und-Zeichen,
- kein Leerzeichen oder Zeilenumbruch,
- kein Nullzeichen (U+0000) und
- kein Dateiende
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.
autocapitalize=default
autocomplete=on
contenteditable=inherit
- (
dir=ltr
) draggable=auto
spellcheck=default
translate=inherit
<area shape=rectangle>
<button type=submit>
<form enctype=application/x-www-form-urlencoded>
<form method=get>
<img decoding=auto>
<input type=text>
<style media=all>
<textarea wrap=soft>
<th scope=auto>
<track kind=subtitles>
❧ 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.
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 Element unterzubringen oder, wenn semantisch angemessen, andere Elemente einzusetzen.
Es gibt keine signifikanten Risiken, sondern 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!
Über mich
Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Webentwickler, Manager und Autor. Ich habe als technischer Leiter und Engineering Manager für ein paar Firmen gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.
Ich experimentiere gerne, nicht nur in der Webentwicklung und im Engineering Management, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Sei jederzeit kritisch, interpretiere wohlwollend und gib Feedback.)
Ähnliche Beiträge
Das könnte dich ebenfalls interessieren:
- Übersicht aller HTML-Elemente
- Webentwicklung: Warum es wichtig ist, dass wir uns das Leben schwermachen
- HTML, XHTML, XML und Steuerzeichen
Freund von optimiertem HTML? Probier Upgrade Your HTML (2019–2024). Gutes HTML ist nicht einfach. Minimales HTML wird unterschätzt. HTML aus dem Alltag kann man oft verbessern. Diese Buchserie macht das. Erhältlich bei Amazon, Apple Books, Kobo, Google Play Books und Leanpub.