There are many different Document Type Declarations that you can use on web pages, but how do you choose the best one for your web page? This list will detail some of the common
DOCTYPEs and what web pages they generate.
Use the HTML5
HTML5 is the most current standard, and it is the
DOCTYPE you should be using right now. It adds a lot of great new features like sectioning elements, new semantic elements, new form types, new multimedia elements, and a lot of great APIs to extend your web applications. Plus a whole lot more.
If you are using an HTML generator that cannot output the short
DOCTYPE you can use a legacy string to make your
DOCTYPE compatible. This looks like this:
<!DOCTYPE html SYSTEM "about:legacy-compat">
The HTML 4.01 Strict
DOCTYPE Should Be Your Next Choice
If there is some reason you don't want to use the HTML5
DOCTYPE, then you should use the HTML 4.01 Strict
DOCTYPE. It gives better browser compliance and your pages will be more consistent.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
The HTML 4.01 Strict
DOCTYPE removes all the deprecated tags from the specification. Be careful whenever you use strict DTDs to validate your HTML and ensure that it's correct. Strict
DOCTYPEs are great for creating pages that are absolutely correct against the standard, but not all browsers handle the alternatives to tags that are missing.
Use HTML 4.01 Transitional as a Last Resort
Use the HTML 4.01 Transitional
DOCTYPE if there is some reason why you cannot use HTML5 or HTML 4.01 Strict. This
DOCTYPE is very loose and does not provide as much consistency across browsers. That means that pages you build with it are going to be more difficult to maintain and more likely to look different in different browsers.
To ensure standards mode, use this
DOCTYPE if you must use HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
I don't recommend using this
DOCTYPE unless you are maintaining an older page that still uses HTML frames. HTML frames have been removed from the HTML5 specification, except for
IFRAME (and you can use the HTML5
DOCTYPE listed above with iframes).
If you're using frames, you must use this
DOCTYPE or the XHTML Frames
DOCTYPE listed below. Otherwise, your pages won't validate.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
You can use a HTML 3.2
DOCTYPE to indicate that the HTML is HTML 3.2. But this is very basic HTML, and in general the HTML5
DOCTYPE also supports these elements. I recommend using this
DOCTYPE for pages that are being built for very simple cell phones (not smartphones or feature phones).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
There is also a
DOCTYPE for HTML 2.0, but this is hardly used any more. Like the HTML 3.2
DOCTYPE, most of the features of HTML 2.0 are supported in HTML5, so it's better to use that
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Quirks mode is triggered when you either use an HTML 4.01 Transitional
DOCTYPE without a URI, you don't define a
DOCTYPE at all, or you place text, comments, or HTML above the
DOCTYPE (in Internet Explorer).
Because XHTML 1.0 is a re-rendering of HTML 4.01 into XML, it has the same three DOCTYPES: transitional, strict, and frameset. Deciding to use an XHTML
DOCTYPE should be based upon how you'll be working with your pages. XHTML gives you more ability to program pages, but it has a lot more room for error. In order for an XHTML document to validate, all the tags must be closed, attributes quoted, and all tags written in lowercase. If you don't do any one of those things, you should consider staying with one of the HTML
DOCTYPE declarations—specifically HTML5.
Remember too that if your web server delivers XHTML as
text/html or is missing the XML prolog then your XHTML is technically invalid right out of the gate. I recommend that the only time you use an XHTML
DOCTYPE is when your pages are generated by a content management system or other tool that uses XML as the back end development system, or if your pages need to be parsed as XML. Otherwise, you should be using HTML
XHTML is an XML document, so you must include an XML prolog above the
DOCTYPE. And this will cause IE 6 and IE 7 to render the document in quirks mode.
<?xml version="1.0" encoding="UTF-8"?>
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DOCTYPE Declarations—XHTML 1.1 and XHTML 2.0
If you really want to branch out and build web pages that are ahead of the curve, then you may consider using these
XHTML 1.1 takes XHTML 1.0 and modularizes it. This makes it possible to define only the tags you want supported on the page in your DTD. XHTML 1.1 is very similar to XHTML 1.0 Strict, but it avoids many of the presentation features.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 2.0 is a new version of XHTML that is not intended to be backward compatible with XHTML 1.1 or HTML 4.01. Right now it has limited support from web browsers, but if you were going to use it, you could use the DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">