HTML är inte XML

HTML är inte XML
april 15, 2014 Fredrik Jansson

I dagarna spenderade jag ett antal timmar på att söka ned varför IE7 (eg. ie8 i ie7 kompabilitetsläge, fråga inte…) renderade en sida märkligt. Sidans ‘footer’ låg märkligt nog i mitten av sidan. Klassiskt symptom på att element inte är stängda som man tänkt. HTML-validatorn bekräftade snabbt att jo, mycket riktigt stängs inte det element som borde avslutats innan footern.

Tyvärr är det sällan så enkelt att någon helt enkelt glömt denna ‘</div’> där felet uppstår, utan följande scenario är mer troligt:

<--- denna blir inte stängd
Hallå <--- men mistaget gjordes här

Exemplet är rätt lätt att se problemet i, men om jag instället givit denna:

Så har vi orsaken till mitt problem. Nu går möjligen din hjärna in och säger ”Vadå problem? Det där är ju lungt, den är ju självstängande precis som i XML” (det gjorde i alla fall min när jag ögnade genom efter fel). Men självstängande element är inte giltiga om de inte är ett så kallat ”void element”. Detta tillkom i.o.m. XHTML och finns kvar i HTML5 för att behålla bakåtkompabilitet. Men ‘<div />’ tolkas alltså av en webbläsare som ‘<div>’ och kan då ge upphov till lika mycket problem som det allra första exemplet.

De flesta webbläsare listar ut detta och kommer inte rendera fel trots denna miss, men för allas trevnad, få aldrig för dig att dra till med en ”<[element som måste ha sluttag] />” i HTML.

XHTML är potentielt ett undantag till detta, men då måste du leverera dokumentet som ”application/xhtml+xml” och inte det vanliga ”text/html”. Men även om just ni har det så, så kan det lika gärna ses som en ovana som kommer ställa till det i långa loppet då XHTML är på väg ut och HTML5 på väg in.

Om det är någon tröst så fångar faktiskt W3Cs validator att du har ett element som du försöker göra självstängande. Dagens läxa är helt enkelt att läsa genom alla valideringsvarningar innan man försöker lösa det som är ett fel.

0 Kommentarer

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*

Denna webbplats använder Akismet för att förhindra skräppost. Läs mer om hur dina kommentarsuppgifter behandlas.