Related
What is DOCTYPE and why do I want to use it?
What are the different DOCTYPEs I can use?
What is the difference between standards and quirks mode, and what are some quirks I may run into with differently set DOCTYPEs?
Lastly, what is the proper DOCTYPE that I should be using?
Basically, the DOCTYPE describes the HTML that will be used in your page.
Browsers also use the DOCTYPE to determine how to render a page. Not including a DOCTYPE or including an incorrect one can trigger quirks mode.
The kicker here is, that quirks mode in Internet Explorer is quite different from quirks mode in Firefox (and other browsers); meaning that you'll have a much harder job, trying to ensure your page renders consistently with all browsers if the quirks mode is triggered, than you will if it is rendered in standards mode.
Wikipedia has a more in-depth summary of the differences in rendering when using various DOCTYPEs. XHTML is enabled by certain DOCTYPEs, and there is quite a bit of debate about the use of XHTML which is covered well in XHTML — myths and reality.
There are subtle differences between different "standards compliant" rendering DOCTYPEs, such as the HTML5 DOCTYPE (<!DOCTYPE html>, prior to HTML5, only known as the "skinny doctype" which does not trigger standardized rendering in older browsers) and other DOCTYPEs such as this one for HTML 4.01 transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The DOCTYPE tells the consuming user agent (web browsers, web crawlers, validation tools) what type of document the file is. Using it ensures that the consumer correctly parses the HTML as you intended it.
There are several different DOCTYPES for HTML, XHTML, and Framesets and each of these has two modes Strict and Transitional. Strict says that your markup is using the defined standards exactly. See W3C DTDs page for further details.
Quirksmode is basically the layout method from the browser wars days when the standards were much less respected and defined. Generally a standards mode page, that is valid, will layout more consistently across various browsers, but may lack certain features that you require. One such features is the anchor tag's target attribute. The Quirksmode site is a great resource for these differences.
One final thought is that the new HTML5 standard proposes using a very simple DOCTYPE:
<!DOCTYPE html>
Using this DOCTYPE is a forward compatible way to specify that your pages are in standards mode, and are HTML. This is the method that Google uses, and is reasonably easy to remember. I recommend using this DOCTYPE unless you plan to use XHTML.
A doctype defines which version of HTML/XHTML your document uses. You would want to use a doctype so that when you run your code through validators, the validators know which version of HTML/XHTML to check against. This page provides a good overview:
Don't forget to add a doctype
Common doctypes you can use are listed here:
Recommended list of DTDs
Which doctype you should go with depends on the code you're using, but to get an idea, try running your code through the W3C validator and use the Document Type drop-down menu in the "More Options" menu to try different doctypes out.
W3C Markup Validation Service
In HTML (including XHTML) as used on web pages, DOCTYPE is a string that triggers one of a few browser modes (quirks mode, standards mode, almost standards mode), depending on the exact spelling of the DOCTYPE. You want to use it to select a browser mode that best suits your page.
Formally, in SGML and XML, a DOCTYPE declaration is a reference to a Document Type Definition (DTD), which specifies the formal syntax rules of the markup language. No browser has ever used DTDs for anything or even accessed them. However, they are used by SGML and XML markup validators such as the W3C Markup Validator, except in HTML5 mode. Therefore, the choice of DOCTYPE determines how a validator works if the document is submitted to it. However, the validator mode of operation can also be selected in its user interface. (SGML and XML processors may use DOCTYPEs in different other ways, too, but the question is apparently meant to be limited to the HTML context and to web browsers and closely related software.)
There is no authoritative list of DOCTYPEs. Each HTML specification or draft defines its own DOCTYPE, or DOCTYPEs. The set of DOCTYPEs recognized by browsers when selecting mode varies by browser. In practice, there is no reason to use a DOCTYPE other than <DOCTYPE html> as defined in HTML5, though HTML5 also lists a few “legacy DOCTYPEs”. You can use that DOCTYPE if you want standards mode (recommended for new pages) and use no DOCTYPE if you want quirks mode (which you may need for legacy pages).
“Standards mode” generally means the mode of operation where a browser follows HTML, CSS, DOM and other specifications the best it can. It does not usually mean full conformance. “Quirks mode” is different in different browsers, but generally it means an attempt at imitating the behavior of very old browsers like IE 5. The purpose is to keep old pages working, under the assumption that they may rely on features and bugs in the old browsers. See the description What happens in Quirks Mode? Note that there is a rather different, more limited concept of “quirks mode” in HTML5, which closely resembles the document called Quirks Mode Living Standard.
A typical issue is that element widths are calculated differently in quirks mode and in standards mode. This means that the layout of a page may be more or less changed or even totally messed up, if a page designed to work in quirks mode is viewed in standards mode (or vice versa).
So you should use <!DOCTYPE html> for new pages and keep whatever DOCTYPE (if any) you have been using for old pages.
However, quirks mode means, in some browsers, that many new features of CSS are not supported. This means that if you want to enhance an old page with some CSS3 feature, it may well be necessary to switch to a DOCTYPE that triggers standards mode. In such a case, you need to review and test the page to see whether it will run in standards mode.
A doctype is a document that describes how the contents of a xhtml-like document can look like (like a webpage). Note: this defines only the syntax of said page, the rendering of the page is NOT defined by the DTD!
For example, a doctype could define how the <table>-tag can look like - which attributes it accepts, and which values/valuetypes are accepted for each attribute. Think of it as a lexicon for your current webpage.
Wikipedia has an informative page on the various Doctypes that are in common use. Mind you - there's nothing stopping you from creating your own doctype. The chances are, however, that the browser probably doesn't know how to render your document.
Which DTD to use depends on what you are going to write. XHTML has a whole different DTD than HTML, for example.
Doctypes tell the browser in what language the page is written in, be it HTML or XHTML. For example,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
tell the browser to render the page as HTML4 strict. Older browsers used to render pages incorrectly and therefore newer browsers simulate errors of the older browsers when they find an old doctype.
Today you should use at least HTML4 or better XHTML.
A blog entry about doctypes is Fix Your Site With the Right DOCTYPE! (from A List Apart).
First of all there is no one doctype you should be using, but most designers try to make it work within XHTML 1.0 Strict.
A doctype is nothing more than a declaration of what tags you can use within your html (though the browsers can use more or less than what is defined) You can actually open up the doctype file and start reading (XHTML 1.0 Strict)
If you do not specify a doctype, the browser will try its best to guess but not always hits the correct type.
Quirks mode is just a technique used by browsers to be backwards compatible, a great example of quirks mode is how IE renders boxes
On the web, a doctype does nothing but tell the brower if you want standards, almost standards, or quirks mode.
What changes in quirks mode depends on the browser: Firefox, Opera, Safari, and Chrome implement a limited set of quirks, like removing the space for text descenders in code like <table><tr><td><img></td></tr></table> (solution: td img { vertical-align:bottom; }). IE, on the other hand, reverts to the rendering engine in IE5.5. That means that you won't be able to use any of the new features implemented since 2000.
To trigger standards mode, I suggest using the HTML5 doctype, <doctype html>, as it is the easiest to remember.
What is the difference between having a page doctype or not having one, apart from the fact that the page should have one ?
I am asking that because I use a slider inside this page - with the doctype, the slider has a wrong high (150px), and without it, it has the desired high (with the correct ratio high/width from the iframes which are in the slider).
I have tried with multiple doctypes, with the same result for each of them.
Without a doctype to state what flavour of html you are using, the browser will revert to quirks mode, where it tries to parse your markup as if it were a legacy document from before the year 2000.
Nothing about this is optimal. You have an invalid hypertext document and the browser will render the document as it might have been rendered prior to the adoption of W3C standards at the end of the last century.
In quirks mode, layout emulates nonstandard behavior in Navigator 4
and Internet Explorer 5. This is essential in order to support
websites that were built before the widespread adoption of web
standards.
Source: http://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode
In short, you need a doctype at the start of every hypertext document.
For a Complete List of HTML and xHTML Doctype Declarations, see:
https://www.w3.org/QA/2002/04/valid-dtd-list.html
I'm working on a site that uses the XHTML 1.0 transitional DOCTYPE. Therefore, as far as I understand it, its up to the browser to decide how to treat newer features.
I have a need to wrap a block level element in a link to make the whole thing clickable. However, I know this technically shouldn't be allowed before HTML5. The major browsers seem to handle it fine though.
My questions is: to be guaranteed this will work consistently in all browsers, should I do this with JS rather than wrap the div in an anchor and trust the browser to treat it in the modern way?
Such a choice of a doctype string has nothing to do with support to HTML5 features. Either a browser supports those features, or it does not.
The doctype string affects the mode of the browser, quirks mode vs. standards mode. But the mode mainly affects interpretation of CSS. Although some HTML issues are affected, too, the XHTML 1.0 doctypes when specified literally as per XHTML 1.0 recommendation, trigger standards mode just as the HTML5 doctype does.
Besides, wrapping a block element inside an a element works in quirks mode, too. It is a browser tradition to ignore old HTML rules on what may or may not be included in an a element; HTML5 just makes this a rule.
I've created a form that is dynamically created with JavaScript and is added in another website using the <script> tag.
The doctype used by this other website is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> which uses the quirks mode.
I've built my form by taking this in consideration and everything is working as expected in Chrome, Firefox and IE 10. However, when I test it in IE 9 and earlier, the form is not displayed at all. When I open the developper tools, I can see that IE 10 uses the new quirks mode but IE 9 and earlier uses the IE5 Quirks mode.
I was wondering if the new quirks mode can be used to display this page when using IE 9 and earlier. If this is not possible, I would like to force standard mode but only when using IE 9 or earlier and keep using quirks for every other browser.
I can't use the html5 doctype since their website is built with quirks mode instead of standards and their design is all broken when I use this doctype.
You cannot change the mode once the page is loaded. And you cannot change it programmatically. The only way to force a page into quirks mode is to load it without a valid doctype or with serious bugs in the HTML.
If you have a doctype, but your page is still loading in quirks mode, then it means that you have serious bugs in your HTML. This will give you bigger problems than just being in quirks mode. You should definitely fix those bugs. If you really want to be in quirks mode, drop the doctype, but you should really try not to have HTML code that is so bad it triggers quirks mode even with a doctype!
You can validate your HTML to find those bugs by using the W3C validator.
In terms of switching your page at runtime between IE10's two different quirks modes, the simple answer is that you can't do that.
Sorry about that.
However, to be honest, it's probably for the best. Using quirks mode is be a complete disaster anyway. It doesn't just change the layout mode; it also switches off most of the browser's features (ie pretty much everything invented since 1998).
But now for the good news:
Luckily, switching away from Quirks mode is a lot easier than you think.
The main layout issue (the different box model) can be fixed by adding the following to the top of your CSS:
*{box-sizing:border-box;}
This is the standards-compliant way to set the box model to the quirks-mode style layout. Most of the broken layout problems cause by switching from quirks mode to standards mode can be resolved with this simple CSS style.
There are other quirks, but they're relatively minor and shouldn't be too hard to deal with once you've fixed the main issue. A lot of them are actually not quirks mode issues, but bugs in older IE versions that the original coder may have had to hack his way around. There's no guarantee that these will continue working the same in future versions anyway, even if you do stick to quirks mode, so you would be best off fixing them now anyway.
So, to summarise:
Fix your page so it loads in standards mode. Valid doctype and valid HTML.
Use box-sizing to mitigate the main layout gremlins caused by the switch.
Fix the remaining layout issues manually.
It's really a lot less work than it sounds. Honest.
What is DOCTYPE and why do I want to use it?
What are the different DOCTYPEs I can use?
What is the difference between standards and quirks mode, and what are some quirks I may run into with differently set DOCTYPEs?
Lastly, what is the proper DOCTYPE that I should be using?
Basically, the DOCTYPE describes the HTML that will be used in your page.
Browsers also use the DOCTYPE to determine how to render a page. Not including a DOCTYPE or including an incorrect one can trigger quirks mode.
The kicker here is, that quirks mode in Internet Explorer is quite different from quirks mode in Firefox (and other browsers); meaning that you'll have a much harder job, trying to ensure your page renders consistently with all browsers if the quirks mode is triggered, than you will if it is rendered in standards mode.
Wikipedia has a more in-depth summary of the differences in rendering when using various DOCTYPEs. XHTML is enabled by certain DOCTYPEs, and there is quite a bit of debate about the use of XHTML which is covered well in XHTML — myths and reality.
There are subtle differences between different "standards compliant" rendering DOCTYPEs, such as the HTML5 DOCTYPE (<!DOCTYPE html>, prior to HTML5, only known as the "skinny doctype" which does not trigger standardized rendering in older browsers) and other DOCTYPEs such as this one for HTML 4.01 transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
The DOCTYPE tells the consuming user agent (web browsers, web crawlers, validation tools) what type of document the file is. Using it ensures that the consumer correctly parses the HTML as you intended it.
There are several different DOCTYPES for HTML, XHTML, and Framesets and each of these has two modes Strict and Transitional. Strict says that your markup is using the defined standards exactly. See W3C DTDs page for further details.
Quirksmode is basically the layout method from the browser wars days when the standards were much less respected and defined. Generally a standards mode page, that is valid, will layout more consistently across various browsers, but may lack certain features that you require. One such features is the anchor tag's target attribute. The Quirksmode site is a great resource for these differences.
One final thought is that the new HTML5 standard proposes using a very simple DOCTYPE:
<!DOCTYPE html>
Using this DOCTYPE is a forward compatible way to specify that your pages are in standards mode, and are HTML. This is the method that Google uses, and is reasonably easy to remember. I recommend using this DOCTYPE unless you plan to use XHTML.
A doctype defines which version of HTML/XHTML your document uses. You would want to use a doctype so that when you run your code through validators, the validators know which version of HTML/XHTML to check against. This page provides a good overview:
Don't forget to add a doctype
Common doctypes you can use are listed here:
Recommended list of DTDs
Which doctype you should go with depends on the code you're using, but to get an idea, try running your code through the W3C validator and use the Document Type drop-down menu in the "More Options" menu to try different doctypes out.
W3C Markup Validation Service
In HTML (including XHTML) as used on web pages, DOCTYPE is a string that triggers one of a few browser modes (quirks mode, standards mode, almost standards mode), depending on the exact spelling of the DOCTYPE. You want to use it to select a browser mode that best suits your page.
Formally, in SGML and XML, a DOCTYPE declaration is a reference to a Document Type Definition (DTD), which specifies the formal syntax rules of the markup language. No browser has ever used DTDs for anything or even accessed them. However, they are used by SGML and XML markup validators such as the W3C Markup Validator, except in HTML5 mode. Therefore, the choice of DOCTYPE determines how a validator works if the document is submitted to it. However, the validator mode of operation can also be selected in its user interface. (SGML and XML processors may use DOCTYPEs in different other ways, too, but the question is apparently meant to be limited to the HTML context and to web browsers and closely related software.)
There is no authoritative list of DOCTYPEs. Each HTML specification or draft defines its own DOCTYPE, or DOCTYPEs. The set of DOCTYPEs recognized by browsers when selecting mode varies by browser. In practice, there is no reason to use a DOCTYPE other than <DOCTYPE html> as defined in HTML5, though HTML5 also lists a few “legacy DOCTYPEs”. You can use that DOCTYPE if you want standards mode (recommended for new pages) and use no DOCTYPE if you want quirks mode (which you may need for legacy pages).
“Standards mode” generally means the mode of operation where a browser follows HTML, CSS, DOM and other specifications the best it can. It does not usually mean full conformance. “Quirks mode” is different in different browsers, but generally it means an attempt at imitating the behavior of very old browsers like IE 5. The purpose is to keep old pages working, under the assumption that they may rely on features and bugs in the old browsers. See the description What happens in Quirks Mode? Note that there is a rather different, more limited concept of “quirks mode” in HTML5, which closely resembles the document called Quirks Mode Living Standard.
A typical issue is that element widths are calculated differently in quirks mode and in standards mode. This means that the layout of a page may be more or less changed or even totally messed up, if a page designed to work in quirks mode is viewed in standards mode (or vice versa).
So you should use <!DOCTYPE html> for new pages and keep whatever DOCTYPE (if any) you have been using for old pages.
However, quirks mode means, in some browsers, that many new features of CSS are not supported. This means that if you want to enhance an old page with some CSS3 feature, it may well be necessary to switch to a DOCTYPE that triggers standards mode. In such a case, you need to review and test the page to see whether it will run in standards mode.
A doctype is a document that describes how the contents of a xhtml-like document can look like (like a webpage). Note: this defines only the syntax of said page, the rendering of the page is NOT defined by the DTD!
For example, a doctype could define how the <table>-tag can look like - which attributes it accepts, and which values/valuetypes are accepted for each attribute. Think of it as a lexicon for your current webpage.
Wikipedia has an informative page on the various Doctypes that are in common use. Mind you - there's nothing stopping you from creating your own doctype. The chances are, however, that the browser probably doesn't know how to render your document.
Which DTD to use depends on what you are going to write. XHTML has a whole different DTD than HTML, for example.
Doctypes tell the browser in what language the page is written in, be it HTML or XHTML. For example,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
tell the browser to render the page as HTML4 strict. Older browsers used to render pages incorrectly and therefore newer browsers simulate errors of the older browsers when they find an old doctype.
Today you should use at least HTML4 or better XHTML.
A blog entry about doctypes is Fix Your Site With the Right DOCTYPE! (from A List Apart).
First of all there is no one doctype you should be using, but most designers try to make it work within XHTML 1.0 Strict.
A doctype is nothing more than a declaration of what tags you can use within your html (though the browsers can use more or less than what is defined) You can actually open up the doctype file and start reading (XHTML 1.0 Strict)
If you do not specify a doctype, the browser will try its best to guess but not always hits the correct type.
Quirks mode is just a technique used by browsers to be backwards compatible, a great example of quirks mode is how IE renders boxes
On the web, a doctype does nothing but tell the brower if you want standards, almost standards, or quirks mode.
What changes in quirks mode depends on the browser: Firefox, Opera, Safari, and Chrome implement a limited set of quirks, like removing the space for text descenders in code like <table><tr><td><img></td></tr></table> (solution: td img { vertical-align:bottom; }). IE, on the other hand, reverts to the rendering engine in IE5.5. That means that you won't be able to use any of the new features implemented since 2000.
To trigger standards mode, I suggest using the HTML5 doctype, <doctype html>, as it is the easiest to remember.