Att använda rätt Doctype

Du har gjort allt rätt grejer, men din webbplats inte ser eller arbeta som det ska i de senaste webbläsarna.

Du har skrivit giltig (X)HTML och CSS. Du har använt W3C standard Document Object Model (DOM) för att utforma alla dynamiska element på sidan. Men i webbläsare som syftar till att stödja just dessa standarder, ser webbplatsen fortfarande inte bra ut. En felaktig utformad DOCTYPE är då sannolikt det du bör skylla på.

Den här artikel kommer att förse dig med rätt DOCTYPE som fungerar samt förklara den verkliga effekten av dessa till synes abstrakta taggar.

Varför använda DOCTYPE?

Enligt HTML och XHTML-standarder, har en DOCTYPE (Document Type Declaration) till uppgift att informera validatorn om vilken version av (X)HTML du använder. Därför måste den alltid vara placerad högst upp på varje webbsida. DOCTYPE:s är en nyckelkomponent i att urforma kompatibla webbsidor: din HTML och CSS kommer inte att validera utan dem.

DOCTYPE:s är också högst avgörande för en korrekt rendering i kompatibla webbläsare som Firefox, IE5/Mac och IE6/Win. En aktuell DOCTYPE som innehåller en fullständig URI (en fullständig webbadress) som berättar för webbläsare att rendera din sida i standardkompatibel läge och behandlar din (X)HTML, CSS och DOM som man förväntar sig.

Använder du en ofullständig eller inaktuell DOCTYPE, eller till och med ingen alls slår webbläsarna på “Quirks mode“, där webbläsaren förutsätter att du har skrivit gammaldags vilket kan leda till många felaktigheter. I “Quirks mode” försöker webbläsaren att tolka din sida på ett bakåt-kompatibelt sätt, den gör om din CSS för att matcha det utseendet koden skulle ha i IE4.

Uppenbarligen är detta inte vad du vill ska hända med det är ofta vad du får, på grund av oriktiga eller ofullständig DOCTYPE-information. Den här artikeln hjälper dig att använda rätt DOCTYPE för din sida.

(Obs! Webbläsaren Opera har inte något som heter “Quirks mode” utan försöker alltid att rendera sidorna i ett standardkompatibelt läge.)

Hur hittar jag rätt DOCTYPE?

Sedan DOCTYPE:s blev en avgörande komponent för en väl fungerande webbstandard, och sedan W3C blev ett ledande organisation för webbstandarder, kan man förvänta sig att W3C:s webbplats skulle ha en lista med ordentliga DOCTYPE:s. Men inte, att hitta den informationen på en enda plats vore ett stort steg för DOCTYPE-standarden. Men med uppmaning, delvis från den här artikeln listar nu W3C alla standardiserade DOCTPYE:s på deras deras webbplats.

Många tar idag DOCTYPE:s från W3C:s webbplats och många har försvunna URI:er, DOCTYPE:s med en relativ URI som pekar på handlingar på W3C:s egen webbplats. När dessa flyttas från W3.org slutar dessa att fungera och pekar ofta på icke existerande dokument på ditt eget webbutrymme

Till exempel använder många webbplatser denna DOCTYPE, som kopieras och klistras in direkt från w3.org:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

Om du tar en titt på den sista delen ( “DTD/xhtml1-strict.dtd”) kommer du att se att det är en relativ länk till ett dokument på W3C:s webbplats. Eftersom detta dokument finns på W3C:s webbplats men inte din, är denna URI helt meningslös för webbläsaren.

Den DOCTYPE du egentligen vill använda är:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Observera att dessa innehåller en komplett URI i slutet av taggen. Då taggen förser webbläsaren med en giltig plats på webben vet den var dokumentet finns och kommer att rendera sidan i det standard kompatibla läget.

Använd en DOCTYPE som fungerar

Så vilken DOCTYPE ska vi använda?

Kul att du frågar. Följande DOCTYPE:s är de som vi behöver:

HTML 4.01 Strict, Transitional, Frameset

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD XHTML 1,1 DTD

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ta ditt ansvar kring DOCTYPE-användning

Hur kan du bidra till att förbättra stödet för standarder på webben?

Förutom att bokmärka den här sidan (och kopiera och klistra in dessa DOCTYPE:s för eget bruk), kan du själv kontrollera så att dina sidor använder någon av de DOCTYPE:s som återfinns ovan.

Många programutvecklare har i många fall bara kopierat och klistrat in ofullständiga DOCTYPE:s från W3C för användning med deras programvara. Det resulterar i att när du använder dessa program, som har en inbyggd funktion för att infoga DOCTYPE:s, på dina sidor, tvingar du webbläsaren att gå in i “Quirks mode”.

Det är värt att kontakta de som gör ditt favoritprogram och visa dem vilken DOCTYPE som är den rätta. (I vissa fall kan du på egen hand också ändra de förvalda inställningarna i din texteditor.)

Lycka till med användningen av rätt DOCTYPE!

Detta är en översättning av “Fix Your Site With the Right DOCTYPE!”, skriven av Jeffrey Zeldman.

Läs mer