Du kanske inte använder XHTML (längre), men när du skriver HTML kan du bli mer påverkad av XHTML än du tror. Du skriver mycket troligt HTML, XHTML-sättet.

Vad är XHTML-sättet att skriva HTML, och vad är HTML-sättet att skriva HTML? Låt oss ta en titt.

HTML, XHTML, HTML

På 1990-talet fanns HTML. På 2000-talet fanns XHTML. Sedan, på 2010-talet, bytte vi tillbaka till HTML. Det är den enkla historien.

Du kan också se på de grova datumen för specifikationerna: 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 blev populärt när alla trodde att XML och XML-derivat var framtiden. "XML alla saker." För HTML hade detta en djupgående effekt: effekten att vi lärde oss att skriva det på XHTML-sätt.

XHTML-sättet att skriva HTML

XHTML-sättet är väldokumenterat, eftersom XHTML 1.0 beskriver mycket detaljerat i sitt avsnitt om "Skillnader med HTML 4":

• Dokument måste vara väl utformade.
• Element- och attributnamn måste skrivas med små bokstäver.
• För icke-tomma element krävs sluttaggar.
• Attributvärden måste alltid citeras.
• Attributminimering stöds inte.
• Tomma element måste stängas.
• Hantering av blanksteg i attributvärden sker enligt XML.
• Skript- och stilelement behöver CDATA-sektioner.
• SGML-uteslutningar är inte möjliga.
• Elementen med id och name attribut, som a, applet, form, frame, iframe, imgoch map, bör endast användas id.
• Attribut med fördefinierade värdeuppsättningar är skiftlägeskänsliga.
• Entitetsreferenser som hexadecimala värden måste vara i gemener.

Ser detta bekant ut? Med undantag för märkning av CDATA-innehåll, samt hantering av SGML-uteslutningar, följer du förmodligen alla dessa regler. Alla dem.

Även om XHTML är död, har många av dessa regler aldrig ifrågasatts igen. Vissa har till och med blivit upphöjda till "bästa metoder" för HTML.

Det är XHTML-sättet att skriva HTML, och dess varaktiga inverkan på fältet.

HTML-sättet att skriva HTML

Ett sätt att ta oss tillbaka är att förneka reglerna som införts av XHTML. Låt oss faktiskt göra detta (utan SGML-delen, eftersom HTML är inte baserad på SGML längre):

• Dokument kanske inte är väl utformade.
• Element- och attributnamn får inte anges med små bokstäver.
• För icke-tomma element krävs inte alltid sluttaggar.
• Attributvärden kanske inte alltid citeras.
• Attributminimering stöds.
• Tomma element behöver inte stängas.
• Hantering av blanksteg i attributvärden sker inte enligt XML.
• Skript- och stilelement behöver inte CDATA-sektioner.
• Elementen med id och name attribut får inte bara användas id.
• Attribut med fördefinierade värdeuppsättningar är inte skiftlägeskänsliga.
• Entitetsreferenser som hexadecimala värden får inte bara vara i gemener.

Låt oss ta bort de esoteriska sakerna; saker som inte verkar relevanta. Detta inkluderar XML-blankstegshantering, CDATA-sektioner, dubblering av name attributvärden, fallet med fördefinierade värdeuppsättningar och hexadecimala entitetsreferenser:

• Dokument kanske inte är väl utformade.
• Element- och attributnamn får inte skrivas med gemener.
• För icke-tomma element krävs inte alltid sluttaggar.
• Attributvärden kanske inte alltid citeras.
• Attributminimering stöds.
• Tomma element behöver inte stängas.

Bortsett från dessa regler ser det mycket mindre ut som att vi arbetar med XML, och mer som att arbeta med HTML. Men vi är inte klara än.

"Dokument kanske inte är välformade" tyder på att det var bra om HTML-koden var ogiltig. Det var bra för XHTML att peka på välformadhet på grund av XMLs strikta felhantering. Men även om HTML-dokument fungerar även när de innehåller allvarliga syntax- och välformningsproblem, är det varken användbart för proffsen - eller vårt område - att använda och missbruka denna motståndskraft. (Jag har argumenterat för det här fallet tidigare i min artikel, "I Critical Defense of Frontend Development.")

HTML-sättet skulle därför inte föreslå "dokument kanske inte är välformade." Det skulle också vara tydligt att inte bara slut- utan även starttaggar inte alltid krävs. Omformulering och omordning, detta är kärnan:

• Start- och sluttaggar krävs inte alltid.
• Tomma element behöver inte stängas.
• Element- och attributnamn kan vara gemener eller versaler.
• Attributvärden kanske inte alltid citeras.
• Attributminimering stöds.

Exempel

Hur ser det här ut i praktiken? För start- och sluttaggar, var medveten om det många taggar är valfria. Ett stycke och en lista, till exempel, skrivs så här i 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>

I HTML kan du dock skriva dem med endast den här koden (som är giltig):

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

Utvecklare lärde sig också att skriva tomma element, som så:

<br />

Detta är något XHTML förde till HTML, men som snedstrecket har ingen effekt på tomma element, du behöver bara detta:

<br>

I HTML kan du också bara skriva allt med versaler:

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

Det ser ut som att du skriker och du kanske inte gillar det, men det är okej att skriva det så här.

När du vill kondensera den länken erbjuder HTML dig möjligheten att utelämna vissa citat:

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

Som en tumregel, när attributvärdet inte innehåller ett mellanslag eller ett likhetstecken, går det vanligtvis bra att släppa citattecken.

Slutligen tillåter HTML–HTML – inte XHTML–HTML – också att minimera attribut. Det vill säga istället för att markera en input element som krävs och skrivskyddat, så här:

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

Du kan minimera attributen:

<input type="text" required readonly>

Om du inte bara drar nytta av det faktum att offerterna inte behövs, utan det text är standard för type attribut här (det finns fler sådana onödiga kombinationer av attribut och värde), får du ett exempel som visar HTML i all sin minimala skönhet:

<input required readonly>

Skriv HTML, HTML-sättet

Ovanstående är inte en representation av var HTML var på 90-talet. HTML, då, laddades med <table> element för layout, packade med presentationskod, i stort sett ogiltiga (som det är än idag), med väldigt varierande support för användaragenter. Ändå är det huvudsak av vad vi skulle ha velat behålla om XML och XHTML inte hade kommit.

Om du är öppen för ett förslag på hur ett mer omfattande, modernt sätt att skriva HTML skulle kunna se ut, så har jag ett. (HTML är mitt huvudsakliga fokusområde, så jag utökar detta med länkar till några av mina artiklar.)

1. Respektera syntax och semantik.
   • Validera din HTML, och skicka endast giltig HTML.
2. Använd de alternativ som HTML ger dig, så länge du gör det konsekvent.
   • Kom ihåg att element- och attributnamn kan vara gemener eller versaler.
3. Håll användningen av HTML till ett absolut minimum
   • Kom ihåg att presentations- och beteendemarkering ska hanteras av CSS och JavaScript istället.
   • Kom ihåg att start- och sluttaggar är det inte alltid krävs.
   • Kom ihåg att tomma element inte behöver stängas.
   • Kom ihåg att vissa attribut har standardinställningar som tillåter dessa attribut-värdepar ska utelämnas.
   • Kom ihåg att attributvärden kan inte alltid bli citerad.
   • Kom ihåg att attributminimering stöds.

Det är ingen slump att detta liknar de tre grundreglerna för HTML, att det fungerar med utgångspunkten för en mindre nyttolast leder också till snabbare sajter, och att detta följer skolan för minimal webbutveckling. Inget av detta är nytt – vårt område kunde bara besluta sig för att återupptäcka det. Verktyg finns också: html-minifier är förmodligen den mest etablerade och kan hantera alla HTML-optimeringar.

Du har lärt dig HTML på XHTML-sättet. HTML är inte XHTML. Återupptäck HTML och hjälp till att forma ett nytt, modernt sätt att skriva HTML – som erkänner, men inte nödvändigtvis är baserat på XML.

Skriv HTML, HTML Way (Inte XHTML Way) ursprungligen publicerad på CSS-tricks. Du borde få nyhetsbrevet.