U mag XHTML niet (meer) gebruiken, maar wanneer u HTML schrijft, wordt u mogelijk meer beïnvloed door XHTML dan u denkt. U schrijft zeer waarschijnlijk HTML, op de XHTML-manier.

Wat is de XHTML-manier om HTML te schrijven en wat is de HTML-manier om HTML te schrijven? Laten we eens kijken.

HTML, XHTML, HTML

In de jaren negentig was er HTML. In de jaren 1990 was er XHTML. Toen, in de jaren 2000, schakelden we terug naar HTML. Dat is het simpele verhaal.

U kunt het ook zien aan de ruwe data van de specificaties: 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 werd populair toen iedereen geloofde dat XML en XML-derivaten de toekomst waren. "XML alle dingen." Voor HTML had dit een diepgaand effect: het effect dat we leerden om het op de XHTML-manier te schrijven.

De XHTML-manier om HTML te schrijven

De XHTML-manier is goed gedocumenteerd, omdat XHTML 1.0 zeer gedetailleerd beschrijft in zijn sectie over: “Verschillen met HTML 4”:

• Documenten moeten goed gevormd zijn.
• Element- en attribuutnamen moeten in kleine letters zijn.
• Voor niet-lege elementen zijn eindtags vereist.
• Attribuutwaarden moeten altijd worden aangehaald.
• Attribuutminimalisatie wordt niet ondersteund.
• Lege elementen moeten worden gesloten.
• De verwerking van witruimte in attribuutwaarden gebeurt volgens XML.
• Script- en stijlelementen hebben CDATA-secties nodig.
• SGML-uitsluitingen zijn niet mogelijk.
• De elementen met id en name attributen, zoals a, applet, form, frame, iframe, img en map, mag alleen gebruiken id.
• Attributen met vooraf gedefinieerde waardensets zijn hoofdlettergevoelig.
• Entiteitsverwijzingen als hexadecimale waarden moeten in kleine letters zijn.

Komt dit bekend voor? Met uitzondering van het markeren van CDATA-inhoud en het omgaan met SGML-uitsluitingen, volgt u waarschijnlijk al deze regels. Allemaal.

Hoewel XHTML dood is, zijn veel van deze regels nooit meer ter discussie gesteld. Sommige zijn zelfs verheven tot 'best practices' voor HTML.

Dat is de XHTML-manier om HTML te schrijven, en de blijvende impact ervan op het veld.

De HTML-manier om HTML te schrijven

Een manier om ons terug te lopen is door de regels die door XHTML worden opgelegd te negeren. Laten we dit echt doen (zonder het SGML-gedeelte, omdat HTML is niet meer gebaseerd op SGML):

• Documenten zijn mogelijk niet goed gevormd.
• Element- en attribuutnamen mogen niet in kleine letters zijn.
• Voor niet-lege elementen zijn eindtags niet altijd vereist.
• Attribuutwaarden worden mogelijk niet altijd geciteerd.
• Attribuutminimalisatie wordt ondersteund.
• Lege elementen hoeven niet te worden gesloten.
• De verwerking van witruimte in attribuutwaarden gebeurt niet volgens XML.
• Script- en stijlelementen hebben geen CDATA-secties nodig.
• De elementen met id en name attributen mogen niet alleen id.
• Attributen met vooraf gedefinieerde waardensets zijn niet hoofdlettergevoelig.
• Entiteitsverwijzingen als hexadecimale waarden mogen niet alleen in kleine letters zijn.

Laten we de esoterische dingen verwijderen; de dingen die niet relevant lijken. Dit omvat verwerking van XML-spaties, CDATA-secties, verdubbeling van name attribuutwaarden, het geval van vooraf gedefinieerde waardensets en hexadecimale entiteitsreferenties:

• Documenten zijn mogelijk niet goed gevormd.
• Element- en attribuutnamen mogen niet in kleine letters zijn.
• Voor niet-lege elementen zijn eindtags niet altijd vereist.
• Attribuutwaarden worden mogelijk niet altijd geciteerd.
• Attribuutminimalisatie wordt ondersteund.
• Lege elementen hoeven niet te worden gesloten.

Los van deze regels, lijkt dit veel minder op het werken met XML en meer op het werken met HTML. Maar we zijn nog niet klaar.

"Documenten zijn mogelijk niet goed gevormd" suggereert dat het goed was als HTML-code ongeldig was. Het was prima voor XHTML om te verwijzen naar welgevormdheid vanwege de strikte foutafhandeling van XML. Maar hoewel HTML-documenten werken, zelfs als ze ernstige syntaxis- en welgevormdheidsproblemen bevatten, is het niet nuttig voor de professional - noch voor ons vakgebied - om deze veerkracht te gebruiken en te misbruiken. (Ik heb deze zaak eerder in mijn artikel betoogd, "In kritieke verdediging van frontend-ontwikkeling.")

De HTML-manier zou daarom niet suggereren dat "documenten mogelijk niet goed gevormd zijn". Het zou ook duidelijk zijn dat niet alleen eind-, maar ook start-tags niet altijd vereist zijn. Herformuleren en opnieuw ordenen, dit is de essentie:

• Begin- en eindtags zijn niet altijd vereist.
• Lege elementen hoeven niet te worden gesloten.
• Element- en attribuutnamen mogen in kleine letters of in hoofdletters zijn.
• Attribuutwaarden worden mogelijk niet altijd geciteerd.
• Attribuutminimalisatie wordt ondersteund.

Voorbeelden

Hoe ziet dit er in de praktijk uit? Houd er rekening mee dat voor begin- en eindtags: veel tags zijn optioneel. Een alinea en een lijst worden bijvoorbeeld zo geschreven in XHTML:

<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 kunt u ze echter schrijven met alleen deze code (die geldig is):

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

Ontwikkelaars leerden ook om void-elementen te schrijven, zoals:

<br />

Dit is iets dat XHTML naar HTML heeft gebracht, maar als de schuine streep heeft geen effect op ongeldige elementen, je hebt alleen dit nodig:

<br>

In HTML kun je ook gewoon alles in hoofdletters schrijven:

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

Het lijkt alsof je schreeuwt en je vindt het misschien niet leuk, maar het is oké om het zo te schrijven.

Als u die link wilt samenvatten, biedt HTML u de mogelijkheid om: laat bepaalde aanhalingstekens weg:

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

Als vuistregel geldt dat als de attribuutwaarde geen spatie of gelijkteken bevat, het meestal goed is om de aanhalingstekens weg te laten.

Ten slotte maakt HTML–HTML — niet XHTML–HTML — het ook mogelijk om attributen te minimaliseren. Dat wil zeggen, in plaats van een input element zoals vereist en alleen-lezen, zoals dit:

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

U kunt de kenmerken minimaliseren:

<input type="text" required readonly>

Als u niet alleen profiteert van het feit dat de aanhalingstekens niet nodig zijn, maar dat: text is de standaard voor de type attribuut hier (er zijn meer van dergelijke onnodige combinaties van attributen en waarden), krijg je een voorbeeld dat HTML in al zijn minimale schoonheid laat zien:

<input required readonly>

HTML schrijven, op de HTML-manier

Het bovenstaande is geen weergave van waar HTML zich in de jaren '90 bevond. HTML was toen geladen met <table> elementen voor lay-out, vol met presentatiecode, grotendeels ongeldig (zoals het vandaag de dag nog steeds is), met enorm variërende user-agent-ondersteuning. Toch is het de essentie van wat we hadden willen behouden als XML en XHTML er niet waren geweest.

Als je openstaat voor een suggestie van hoe een meer uitgebreide, eigentijdse manier van HTML schrijven eruit zou kunnen zien, ik heb er een. (HTML is mijn belangrijkste aandachtsgebied, dus ik vul dit aan met links naar enkele van mijn artikelen.)

1. Respecteer syntaxis en semantiek.
   • Valideer uw HTML, en verzend alleen geldige HTML.
2. Gebruik de mogelijkheden die HTML je geeft, als je dat maar consequent doet.
   • Onthoud dat namen van elementen en attributen kleine letters of hoofdletters kunnen zijn.
3. Beperk het gebruik van HTML tot het absolute minimum
   • Onthoud dat presentatie- en gedragsmarkeringen in plaats daarvan door CSS en JavaScript moeten worden afgehandeld.
   • Onthoud dat begin- en eindtags zijn niet altijd vereist.
   • Onthoud dat lege elementen niet gesloten hoeven te worden.
   • Onthoud dat sommige attributen standaardwaarden hebben die dit toestaan: deze attribuut-waardeparen moeten worden weggelaten.
   • Onthoud dat attribuutwaarden mogelijk niet altijd geciteerd worden.
   • Onthoud dat kenmerkminimalisatie wordt ondersteund.

Het is geen toeval dat dit lijkt op de drie basisregels voor HTML, dat het werkt met het uitgangspunt van een kleinere payload leidt ook tot snellere sites, en dat dit volgt de school van minimale webontwikkeling. Niets van dit alles is nieuw - ons vakgebied zou alleen kunnen besluiten het te herontdekken. Tooling is ook beschikbaar: html-verkleiner is waarschijnlijk de meest gevestigde en in staat om alle HTML-optimalisaties aan te kunnen.

Je hebt HTML op de XHTML-manier geleerd. HTML is geen XHTML. Herontdek HTML en help mee vorm te geven aan een nieuwe, moderne manier van HTML schrijven - die XML erkent, maar niet noodzakelijkerwijs gebaseerd is op XML.

Schrijf HTML, de HTML-manier (niet de XHTML-manier) oorspronkelijk gepubliceerd op CSS-trucs. Je zou moeten ontvang de nieuwsbrief.