HTML schreiben, auf die HTML-Art (nicht auf die XHTML-Art)

Avatar of Jens Oliver Meiert
Jens Oliver Meiert am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Vielleicht verwenden Sie XHTML nicht (mehr), aber wenn Sie HTML schreiben, sind Sie möglicherweise stärker von XHTML beeinflusst, als Sie denken. Es ist sehr wahrscheinlich, dass Sie HTML auf die XHTML-Art schreiben.

Was ist die XHTML-Art, HTML zu schreiben, und was ist die HTML-Art, HTML zu schreiben? Schauen wir uns das mal an.

HTML, XHTML, HTML

In den 1990er Jahren gab es HTML. In den 2000er Jahren gab es XHTML. Dann, in den 2010er Jahren, wechselten wir zurück zu HTML. Das ist die einfache Geschichte.

Das kann man auch an den groben Daten der Spezifikationen erkennen: HTML „1“ 1992, HTML 2.0 1995, HTML 3.2 1997, HTML 4.01 1999; XHTML 1.0 2000, XHTML 1.1 2001; „HTML5“ 2007.

XHTML wurde populär, als jeder glaubte, XML und XML-Derivate seien die Zukunft. „XML all the things.“ Für HTML hatte dies tiefgreifende Auswirkungen: Die Auswirkung, dass wir lernten, es auf die XHTML-Art zu schreiben.

Die XHTML-Art, HTML zu schreiben

Die XHTML-Art ist gut dokumentiert, da XHTML 1.0 in seinem Abschnitt über „Unterschiede zu HTML 4“ detailliert beschrieben wird.

  • Dokumente müssen wohlgeformt sein.
  • Element- und Attributnamen müssen in Kleinbuchstaben geschrieben werden.
  • Bei nicht-leeren Elementen sind End-Tags erforderlich.
  • Attributwerte müssen immer in Anführungszeichen gesetzt werden.
  • Attributminimierung wird nicht unterstützt.
  • Leere Elemente müssen geschlossen werden.
  • Die Handhabung von Leerzeichen in Attributwerten erfolgt gemäß XML.
  • Skript- und Style-Elemente benötigen CDATA-Abschnitte.
  • SGML-Ausschlüsse sind nicht möglich.
  • Die Elemente mit den Attributen id und name, wie z. B. a, applet, form, frame, iframe, img und map, sollten nur id verwenden.
  • Attribute mit vordefinierten Wertebereichen sind case-sensitiv.
  • Hexadezimale Entitätsreferenzen müssen in Kleinbuchstaben angegeben werden.

Klingt das vertraut? Mit Ausnahme der Kennzeichnung von CDATA-Inhalten und der Behandlung von SGML-Ausschlüssen befolgen Sie wahrscheinlich alle diese Regeln. Alle.

Obwohl XHTML tot ist, wurden viele dieser Regeln nie wieder in Frage gestellt. Einige wurden sogar zu „Best Practices“ für HTML erhoben.

Das ist die XHTML-Art, HTML zu schreiben, und ihr bleibender Einfluss auf das Feld.

Die HTML-Art, HTML zu schreiben

Eine Möglichkeit, uns zurückzuführen, ist die Ablehnung der von XHTML auferlegten Regeln. Lassen Sie uns das tatsächlich tun (ohne den SGML-Teil, da HTML nicht mehr auf SGML basiert)

  • Dokumente müssen nicht wohlgeformt sein.
  • Element- und Attributnamen dürfen nicht in Kleinbuchstaben geschrieben werden.
  • Bei nicht-leeren Elementen sind End-Tags nicht immer erforderlich.
  • Attributwerte müssen nicht immer in Anführungszeichen gesetzt werden.
  • Attributminimierung wird unterstützt.
  • Leere Elemente müssen nicht geschlossen werden.
  • Die Handhabung von Leerzeichen in Attributwerten erfolgt nicht gemäß XML.
  • Skript- und Style-Elemente benötigen keine CDATA-Abschnitte.
  • Die Elemente mit den Attributen id und name dürfen nicht nur id verwenden.
  • Attribute mit vordefinierten Wertebereichen sind nicht case-sensitiv.
  • Hexadezimale Entitätsreferenzen dürfen nicht nur in Kleinbuchstaben angegeben werden.

Lassen Sie uns die esoterischen Dinge entfernen; die Dinge, die nicht relevant erscheinen. Dazu gehören XML-Leerzeichenbehandlung, CDATA-Abschnitte, Verdopplung von name-Attributwerten, die Groß-/Kleinschreibung vordefinierter Wertebereiche und hexadezimale Entitätsreferenzen

  • Dokumente müssen nicht wohlgeformt sein.
  • Element- und Attributnamen dürfen nicht in Kleinbuchstaben geschrieben werden.
  • Bei nicht-leeren Elementen sind End-Tags nicht immer erforderlich.
  • Attributwerte müssen nicht immer in Anführungszeichen gesetzt werden.
  • Attributminimierung wird unterstützt.
  • Leere Elemente müssen nicht geschlossen werden.

Wenn man sich von diesen Regeln löst, sieht das viel weniger nach der Arbeit mit XML und mehr nach der Arbeit mit HTML aus. Aber wir sind noch nicht fertig.

„Dokumente müssen nicht wohlgeformt sein“ deutet an, dass es in Ordnung war, wenn HTML-Code ungültig war. Es war in Ordnung, dass XHTML auf Wohlgeformtheit verwies, wegen der strengen Fehlerbehandlung von XML. Aber während HTML-Dokumente auch dann funktionieren, wenn sie schwere Syntax- und Wohlgeformtheitsprobleme enthalten, ist es weder für den Profi – noch für unser Feld – nützlich, diese Widerstandsfähigkeit zu nutzen und auszunutzen. (Ich habe diesen Fall bereits in meinem Artikel „In Critical Defense of Frontend Development.“ dargelegt.)

Die HTML-Art würde daher nicht vorschlagen: „Dokumente müssen nicht wohlgeformt sein.“ Es wäre auch klar, dass nicht nur End-, sondern auch Start-Tags nicht immer erforderlich sind. Wenn man dies umformuliert und neu anordnet, ist dies die Essenz

  • Start- und End-Tags sind nicht immer erforderlich.
  • Leere Elemente müssen nicht geschlossen werden.
  • Element- und Attributnamen können klein oder groß geschrieben werden.
  • Attributwerte müssen nicht immer in Anführungszeichen gesetzt werden.
  • Attributminimierung wird unterstützt.

Beispiele

Wie sieht das in der Praxis aus? Bei Start- und End-Tags beachten Sie, dass viele Tags optional sind. Ein Absatz und eine Liste zum Beispiel werden in XHTML so geschrieben

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
  <li>Praesent augue nisl</li>
  <li>Lobortis nec bibendum ut</li>
  <li>Dictum ac quam</li>
</ul>

In HTML können Sie sie jedoch nur mit diesem Code schreiben (der gültig ist)

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul>
  <li>Praesent augue nisl
  <li>Lobortis nec bibendum ut
  <li>Dictum ac quam
</ul>

Entwickler haben auch gelernt, leere Elemente so zu schreiben

<br />

Das ist etwas, das XHTML in HTML gebracht hat, aber da der Schrägstrich bei leeren Elementen keine Wirkung hat, benötigen Sie nur dies

<br>

In HTML können Sie auch alles in Großbuchstaben schreiben

<A HREF="https://css-tricks.de/">CSS-Tricks</A>

Es sieht so aus, als würden Sie schreien, und das gefällt Ihnen vielleicht nicht, aber es ist in Ordnung, es so zu schreiben.

Wenn Sie diesen Link kondensieren möchten, bietet HTML Ihnen die Möglichkeit, bestimmte Anführungszeichen wegzulassen.

<A HREF=https://css-tricks.de/>CSS-Tricks</A>

Als Faustregel gilt: Wenn der Attributwert kein Leerzeichen oder Gleichheitszeichen enthält, ist es normalerweise in Ordnung, die Anführungszeichen wegzulassen.

Schließlich erlaubt HTML – HTML, nicht XHTML – auch die Minimierung von Attributen. Das heißt, anstatt ein input-Element als erforderlich und schreibgeschützt zu markieren, so

<input type="text" required="required" readonly="readonly">

Sie können die Attribute minimieren

<input type="text" required readonly>

Wenn Sie nicht nur die Tatsache nutzen, dass keine Anführungszeichen benötigt werden, sondern dass text der Standard für das type-Attribut ist (es gibt noch mehr solche unnötigen Attribut-Wert-Kombinationen), erhalten Sie ein Beispiel, das HTML in all seiner minimalen Schönheit zeigt.

<input required readonly>

HTML schreiben, auf die HTML-Art

Das Obige ist keine Darstellung dessen, wo HTML in den 90ern stand. HTML war damals voller <table>-Elemente für das Layout, voller präsentationsbasierendem Code, weitgehend ungültig (wie es heute noch ist), mit stark variierender Unterstützung durch die Browser. Dennoch ist es die *Essenz* dessen, was wir hätten beibehalten wollen, wenn XML und XHTML nicht gekommen wären.

Wenn Sie offen für einen Vorschlag sind, wie eine umfassendere, zeitgemäßere Art, HTML zu schreiben, aussehen könnte, habe ich einen. (HTML ist mein Hauptfokus, daher ergänze ich dies durch Links zu einigen meiner Artikel.)

  1. Syntax und Semantik respektieren.
  2. Nutzen Sie die Optionen, die Ihnen HTML bietet, solange Sie dies konsequent tun.
    • Denken Sie daran, dass Element- und Attributnamen klein- oder großgeschrieben sein können.
  3. Halten Sie die Verwendung von HTML auf das absolute Minimum beschränkt
    • Denken Sie daran, dass präsentationsbasierte und verhaltensbezogene Markups stattdessen von CSS und JavaScript gehandhabt werden sollten.
    • Denken Sie daran, dass Start- und End-Tags nicht immer erforderlich sind.
    • Denken Sie daran, dass leere Elemente nicht geschlossen werden müssen.
    • Denken Sie daran, dass einige Attribute Standardwerte haben, die es erlauben, diese Attribut-Wert-Paare wegzulassen.
    • Denken Sie daran, dass Attributwerte nicht immer in Anführungszeichen gesetzt werden müssen.
    • Denken Sie daran, dass Attributminimierung unterstützt wird.

Es ist kein Zufall, dass dies den drei Grundregeln für HTML ähnelt, dass es mit der Prämisse eines kleineren Payloads, der auch zu schnelleren Websites führt, funktioniert und dass dies der Schule der minimalen Webentwicklung folgt. Nichts davon ist neu – unser Feld könnte es lediglich beschließen, es wiederzuentdecken. Werkzeuge sind ebenfalls verfügbar: html-minifier ist wahrscheinlich das etablierteste und fähigste, alle HTML-Optimierungen zu handhaben.

Sie haben HTML auf die XHTML-Art gelernt. HTML ist nicht XHTML. Entdecken Sie HTML neu und helfen Sie mit, eine neue, moderne Art des Schreibens von HTML zu gestalten – die XML anerkennt, aber nicht unbedingt darauf basiert.