Short question: Can I change the DOCTYPE of my existing XHTML 1.0 website to HTML5? Will this cause any problems?
Long story:
We've got a website written in ASP.NET webforms. Since it's pretty old, the default DOCTYPE is set to XHTML (default for Visual Studio) and all the controls render XHTML as well. Not extremely valid, but we've had no problems under any browsers so far.
That is, until recently we noticed some odd behavior on different machines under IE. Turns out that IE by default renders intranet websites in "compatibility mode", which breaks things down.
Now, I've got two choices. I can either add:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
Or I can add
<!DOCTYPE html>
I'd prefer the DOCTYPE route, since it would open the doors for a lot of neat HTML5 features. However I wonder if it won't have incompatibility problems with our existing XHTML layout.
First up, IE does indeed render intranet sites in compatibility mode by default. However, it is a config setting and can be switched off: if possible, I'd suggest that your first solution would simply be to switch off this setting on all the machines on your network. (whether this is a viable solution will depend on the size of your network, your group policies, and what other intranet sites would be affected)
Now to answer your question.
The HTML5 doctype can be specified on any site that you want to render in standards mode. If you're already using XHTML, the only effect for you will be that the browser will no longer rigidly enforce strict XHTML compliance. You are perfectly entitled to continue using XHTML code, but it won't be enforced.
The HTML5 doctype was specifically chosen because it works with existing browsers, including older versions of IE. You should be able to put it onto any page, and it should just work.
What it won't do is have any effect at all on IE going into compatibility mode. Nor will any other doctype. The X-UA-Compatible solution you mentioned is the solution to this (unless you can set the config setting I mentioned earlier), and is un-related to the doctype - you'll still need it even if you use the HTML5 doctype.
As far as I know, HTML5 is pretty much xhtml plus the extras so yeah, I think you can change the doctype and it would still work. They answered it here: If I use HTML 5's doctype, what will happen?
HTML5 was designed to be backwards compatible with both HTML 4.01 and XHTML 1.0/1.1, so that previous (X)HTML pages could be migrated to HTML5 easier. Of course, they wouldn't be taking advantage of new HTML5 features (such as new tags), but they would still be technically valid HTML5.
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.
We have some contractors working on a mobile project and they kept insisting that we had to use the HTML5 doctype to use any HTML5 features, like the doctype was a great big boolean switch. I had to keep telling them that doctype really didn't matter that much. You could use HTML5 input types and touch events on an application/xhtml+xml page with a XHTML 1.1 Strict doctype, and the browser could care less. Likewise, you could use the <center> tag with the HTML5 doctype and the text will be centered.
Obviously there are caveats about lower versions of IE going into quirks mode, but that's not an issue in our scope. I personally didn't care what doctype they used but was bothered by their complete lack of understanding on this. At least, until I saw the jQuery Mobile page setup documentation:
A jQuery Mobile site must start with an HTML5 'doctype' to take full
advantage of all of the framework's features. (Older devices with
browsers that don't understand HTML5 will safely ignore the 'doctype'
and various custom attributes.)
Are there any features of HTML5 that require the new doctype? This documentation is just wrong, right?
Browsers do not do anything magic with the <!DOCTYPE html> beyond putting the page into standards mode, and so it is equivalent to any other doctype that does the same thing.
However, it is a testable object in JavaScript, so it is conceivable that a piece of JS could do something stupid like switch its behaviour depending on the presence or not of a given doctype. Without going through the code line by line it's impossible to know whether the statement in the jQuery Mobile page setup documentation is specifically true, or just general advice that if followed will result in the desired outcome.
As far as the common Web browsers running on desktops and laptops are concerned: The browser doesn't care very much about the doctype - it will use new features even if your doctype says they aren't allowed. The doctype is really for the validator; your page won't validate unless the features you're using are allowed by the doctype you're using.
I can't actually speak for mobile devices, since I have next to no experience with them, but it seems like they would work similarly, since they're using the same browser rendering engines and attempting to access the same Internet.
Which one is better and why for a new project? I'm assuming all will be strict, as I see no reason to go transitional for a new project.
HTML 4.01 vs. XHTML 1.0
The problem with both of these is that they have been effectively rendered obsolete by HTML5.
In fact, you're really asking the wrong question. HTML4, XHTML and HTML5 are basically the same language, but with certain features missing from one to the other.
The really important thing (and probably the reason why you may feel like you have to choose) is that it is important to specify a doctype, in order to prevent older browsers dropping into quirks mode. At the point where you find you have to specify a doctype, you also find yourself presented with a choice of which one to use, and the syntax makes it look like you have to get it absolutely perfect or it'll all stop working.
But you don't need to worry about that. The following doctype is sufficient to make all current browsers (including IE6) run in standards mode:
<!DOCTYPE html>
Simple, eh? No need to worry about HTML4 vs XHTML at all.
The thing is, the above doctype also happens to be the doctype for HTML5. It was chosen deliberately because it works in existing browsers.
If you need to support older browsers, you don't have to use HTML5's flashy new features, but using this doctype means that you will be ready to use them when the time comes. And if you do feel like dipping your toe in the water, a lot of the new features will degrade gracefully in older browsers, so you can use them; they may not work in IE6, but they won't break the browser either.
I hope that helps.
If you are using an XML toolchain, and it can handle HTML compatibility (which is needed for IE 6-8) then you might consider going with XHTML, otherwise go with HTML.
If any of the features added in HTML 5 are going to be useful to you, and browser support for those features is mature enough then go with (X)HTML 5, otherwise go with HTML 4.01 / XHTML 1.0 as they have more mature QA tools.
If it's for a new project, start reading up on HTML5. It has the best of both, without the tag soup and doctype madness of XHTML.
XHTML (or HTML 5, for that matter).
We're talking about +10 years in web evolution. If you're the web developer or designer, go Strict and validate your code - it will assure that your site (given valid CSS) will display correctly in most operating systems and web browsers. It will be easier to maintain. It will make you a better webdev because you'll know and understand semantics. It will be easier to migrate to HTML 5 in the future too.
I have recently been learning about doctypes, and was I wondering what the differences between <!DOCTYPE html> and some of the others were.
I know <!DOCTYPE html> is the HTML5 doctype and it is experimental, but I was wondering what would happen if I used it instead of the other doctypes?
Thanks in advance!!!!
Basically what will happen is that you'll get your page rendered in a "standards mode".
The only reason why you probably shouldn't use the new DOCTYPE is if you want to use XHTML 1.0 markup and conform to XHTML 1.0.
The downside to using HTML5 now is that the spec can change. This makes it important for you to keep up with the spec as it actively changes.
With that being said, I've already started using the new syntax in my pages. Also it guarantees that your page will last for a very, very, long time.
So go ahead, use it (and learn to love how simple it is).
The HTML5 doctype isn’t experimental. Ian Hickson tested a bunch of browsers, and found that <!DOCTYPE html> worked the same in them as the HTML 4 and XHTML 1 doctypes (i.e. it triggered standards mode).
However, if you use it, then validators will (by default) validate your page as if it’s HTML5, which may not be what you want if you’re actually writing HTML 4. (For example, some elements are getting dropped in HTML5. Using them would show up as an error if you validated your page as HTML5.)
Lucas nailed the most important aspect. Let me explain this in a slightly different way:
In the browser the doctype serves exactly one purpose, to set the rendering mode: Quirks, almost standards and full standards mode. This used to be simple until MSIE 8 introduced a second switch, "compatibility mode" = MSIE7 bugs and limitations are preserved on purpose.
An HTML5 doctype will (usually) override that setting, and is thus somewhat more powerful than XHTML 1.x or HTML 4.01 doctypes. (MSIE may override it sometimes, though.)
The definitive guide to doctype switching and layout mode is at: http://hsivonen.iki.fi/doctype/
The second thing that will happen is that you get your pages validated according to the HTML5 rules. Some elements and attributes that were allowed in HTML 4 are gone and a bunch of new ones have come.
Edit: Removing example. Mixing what used to be known as inline and block elements is now OK. (In the original proposal it was not.)
The semantics and syntax for HTML5 is mostly like the one in HTML 4, so most well written HTML 4 sites will continue to validate. The main difference is that you mat start to use the new stuff and still be valid.
There's nothing illegal about
<div>
<p>foo</p>
<span>bar</span>
</div>
(The terms 'block level' and 'inline' elements are obsolete in HTML5.)
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.