Het artikel hieronder is in 2002 gepubliceerd op A List Apart en is geschreven door Jeffrey Zeldman. Het was in eerste instantie gericht aan Webdesigners die zich willen houden aan W3C-Standards. Nu, bijna 10 jaar verder lijkt foutief gebruik van DOCTYPES nog steeds vaste prik bij ontwerpers. De inhoud is daarmee nog even actueel.
Je kunt de voorbeeld-doctypes in dit artikel vergelijken met de doctypes op je eigen site als daar onverklaarbare afwijkingen in gedrag en weergave zijn. Inzicht in dit onderwerp is sowieso verplichte kost als je foutloos wilt kunnen programmeren.
Je hebt alles goed gedaan; maar in de nieuwste browsers is het uiterlijk en het gedrag van je site anders dan wat je in gedachten had.
Je hebt in valid XHTML en CSS geschreven. Je hebt voor dynamisch elementen het W3C standard Document Object Model (DOM) gebruikt. En toch, in browsers die nu juist zijn ontworpen om deze standaarden te ondersteunen schiet je site tekort. Een verkeerd DOCTYPE zou zomaar de oorzaak kunnen zijn.
Dit korte artikel verschaft je DOCTYPEs die werken en geeft je uitleg over de concrete effecten van deze abstract aandoende tags.
Een DOCTYPE (afkorting voor “document type declaration”) informeert de validator (volgens de standaarden voor HTML en XHTML) welke versie (X)HTML je gebruikt. Je doctype moet helemaal aan het begin van je dokument staan, voor alle andere tags. Doctypes zijn een sleutelonderdeel als je website aan standaarden moet voldoen: zonder deze tag valideert je HTML en CSS niet.
Zoals eerder genoemd in vorige ALA artikelen (en op andere interessante plekken), zijn DOCTYPES ook essentieel voor correcte rendering en het juist functioneren van webdocumenten in compliant browsers zoals Mozilla, IE5/Mac, en IE6/Win. {noot vertaler: dit is een artikel uit 2002}
Een recent DOCTYPE dat een volledige URI bevat (een kompleet webadres) vertelt de browsers om je pagina te renderen in standards–compliant mode, waarmee je (X)HTML, CSS, and DOM worden behandeld zoals je dat verwacht.
Het gebruik van een inkomplete of verouderde DOCTYPE—of helemaal geen DOCTYPE —zet dezelfde browsers in “Quirks” mode, waarin de browser 'aanneemt' dat je ouderwetse, ongeldige markup en code hebt gebruikt zoals dat gebruikelijk was volgens normen van de voorbije jaren 90.
In deze stand, zal de browser proberen om je pagina backwards compatible te parsen, waarin je CSS wordt omgezet zoals het er uit zou kunnen hebben gezien in IE4, en valt je browser terug naar een browser–specifieke DOM. (IE schakelt terug naar de IE DOM; Mozilla en Netscape 6 naar wie weet wat?).
Dit is duidelijk niet het doel maar wel wat je krijgt als je de DOCTYPE fouten maakt die dit artikel probeert recht te zetten.
(Noot: De Opera browser doet in dit spel niet mee, deze probeert namelijk altijd pagina's in standards–compliant mode om te zetten. Leve Opera! aan de andere kant biedt Opera nog niet solide support voor de W3C DOM. Er wordt echter wel aan gewerkt.) {Ed: Na de publicatie van dit artikel heeft Opera de DOM-compliant Opera 7 browser uitgebracht.}
Omdat DOCTYPES van vitaal belang zijn voor het juist functioneren van web standards in browsers- en omdat W3C een leidende maker is van web standards- verwacht je dat de website van W3C een lijst van correcte DOCTYPEs zou hebben. Ook zou je denken dat deze informatie snel en makkelijk op een enkele locatie kan worden gevonden; maar helaas.
{Ed. Aaangespoord door onder meer dit artikel, heeft W3C nu een opsomming van standaard DOCTYPEs op haar site. Je vindt deze lijst een paar kliks diep in de W3C tutorial "My Web site is standard. And yours?".}
W3.org is niet A List Apart, WebReference, of Webmonkey. W3C is niet bedoeld om hulp te bieden aan webdesigners, -ontwikkelaars en contentmakers zodat deze tred kunnen houden met de laatste technologische aanbevelingen en werkwijzen. Dat is niet de rol van W3C.
W3C publiceert wel een serie tutorials, hoewel veel webontwikkelaars daarvan geen weet hebben. Hoofdzakelijk echter, bevat W3C’s site een verzameling voorstellen, concepten en aanbevelingen. Geschreven door geeks voor geeks en als ik geeks zeg, dan bedoel ik niet gewone web-professionals als jij en ik. Eerder geeks die zorgen dat de rest er uitziet als oma die voor het eerst Mail in haar inbox krijgt.™
Je kan de hele dag DOCTYPEs zoeken op W3.org zonder een pagina te vinden die ze allemaal opsomt. Mocht je toch een DOCTYPE vinden (meestal in combinatie met een bepaalde aanbeveling of een werkconcept), dan zal op jouw site die vondst meestal niet werken.
Verspreid over W3C’s site vind je DOCTYPEs zonder URI en DOCTYPEs met relatieve URIs die wijzen naar documenten op de eigen site van W3C. Eenmaal 'weggekopieerd' van W3C en in gebruik op je eigen webpagina's wijzen de URIs naar niet-bestaande documenten waardoor je beste bedoelingen en de browser in de fout gaan.
Bijvoorbeeld, veel websites gebruiken dit DOCTYPE, een directe copy-paste van w3.org:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
als je naar het laatste gedeelte kijkt van DOCTYPE (“DTD/xhtml1-strict.dtd”), zie je dat het een relatieve link is naar een dokument op W3C’s website. Aangezien dat dokument op de website van W3C staat en niet op de jouwe, is de URI onbruikbaar voor de browser.
Het DOCTYPE dat je eigenlijk zou willen gebruiken is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Merk op dat dit laatste DOCTYPE een volledige URI aan het einde van de tag heeft. Omdat de tag een geldige locatie op het web aangeeft weet de browser waar de definitie gevonden kan worden en zal je document in standards compliant mode worden weergegeven.
Dus wat voor DOCTYPEs zouden we dan moeten gebruiken? Fijn dat je het vraagt. Hier is de komplete lijst van DOCTYPEs die we nodig hebben:
<!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">
<!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">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Hoe kun je helpen om support voor webstandaarden te verbeteren? Behalve het bookmarken van deze pagina (en deze DOCTYPEs voor je eigen gebruik te kopieeren): Als je webeditor automatisch DOCTYPEs invoegt dan zou je ze misschien willen controleren door ze te vergelijken met de lijst hierboven.
Veel goedbedoelende software makers hebben inkomplete DOCTYPEs van W3C overgenomen in hun software. Resultaat: als je deze programmas DOCTYPEs laat invoegen in je pagina's dan schieten browsers in Quirks mode en is je harde werk vergeefs.
Het is de moeite waard om de makers van dergelijke programma's te benaderen en ze de juiste DOCTYPEs te laten zien en ze beleefd te vragen om deze kwestie te verbeteren met een upgrade. (In sommige gevallen kun je mogelijk eigenhandig zelf je editor veranderen.)
We hebben alle reden om aan te nemen dat W3C’s site snel een lijst van accurate, bruikbare DOCTYPES en andere essentiele informatie zal neerzetten op een makkelijk te vinden locatie. Sterker nog: Karl Dubost, Conformance Manager van W3C’s Quality Assurance team heeft bijgedragen aan de informatie in dit korte artikel .
Op gelijke wijze zal deze informatie ook worden gegeven zodra The Web Standards Project weer wordt opgestart (binnenkort). {Ed. noot: De Web Standards Project is eind 2002 hervat.}
Omdat websites elke dag worden ontworpen en gebouwd en je deze informatie nu nodig hebt: bij deze dit artikel.
Veel plezier met schrijven en renderen!
Translated with the permission of A List Apart Magazine and the author[s].