When a DOCTYPE isn't defined or is mispelled, etc. are the older IEs the only browsers that go into quirks mode?
Or does super old Firefox, Safari, etc. do this as well?
No, browsers generally have a quirks mode. Each browser has its own quirks mode, though they share some of the behavior. There have been attempts to specify what exactly happens in quirks mode (more or less making it defined behavior), but the current situation is a mess: if you do not use a doctype string that triggers “standards mode”, you will get different quirks on different browsers.
See Activating Browser Modes with Doctype and What happens in Quirks Mode?
A short look into Wikipedia answers this...
Related
I know that different doctypes are essentially about how compliant the html is, but what difference does it make what doctype you specify? Do browsers handle the same code differently depending on the doctype?
Thanks
UPDATE - most answers mention quirks mode can be set off if no doctype is specified. But what would be the different between xhtml and html 4.01?
The biggest thing is having a doctype or not. If you don't, the browser will work in a "quirks" mode rather than standards mode and many things will be slightly different. If you have one — any — that typically activates more standards-compliant behavior in the browser.
See this article for the details of what doctypes do on various different browsers and what modes — quirks, standards, almost-standards, etc. — different browsers have. Quoting a relevant section:
Modes for text/html Content
The choice
of the mode for text/html content
depends on doctype sniffing (discussed
later in this document). In IE8 and
IE9, the mode also depends on other
factors. However, by default even in
IE8 and IE9, the mode depends on the
doctype for non-intranet sites that
are not on a blacklist supplied by
Microsoft.
It cannot be stressed
enough that the exact behavior of the
modes varies from browser to browser
even though discussion in this
document has been unified.
Quirks Mode
In the Quirks mode the
browsers violate contemporary Web
format specifications in order to
avoid “breaking” pages authored
according to practices that were
prevalent in the late 1990s. Different
browsers implement different quirks.
In Internet Explorer 6, 7, 8 and 9,
the Quirks mode is effectively frozen
IE 5.5. In other browsers, the Quirks
mode is a handful of deviations from
the Almost Standards mode.
If you are authoring new pages now,
you are supposed to comply with the
relevant specifications (CSS 2.1 in
particular) and use the Standards
mode.
Standards Mode
In the Standards mode
the browsers try to give conforming
documents the specification-wise
correct treatment to the extent
implemented in a particular browser.
Since different browsers are at
different stages of compliance, the
Standards mode isn’t a single target,
either.
HTML 5 calls this mode the “no quirks
mode”.
Almost Standards Mode
Firefox, Safari,
Chrome, Opera (since 7.5), IE8 and IE9
also have a mode known as “the Almost
Standards mode”, which implements the
vertical sizing of table cells
traditionally and not rigorously
according to the CSS2 specification.
Mac IE 5, Windows IE 6 and 7, Opera
prior to 7.5 and Konqueror do not need
an Almost Standards mode, because they
don’t implement the vertical sizing of
table cells rigorously according to
the CSS2 specification in their
respective Standards modes anyway. In
fact, their Standards modes are closer
to the Almost Standards mode than to
the Standards mode of newer browsers.
HTML 5 calls this mode the “limited
quirks mode”.
IE7 Mode
IE8 and IE9 have a mode that
is mostly a frozen copy of the mode
that was the Standards mode in IE7.
Other browsers do not have a mode like
this, and this mode is not specified
by HTML5.
IE8 Standards Mode
IE9 has a mode that
is mostly a frozen copy of the mode
that was the Standards mode in IE8.
Other browsers do not have a mode like
this, and this mode is not specified
by HTML5.
IE8 Almost Standards Mode
IE9 has a
mode that is mostly a frozen copy of
the mode that was the Almost Standards
mode in IE8. Other browsers do not
have a mode like this, and this mode
is not specified by HTML5.
...but see the article for a full discussion.
From Wikipedia:
A Document Type Declaration, or
DOCTYPE, is an instruction that
associates a particular SGML or XML
document (for example, a webpage) with
a Document Type Definition (DTD) (for
example, the formal definition of a
particular version of HTML). In the
serialized form of the document, it
manifests as a short string of markup
that conforms to a particular syntax.
The HTML layout engines in modern web
browsers perform DOCTYPE "sniffing" or
"switching", wherein the DOCTYPE in a
document served as text/html
determines a layout mode, such as
"quirks mode" or "standards mode". The
text/html serialization of HTML5,
which is not SGML-based, uses the
DOCTYPE only for mode selection. Since
web browsers are implemented with
special-purpose HTML parsers, rather
than general-purpose DTD-based
parsers, they don't use DTDs and will
never access them even if a URL is
provided. The DOCTYPE is retained in
HTML5 as a "mostly useless, but
required" header only to trigger
"standards mode" in common browsers.
I decided to quote this text because it answers your question better than I would :). It is important that the absence of a DOCTYPE will trigger "quirks mode" in certain browsers.
It's all about the standards and yes, browsers handles code differently. That means, that all browsers should display the page equally. If no standard is specified, browser will interpret the page as it wants.
The declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
The DOCTYPE declaration is required to be compliant to SGML, the language HTML is an instance of.
The DOCTYPE declaration is used by some browsers to trigger different rendering modes.
Browser Modes
Back in the past, Browsers implemented CSS to their own rules.
Only over the years have Browser now adapted the W3C standards.
To make sure that websites rendered correctly various browsers, web developers had to implement CSS according to the wishes of these browsers. Thus, most websites used CSS in ways that didn’t quite match the specifications.
Therefore, when standards compliancy became important browser vendors faced a tough choice. Moving closer to the W3C specifications was the way to go, but if they’d just change the CSS implementations to match the standards perfectly, many websites would break to a greater or lesser extent. Existing CSS would start to show odd side effects if it were suddenly interpreted in the correct way.
So moving closer to standards compliance would cause problems. On the other hand, not moving closer to standards compliance would perpetuate the general confusion of the Browser Wars Era.
To this end all Browser had to start supporting both modes. Quirks mode for older designs and standard mode for new design.
Paraphrased from here: Quirks mode and strict mode
DocTypes
Choosing which mode to use requires a trigger, and this trigger was found in ’doctype switching’.
According to the standards, any (X)HTML document should have a doctype which tells the world at large which flavour of (X)HTML the document is using.
Taken from here too: Quirks mode and strict mode
Additonal Resources
Document Type Declaration
Quirks Mode on Wikipedia
Quirks mode and strict mode
Internet Explorer box model bug
The CSS box model
The doctype declaration should be the first thing in an HTML document, before the tag.
It isn't an HTML tag; it's an instruction to the web browser about what version of the markup language the page is written in.
It's getting simpler with HTML5: <!DOCTYPE html>
If you don't have that proper doctype, the browser won't know to use HTML5.
Because Doctype is the flag to tell how the browser should handle the page.
For example :
HTML5 need this doctype<!DOCTYPE html>
If you remove this from the page, the any HTML5 capabilities inside your page won't be activated.
You can read more in http://www.w3.org/QA/Tips/Doctype
How do you activate quirks mode only for IE versions below IE8 on a page where the doctype html5 is set? Or, is possible to interpret a piece of code in quirks mode?
It appears to be possible to achieve this by combining any HTML comment (<!-- anything -->) before the doctype (this triggers Quirks mode in IE6—9) and <meta http-equiv="X-UA-Compatible"content="IE=Edge"> (which has precedence over the doctype and triggers Standards mode in IE8—9). So only IE6—7 will have Quirks mode, and IE8+ and all non-IE browsers will switch to Standards mode.
I know that different doctypes are essentially about how compliant the html is, but what difference does it make what doctype you specify? Do browsers handle the same code differently depending on the doctype?
Thanks
UPDATE - most answers mention quirks mode can be set off if no doctype is specified. But what would be the different between xhtml and html 4.01?
The biggest thing is having a doctype or not. If you don't, the browser will work in a "quirks" mode rather than standards mode and many things will be slightly different. If you have one — any — that typically activates more standards-compliant behavior in the browser.
See this article for the details of what doctypes do on various different browsers and what modes — quirks, standards, almost-standards, etc. — different browsers have. Quoting a relevant section:
Modes for text/html Content
The choice
of the mode for text/html content
depends on doctype sniffing (discussed
later in this document). In IE8 and
IE9, the mode also depends on other
factors. However, by default even in
IE8 and IE9, the mode depends on the
doctype for non-intranet sites that
are not on a blacklist supplied by
Microsoft.
It cannot be stressed
enough that the exact behavior of the
modes varies from browser to browser
even though discussion in this
document has been unified.
Quirks Mode
In the Quirks mode the
browsers violate contemporary Web
format specifications in order to
avoid “breaking” pages authored
according to practices that were
prevalent in the late 1990s. Different
browsers implement different quirks.
In Internet Explorer 6, 7, 8 and 9,
the Quirks mode is effectively frozen
IE 5.5. In other browsers, the Quirks
mode is a handful of deviations from
the Almost Standards mode.
If you are authoring new pages now,
you are supposed to comply with the
relevant specifications (CSS 2.1 in
particular) and use the Standards
mode.
Standards Mode
In the Standards mode
the browsers try to give conforming
documents the specification-wise
correct treatment to the extent
implemented in a particular browser.
Since different browsers are at
different stages of compliance, the
Standards mode isn’t a single target,
either.
HTML 5 calls this mode the “no quirks
mode”.
Almost Standards Mode
Firefox, Safari,
Chrome, Opera (since 7.5), IE8 and IE9
also have a mode known as “the Almost
Standards mode”, which implements the
vertical sizing of table cells
traditionally and not rigorously
according to the CSS2 specification.
Mac IE 5, Windows IE 6 and 7, Opera
prior to 7.5 and Konqueror do not need
an Almost Standards mode, because they
don’t implement the vertical sizing of
table cells rigorously according to
the CSS2 specification in their
respective Standards modes anyway. In
fact, their Standards modes are closer
to the Almost Standards mode than to
the Standards mode of newer browsers.
HTML 5 calls this mode the “limited
quirks mode”.
IE7 Mode
IE8 and IE9 have a mode that
is mostly a frozen copy of the mode
that was the Standards mode in IE7.
Other browsers do not have a mode like
this, and this mode is not specified
by HTML5.
IE8 Standards Mode
IE9 has a mode that
is mostly a frozen copy of the mode
that was the Standards mode in IE8.
Other browsers do not have a mode like
this, and this mode is not specified
by HTML5.
IE8 Almost Standards Mode
IE9 has a
mode that is mostly a frozen copy of
the mode that was the Almost Standards
mode in IE8. Other browsers do not
have a mode like this, and this mode
is not specified by HTML5.
...but see the article for a full discussion.
From Wikipedia:
A Document Type Declaration, or
DOCTYPE, is an instruction that
associates a particular SGML or XML
document (for example, a webpage) with
a Document Type Definition (DTD) (for
example, the formal definition of a
particular version of HTML). In the
serialized form of the document, it
manifests as a short string of markup
that conforms to a particular syntax.
The HTML layout engines in modern web
browsers perform DOCTYPE "sniffing" or
"switching", wherein the DOCTYPE in a
document served as text/html
determines a layout mode, such as
"quirks mode" or "standards mode". The
text/html serialization of HTML5,
which is not SGML-based, uses the
DOCTYPE only for mode selection. Since
web browsers are implemented with
special-purpose HTML parsers, rather
than general-purpose DTD-based
parsers, they don't use DTDs and will
never access them even if a URL is
provided. The DOCTYPE is retained in
HTML5 as a "mostly useless, but
required" header only to trigger
"standards mode" in common browsers.
I decided to quote this text because it answers your question better than I would :). It is important that the absence of a DOCTYPE will trigger "quirks mode" in certain browsers.
It's all about the standards and yes, browsers handles code differently. That means, that all browsers should display the page equally. If no standard is specified, browser will interpret the page as it wants.
The declaration is not an XHTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
The DOCTYPE declaration is required to be compliant to SGML, the language HTML is an instance of.
The DOCTYPE declaration is used by some browsers to trigger different rendering modes.
Browser Modes
Back in the past, Browsers implemented CSS to their own rules.
Only over the years have Browser now adapted the W3C standards.
To make sure that websites rendered correctly various browsers, web developers had to implement CSS according to the wishes of these browsers. Thus, most websites used CSS in ways that didn’t quite match the specifications.
Therefore, when standards compliancy became important browser vendors faced a tough choice. Moving closer to the W3C specifications was the way to go, but if they’d just change the CSS implementations to match the standards perfectly, many websites would break to a greater or lesser extent. Existing CSS would start to show odd side effects if it were suddenly interpreted in the correct way.
So moving closer to standards compliance would cause problems. On the other hand, not moving closer to standards compliance would perpetuate the general confusion of the Browser Wars Era.
To this end all Browser had to start supporting both modes. Quirks mode for older designs and standard mode for new design.
Paraphrased from here: Quirks mode and strict mode
DocTypes
Choosing which mode to use requires a trigger, and this trigger was found in ’doctype switching’.
According to the standards, any (X)HTML document should have a doctype which tells the world at large which flavour of (X)HTML the document is using.
Taken from here too: Quirks mode and strict mode
Additonal Resources
Document Type Declaration
Quirks Mode on Wikipedia
Quirks mode and strict mode
Internet Explorer box model bug
The CSS box model
The doctype declaration should be the first thing in an HTML document, before the tag.
It isn't an HTML tag; it's an instruction to the web browser about what version of the markup language the page is written in.
It's getting simpler with HTML5: <!DOCTYPE html>
If you don't have that proper doctype, the browser won't know to use HTML5.
Because Doctype is the flag to tell how the browser should handle the page.
For example :
HTML5 need this doctype<!DOCTYPE html>
If you remove this from the page, the any HTML5 capabilities inside your page won't be activated.
You can read more in http://www.w3.org/QA/Tips/Doctype
I was on vacation without access to my good friend Internet Explorer, and I threw together a pretty complete web app. When I got home, I was surprised and encouraged to see that my site was working in IE... until I threw in any sort of valid doctype. I know it isn't best practice to throw browsers into quirks mode, or it wouldn't be called quirks mode, but I guess my question is... what are the practical ramifications of having a 'quirks mode' site? Is it necessary or even worth it to painstakingly slave away to correct the issues of which I am yet unaware, or can I leave it as is, functioning cross browser? Thanks.
If your site renders wrong in standards mode, but correct in quirks mode, chances are it's errornous. Some current browsers may fix your mistakes even in standard mode, but you have no idea about what future browsers will do with it. With standards mode, you can be absolutely sure that a valid site that looks fine in modern browsers will show up correctly.
Browsers are more interoperable, i.e., have the same behavior as each other, in the no-quirks mode compared to the quirks mode. The no-quirks mode is what most Web standards people and browser developers care about and consider and test. So it's more likely that you run into differences between browsers in quirks mode.
For example, in quirks mode, the body fills the viewport in WebKit/Blink, but does not in Gecko (I'm not sure about Edge). In no-quirks mode, body height works the same in all browsers.
(There's one counter-example, though, where browsers agree in quirks mode but not in no-quirks mode: body being the "viewport scrolling element" for scrollTop etc.)
Some versions of IE (8 and 9?) deliberately had less features in their quirks modes (e.g. the canvas element). So if you care about IE and want to be able to use the features IE actually supports, just not in quirks mode, then that would be another reason to not use quirks mode.
Finally, and maybe obviously, you're likely to run into more "weird" behavior that is the quirks themselves, like color and some other stuff not inheriting into table elements, that top and bottom margins collapse more, IDs and classes being case-insensitive, and so on.
Declaring a proper doctype is technically required for HTML validation by W3; however, lots of people leave their code un-doctyped for browsers to use Quirks mode instead. I've done this many times and it usually works out fine; however, you run the risk of browsers not interpreting your code correctly.
In other words, the cross-browser functionality you speak of could very easily break down into cross-browser hell without valid doctype declarations.
A.k.a., it's up to you as to how robust your site needs to be.
Quirks mode typically is the browsers attempt at fixing your errors in order to render correctly, however it's important to remember that if your site renders in standards compliant mode it will likely render ok with future browsers (at least for the time being).
Does using an HTML 5 Doctype cause Quirks mode in modern browsers, since HTML5 isn't out yet?
(That is Modern Browsers were out before HMTL5 started spreading, so they don't properly support it.)
If yes, does this mean that the HTML 5 Doctype is tentatively like none at all?
EDIT: If not, what does it do in browsers that don't support and the like?
No it doesn't, see this article.
What's nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode - even though they don't implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.
According to Wikipedia table (that I love) HTML 5 DOCTYPE triggers full standard mode for:
FF, Chrome, Opera 7.5+, Safari, Konqeror 3.5+ and also IE8!!!
and triggers Almost standard mode [*] for:
IE6 and IE7
So it's definitely the best DOCTYPE ever created!
"One DOCTYPE to bring them all and in the darkness bind them..." [Lords of the rings]
[*] "Almost standards" does NOT make such a big difference to full standard mode, in the same Wikipedia link above you can find more details.
No it does not.