Een doctype behoort tot de basis van een webpagina. Hoewel een doctype essentieel is voor een voorspelbare weergave van je webpagina, wordt deze door veel mensen niet of verkeerd gebruikt. Wat is een doctype en wat moet je ermee?
Inhoud
Wat is een doctype?
Een doctype is over het algemeen de eerste regel in een HTML-pagina (boven het html-element) die aangeeft welke (X)HTML-versie er wordt gebruikt en op welke manier de browser zou moeten omgaan met regels voor layoutweergave. Een voorbeeld van een doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Er zijn veel verouderde boeken en tutorials in de omloop die deze basis van een HTML-pagina niet behandelen. Tot een aantal jaren geleden kon men daar nog mee wegkomen, maar tegenwoordig hangt de weergave van je pagina af van het doctype dat erboven staat. Wanneer je een bron tegenkomt die het niet over doctype heeft, leg deze bron dan terzijde; die is verouderd.
Wat voor verschil maakt een doctype?
Browsers hebben grofweg twee manieren om een pagina weer te geven, namelijk quirksmode en standardsmode. Het hangt van het (ontbreken van een) doctype bovenaan het document af in welke modus een browser de webpagina weergeeft. Daarnaast is ook van invloed of er code boven het doctype staat (ook de XML prolog kan problemen veroorzaken).
Quirksmode
Zoals de naam al aangeeft, heeft quirksmode nogal wat rare afwijkingen (quirks) in de weergave; elke browser gokt dan namelijk een beetje op basis van eigen aannames hoe een pagina eruit moet komen te zien. En de makers van bijv. Firefox deden andere aannames dan de makers van bijv. Internet Explorer (IE). Resultaat: er kunnen grote verschillen ontstaan in weergave. Toch laat men deze modus er nog inzitten, want veel websites missen een doctype, gebruiken een ongeldig doctype, of hebben code boven het doctype staan. De makers van deze sites rekenen daarmee op de ‘quirks’ van browsers voor een correcte weergave. Afstappen van quirksmode zou voor vele bestaande sites betekenen dat de sitelayout plots uit elkaar valt.
Standardsmode
Naast quirksmode heb je standardsmode. In deze modus volgt de browser zoveel mogelijk de webstandaarden zoals de W3C ze heeft vastgesteld. Door deze uniforme regels is de weergave van een webpagina door de diverse browsers veel beter te voorspellen; er zijn veel minder verschillen in weergave. Aan te raden is dus om te zorgen dat pagina’s in standardsmode worden weergegeven.
Eerst zien, dan geloven?
Om een simpel en veelvoorkomend voorbeeld te geven wat voor het verschil het maakt, heb ik drie pagina’s gemaakt waarop een rechthoek te zien is. De pagina’s verschillen alleen in het gebruikte doctype. Wanneer je deze pagina’s in IE6 of IE7 1 met elkaar vergelijkt, zul je grote verschillen zien.
- Op de eerste pagina zonder
doctypeis de box smal (totale breedte =width); - Op de tweede pagina met onvolledig (Transitional)
doctypeis de box ook smal (totale breedte =width) - Maar op de derde pagina met volledig
doctypeis de box breder, zoals in de W3C-specificaties wordt bedoeld (totale breedte =width+padding+border+margin)
Op de eerste en tweede pagina wordt er gebruik gemaakt van quirksmode, in de derde van standardsmode. In quirksmode maakt IE gebruik van elementafmetingen die werken volgens het door IE (zelfbedachte) boxmodel; in standardsmode maakt IE net als alle andere browsers gebruik van het standaard boxmodel van het W3C.
Conclusie
Duidelijk is dat een doctype erg veel kan uitmaken. Wil je verschillen in weergave tussen diverse browsers vermijden, dan zou je gebruik moeten maken van standardsmode, waarin de browser zo veel mogelijk uitgaat van door W3C vastgelegde regels. Dat betekent dat je een volledig doctype zou moeten gebruiken.
Maar welk volledig doctype moet je dan kiezen? Dat komt aan bod in deel 2 over doctype.
Meer leesvoer
- The box model
- Internet Explorer and the CSS box model
- Activating the right layout mode using the
doctypedeclaration - Rendering mode and
doctypeswitching - Box model mastery
1Waarom zie je geen verschil in IE5.x of lager? Omdat Microsoft het t/m IE5.x niet zo nauw nam op het gebied van webstandaarden.