{"id":3,"date":"2006-11-15T00:56:11","date_gmt":"2006-11-14T23:56:11","guid":{"rendered":"https:\/\/dev.frontaal.net\/2006\/11\/doctype-wat-moet-ik-ermee\/"},"modified":"2019-08-29T18:33:16","modified_gmt":"2019-08-29T16:33:16","slug":"doctype-wat-moet-ik-ermee","status":"publish","type":"post","link":"https:\/\/dev.frontaal.net\/en\/200611\/doctype-wat-moet-ik-ermee\/","title":{"rendered":"<code>Doctype<\/code>: wat moet ik ermee?"},"content":{"rendered":"<p>Een <code>doctype<\/code> behoort tot de basis van een webpagina. Hoewel een <code>doctype<\/code> 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?<\/p>\n<h3>Inhoud<\/h3>\n<ul>\n<li><a href=\"#doctype\">Wat is een <code>doctype<\/code>?<\/a><\/li>\n<li><a href=\"#verschil\">Wat voor verschil maakt een <code>doctype<\/code>?<\/a>\n<ul>\n<li><a href=\"#quirksmode\">Quirksmode<\/a><\/li>\n<li><a href=\"#standardsmode\">Standardsmode<\/a><\/li>\n<li><a href=\"#zien\">Eerst zien, dan geloven?<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#conclusie\">Conclusie<\/a><\/li>\n<li><a href=\"#leesvoer\">Meer leesvoer<\/a><\/li>\n<\/ul>\n<h3 id=\"doctype\">Wat is een <code>doctype<\/code>?<\/h3>\n<p>Een <code>doctype<\/code> is over het algemeen de eerste regel in een <abbr title=\"HyperText Markup Language\">HTML<\/abbr>-pagina (boven het <code>html<\/code>-element) die aangeeft welke (X)<abbr title=\"HyperText Markup Language\">HTML<\/abbr>-versie er wordt gebruikt en op welke manier de browser zou moeten omgaan met regels voor layoutweergave. Een voorbeeld van een <code>doctype<\/code> is:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html PUBLIC \"-\/\/<abbr title=\"World Wide Web Consortium\">W3C<\/abbr>\/\/<abbr title=\"Document Type Definition\">DTD<\/abbr> <abbr title=\"HyperText Markup Language\">HTML<\/abbr> 4.01\/\/EN\" \"http:\/\/www.w3.org\/TR\/html4\/strict.dtd\"&gt;<\/pre>\n<p>Er zijn veel verouderde boeken en tutorials in de omloop die deze basis van een <abbr title=\"HyperText Markup Language\">HTML<\/abbr>-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 <code>doctype<\/code> dat erboven staat. Wanneer je een bron tegenkomt die het niet over <code>doctype<\/code> heeft, leg deze bron dan terzijde; die is verouderd.<\/p>\n<h3 id=\"verschil\">Wat voor verschil maakt een <code>doctype<\/code>?<\/h3>\n<p>Browsers hebben grofweg twee manieren om een pagina weer te geven, namelijk quirksmode en standardsmode. Het hangt <!--more--> van het (ontbreken van een) <code>doctype<\/code> bovenaan het document af in welke modus een browser de webpagina weergeeft. Daarnaast is ook van invloed of er code boven het <code>doctype<\/code> staat (ook de <a href=\"http:\/\/www.webstandards.org\/learn\/articles\/prolog_problems\/\" rel=\"external\"><abbr title=\"eXtensible Markup Language\">XML<\/abbr> prolog kan problemen veroorzaken<\/a>).<\/p>\n<h4 id=\"quirksmode\">Quirksmode<\/h4>\n<p>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. <a href=\"http:\/\/www.mozilla-europe.org\/nl\/\" rel=\"external\">Firefox<\/a> deden andere aannames dan de makers van bijv. Internet Explorer (<abbr title=\"Internet Explorer\">IE<\/abbr>). Resultaat: er kunnen grote verschillen ontstaan in weergave. Toch laat men deze modus er nog inzitten, want veel websites missen een <code>doctype<\/code>, gebruiken een ongeldig <code>doctype<\/code>, of hebben code boven het <code>doctype<\/code> staan. De makers van deze sites rekenen daarmee op de \u00e2\u20ac\u02dcquirks\u00e2\u20ac\u2122 van browsers voor een correcte weergave. Afstappen van quirksmode zou voor vele bestaande sites betekenen dat de sitelayout plots uit elkaar valt.<\/p>\n<h4 id=\"standardsmode\">Standardsmode<\/h4>\n<p>Naast quirksmode heb je standardsmode. In deze modus volgt de browser zoveel mogelijk de webstandaarden zoals de <abbr title=\"World Wide Web Consortium\">W3C<\/abbr> 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\u00e2\u20ac\u2122s in standardsmode worden weergegeven.<\/p>\n<h4 id=\"zien\">Eerst zien, dan geloven?<\/h4>\n<p>Om een simpel en veelvoorkomend voorbeeld te geven wat voor het verschil het maakt, heb ik drie pagina\u00e2\u20ac\u2122s gemaakt waarop een rechthoek te zien is. De pagina&#8217;s verschillen alleen in het gebruikte <code>doctype<\/code>. Wanneer je deze pagina\u00e2\u20ac\u2122s in <abbr title=\"Internet Explorer 6\">IE6<\/abbr> of IE7 <a class=\"voetnoot-nummer\" href=\"#voetnoot\">1<\/a> met elkaar vergelijkt, zul je grote verschillen zien.<\/p>\n<ul>\n<li>Op de eerste pagina <a href=\"\/en\/voorbeelden\/doctype\/zonder-doctype\/\">zonder <code>doctype<\/code><\/a> is de box smal (totale breedte = <code>width<\/code>);<\/li>\n<li>Op de tweede pagina met <a href=\"\/en\/voorbeelden\/doctype\/onvolledig-doctype\/\">onvolledig (Transitional) <code>doctype<\/code><\/a> is de box ook smal (totale breedte = <code>width<\/code>)<\/li>\n<li>Maar op de derde pagina met <a href=\"\/en\/voorbeelden\/doctype\/volledig-doctype\/\">volledig <code>doctype<\/code><\/a> is de box breder, zoals in de <a href=\"http:\/\/www.w3.org\/TR\/CSS21\/box.html\" rel=\"external\"><abbr title=\"World Wide Web Consortium\">W3C<\/abbr>-specificaties<\/a> wordt bedoeld (totale breedte = <code>width<\/code> + <code>padding<\/code> + <code>border<\/code> + <code>margin<\/code>)<\/li>\n<\/ul>\n<p>Op de eerste en tweede pagina wordt er gebruik gemaakt van quirksmode, in de derde van standardsmode. In quirksmode maakt <abbr title=\"Internet Explorer\">IE<\/abbr> gebruik van elementafmetingen die werken volgens het door <abbr title=\"Internet Explorer\">IE<\/abbr> (zelfbedachte) boxmodel; in standardsmode maakt <abbr title=\"Internet Explorer\">IE<\/abbr> net als alle andere browsers gebruik van het standaard <a href=\"http:\/\/www.addedbytes.com\/for-beginners\/the-box-model-for-beginners\/\" rel=\"external\">boxmodel<\/a> van het <abbr title=\"World Wide Web Consortium\">W3C<\/abbr>.<\/p>\n<h3 id=\"conclusie\">Conclusie<\/h3>\n<p>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 <abbr title=\"World Wide Web Consortium\">W3C<\/abbr> vastgelegde regels. Dat betekent dat je een volledig <code>doctype<\/code> zou moeten gebruiken.<\/p>\n<p>Maar welk volledig <code>doctype<\/code> moet je dan kiezen? Dat komt aan bod in <a href=\"\/en\/200612\/doctype-welke-moet-ik-kiezen\/\">deel 2 over <code>doctype<\/code><\/a>.<\/p>\n<h3 id=\"leesvoer\">Meer leesvoer<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.addedbytes.com\/for-beginners\/the-box-model-for-beginners\/\" rel=\"external\">The box model<\/a><\/li>\n<li><a href=\"http:\/\/www.456bereastreet.com\/archive\/200612\/internet_explorer_and_the_css_box_model\/\" rel=\"external\">Internet Explorer and the <abbr title=\"Cascading Style Sheets\">CSS<\/abbr> box model<\/a><\/li>\n<li><a href=\"http:\/\/hsivonen.iki.fi\/doctype\/\" rel=\"external\">Activating the right layout mode using the <code>doctype<\/code> declaration<\/a><\/li>\n<li><a href=\"http:\/\/www.communitymx.com\/content\/article.cfm?cid=85FEE\" rel=\"external\">Rendering mode and <code>doctype<\/code> switching<\/a><\/li>\n<li><a href=\"http:\/\/www.informit.com\/guides\/content.asp?g=webdesign&amp;seqNum=263&amp;rl=1\" rel=\"external\">Box model mastery<\/a><\/li>\n<\/ul>\n<p id=\"voetnoot\"><span class=\"voetnoot-nummer\">1<\/span>Waarom zie je geen verschil in <abbr title=\"Internet Explorer 5\">IE5<\/abbr>.x of lager? Omdat Microsoft het t\/m <abbr title=\"Internet Explorer 5\">IE5<\/abbr>.x niet zo nauw nam op het gebied van webstandaarden.<\/p>","protected":false},"excerpt":{"rendered":"<p>Een <code>doctype<\/code> behoort tot de basis van een webpagina. Hoewel een <code>doctype<\/code> 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?<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[34,19,21,20],"class_list":["post-3","post","type-post","status-publish","format-standard","hentry","category-xhtml","tag-xhtml","tag-doctype","tag-html","tag-markup"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Doctype: wat moet ik ermee? | Frontaal.net<\/title>\n<meta name=\"description\" content=\"Een doctype behoort tot de basis van een webpagina. Deze wordt helaas vaak niet of verkeerd gebruikt. Wat is een doctype en wat moet je ermee?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dev.frontaal.net\/en\/200611\/doctype-wat-moet-ik-ermee\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Doctype: wat moet ik ermee? | Frontaal.net\" \/>\n<meta property=\"og:description\" content=\"Een doctype behoort tot de basis van een webpagina. Deze wordt helaas vaak niet of verkeerd gebruikt. Wat is een doctype en wat moet je ermee?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dev.frontaal.net\/en\/200611\/doctype-wat-moet-ik-ermee\/\" \/>\n<meta property=\"og:site_name\" content=\"Frontaal.net\" \/>\n<meta property=\"article:published_time\" content=\"2006-11-14T23:56:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-29T16:33:16+00:00\" \/>\n<meta name=\"author\" content=\"Roger\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roger\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/200611\\\/doctype-wat-moet-ik-ermee\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/200611\\\/doctype-wat-moet-ik-ermee\\\/\"},\"author\":{\"name\":\"Roger\",\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/#\\\/schema\\\/person\\\/e8631cdfacdde87e6de7132844853afe\"},\"headline\":\"Doctype: wat moet ik ermee?\",\"datePublished\":\"2006-11-14T23:56:11+00:00\",\"dateModified\":\"2019-08-29T16:33:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/200611\\\/doctype-wat-moet-ik-ermee\\\/\"},\"wordCount\":664,\"commentCount\":0,\"keywords\":[\"(X)HTML\",\"doctype\",\"html\",\"markup\"],\"articleSection\":[\"(X)HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/dev.frontaal.net\\\/200611\\\/doctype-wat-moet-ik-ermee\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/200611\\\/doctype-wat-moet-ik-ermee\\\/\",\"url\":\"https:\\\/\\\/dev.frontaal.net\\\/200611\\\/doctype-wat-moet-ik-ermee\\\/\",\"name\":\"Doctype: wat moet ik ermee? | Frontaal.net\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/#website\"},\"datePublished\":\"2006-11-14T23:56:11+00:00\",\"dateModified\":\"2019-08-29T16:33:16+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/#\\\/schema\\\/person\\\/e8631cdfacdde87e6de7132844853afe\"},\"description\":\"Een doctype behoort tot de basis van een webpagina. Deze wordt helaas vaak niet of verkeerd gebruikt. Wat is een doctype en wat moet je ermee?\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/dev.frontaal.net\\\/200611\\\/doctype-wat-moet-ik-ermee\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/#website\",\"url\":\"https:\\\/\\\/dev.frontaal.net\\\/\",\"name\":\"Frontaal.net\",\"description\":\"Gedachten over UX research, webanalytics, toegankelijkheid en front-end webdevelopment\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/dev.frontaal.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/#\\\/schema\\\/person\\\/e8631cdfacdde87e6de7132844853afe\",\"name\":\"Roger\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/dev.frontaal.net\\\/wp-content\\\/litespeed\\\/avatar\\\/df9c94ef6fd365a989d62c475f7602c4.jpg?ver=1775969713\",\"url\":\"https:\\\/\\\/dev.frontaal.net\\\/wp-content\\\/litespeed\\\/avatar\\\/df9c94ef6fd365a989d62c475f7602c4.jpg?ver=1775969713\",\"contentUrl\":\"https:\\\/\\\/dev.frontaal.net\\\/wp-content\\\/litespeed\\\/avatar\\\/df9c94ef6fd365a989d62c475f7602c4.jpg?ver=1775969713\",\"caption\":\"Roger\"},\"sameAs\":[\"https:\\\/\\\/dev.frontaal.net\"],\"url\":\"https:\\\/\\\/dev.frontaal.net\\\/en\\\/author\\\/roger\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Doctype: wat moet ik ermee? | Frontaal.net","description":"Een doctype behoort tot de basis van een webpagina. Deze wordt helaas vaak niet of verkeerd gebruikt. Wat is een doctype en wat moet je ermee?","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dev.frontaal.net\/en\/200611\/doctype-wat-moet-ik-ermee\/","og_locale":"en_US","og_type":"article","og_title":"Doctype: wat moet ik ermee? | Frontaal.net","og_description":"Een doctype behoort tot de basis van een webpagina. Deze wordt helaas vaak niet of verkeerd gebruikt. Wat is een doctype en wat moet je ermee?","og_url":"https:\/\/dev.frontaal.net\/en\/200611\/doctype-wat-moet-ik-ermee\/","og_site_name":"Frontaal.net","article_published_time":"2006-11-14T23:56:11+00:00","article_modified_time":"2019-08-29T16:33:16+00:00","author":"Roger","twitter_misc":{"Written by":"Roger","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/dev.frontaal.net\/200611\/doctype-wat-moet-ik-ermee\/#article","isPartOf":{"@id":"https:\/\/dev.frontaal.net\/200611\/doctype-wat-moet-ik-ermee\/"},"author":{"name":"Roger","@id":"https:\/\/dev.frontaal.net\/#\/schema\/person\/e8631cdfacdde87e6de7132844853afe"},"headline":"Doctype: wat moet ik ermee?","datePublished":"2006-11-14T23:56:11+00:00","dateModified":"2019-08-29T16:33:16+00:00","mainEntityOfPage":{"@id":"https:\/\/dev.frontaal.net\/200611\/doctype-wat-moet-ik-ermee\/"},"wordCount":664,"commentCount":0,"keywords":["(X)HTML","doctype","html","markup"],"articleSection":["(X)HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/dev.frontaal.net\/200611\/doctype-wat-moet-ik-ermee\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/dev.frontaal.net\/200611\/doctype-wat-moet-ik-ermee\/","url":"https:\/\/dev.frontaal.net\/200611\/doctype-wat-moet-ik-ermee\/","name":"Doctype: wat moet ik ermee? | Frontaal.net","isPartOf":{"@id":"https:\/\/dev.frontaal.net\/#website"},"datePublished":"2006-11-14T23:56:11+00:00","dateModified":"2019-08-29T16:33:16+00:00","author":{"@id":"https:\/\/dev.frontaal.net\/#\/schema\/person\/e8631cdfacdde87e6de7132844853afe"},"description":"Een doctype behoort tot de basis van een webpagina. Deze wordt helaas vaak niet of verkeerd gebruikt. Wat is een doctype en wat moet je ermee?","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dev.frontaal.net\/200611\/doctype-wat-moet-ik-ermee\/"]}]},{"@type":"WebSite","@id":"https:\/\/dev.frontaal.net\/#website","url":"https:\/\/dev.frontaal.net\/","name":"Frontaal.net","description":"Gedachten over UX research, webanalytics, toegankelijkheid en front-end webdevelopment","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dev.frontaal.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dev.frontaal.net\/#\/schema\/person\/e8631cdfacdde87e6de7132844853afe","name":"Roger","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dev.frontaal.net\/wp-content\/litespeed\/avatar\/df9c94ef6fd365a989d62c475f7602c4.jpg?ver=1775969713","url":"https:\/\/dev.frontaal.net\/wp-content\/litespeed\/avatar\/df9c94ef6fd365a989d62c475f7602c4.jpg?ver=1775969713","contentUrl":"https:\/\/dev.frontaal.net\/wp-content\/litespeed\/avatar\/df9c94ef6fd365a989d62c475f7602c4.jpg?ver=1775969713","caption":"Roger"},"sameAs":["https:\/\/dev.frontaal.net"],"url":"https:\/\/dev.frontaal.net\/en\/author\/roger\/"}]}},"_links":{"self":[{"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/posts\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":6,"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/posts\/3\/revisions"}],"predecessor-version":[{"id":850,"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/posts\/3\/revisions\/850"}],"wp:attachment":[{"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/categories?post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.frontaal.net\/en\/wp-json\/wp\/v2\/tags?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}