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.
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
Been writing web apps for years and this line:
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Has always confused me. What is it for exactly? What are the implications if I remove it?
I understand the w3c conventions about nested elements etc but what actually happens why is the declaration there do browsers fail or something if I take it out?
Cheers,
Pete
It kicks the browser into standards mode, which makes the browser properly render elements. Not every doctype kicks the browser into standards mode, see this chart. If a valid doctype is not used to kick the browser into standards mode, the browser will basically try to render your page according to "standards" ( or lack thereof ) in 2002-2003 when everyone used crappy table layouts. You do not want quirks mode.
Conclusion: always use a doctype.
It iforms the browser of what elements will be used, and affects the rendering of the page. (Mostly IE)
In many cases, elements will not always display correctly if a DOCTYPE is left out.
In HTML 2.0, 3.2, 4.x and XHTML 1.x:
In theory:
It allows the user agent to decode entities (e.g. … to …)
It allows a validator to determine which tags, attributes and attribute values are allowed where
In practice:
It allows a validator to determine which tags, attributes and attribute values are allowed where
It allows browsers to make a guess as to if the author has a clue about what they are doing and switch between standards mode and quirks mode
In HTML 5:
It is a mystic string used to start a document so that standards mode is triggered
The doctype declaration tells the browser how it should interpret the HTML contents that follow. There's a good overview of how and why in the introduction to Mark Pilgrim's book Dive Into HTML 5
When XHTML Strict is considered to be a proper markup that works across all platforms, my webpage that's in XHTML 1.0 Strict does render differently in Quirks mode.
http://www.myfurni.com
Am I doing something wrong? The page perfectly validates in W3C!
EDITED FOR THOSE WHO REFER TO THIS QUESTION AFTER THE LINKED PAGE HAS CHANGED:
The original markup contained nested DIVs with floated elements. I did not specify 'width' property for all possible elements and that somehow triggered a difference in rendering in old browsers including IE 7.0.
Not sure exactly what your question is but quirks mode is intended for legacy web pages and usually user agents support oldschool layout techniques that were used in tabular layouts. Modern standards based web pages which are in standards mode do not rely on those.
A modern layout might not look correct in quirks mode just simply because it isn't built for it. Or did I misunderstand the question?
Oh and even if your page is perfectly valid that doesn't mean your layout is "perfect" or that it will be rendered by all browsers the same exact way.
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.