Doctype

From CSS Standards FAQ

Jump to: navigation, search

A DOCTYPE (short for Document Type Declaration: DTD) for an HyperText document states the version the markup language is written in. It defines the grammar rules for the markup language and can also inform the (X)HTML validator on how to analyze or check for errors and warnings. Declaring a DOCTYPE in a document, insures no ambiguity in part of the user-agent (browser), since it contains important information on its functionality (Strict or Quirks mode) as well as rendering for CSS, and behaviour for JavaScript.

There are various DOCTYPEs for (X)HTML, and which one to use in your document is dependent on the nature of your document. For new documents it is strongly recommended to use a Strict DTD. Since this is not always the case; to cater existing legacy documents, you may need to opt for a Transitional DOCTYPE to bring it up to speed. It is a good practice to declare a DOCTYPE and check for the validity of an (X)HTML document with respect to well-formedness and as well as to minimize unexpected rendering.

A given DOCTYPE is declared at the start of an (X)HTML document (with the exception of an XML prolog in the case of XHTML, though it's recommended that you omit it, since it will trigger quirks mode in IE 6 and the XML prolog is not required).

The following is an HTML 4.01 Strict DOCTYPE declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

and the XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Note on XHTML

If you use the XHTML 1.0 Strict doctype, you should use an XML/XHTML mimetype. Old browsers, including IE 6, can not render XHTML and you will therefore have to do some content-negotiation. For this reason XHTML is considered useless for the time being when it comes to client side work because of the poor client side support. In the future XHTML can be useful if you want to extract content from a document later with XSLT. The validator and browsers supporting XHTML will also alert you about inproper nesting of elements and other unclean markup which makes it easier to avoid design rendering errors when using CSS. If you have javascript enclosed script tags or css enclosed style tags you also got to escape the code with a CDATA block. This can be done as showed under:

<!-- CSS -->
<style type="text/css">
/* <![CDATA[ */
...
/* ]]> */
</style>
<!-- Javascript -->
<script type="text/javascript">
// <![CDATA[
...
// ]]>
</script>

Microsoft's Internet Explorer 7, does not support application/xhtml+xml (the correct MIME type for XHTML).

Note on Strict and Quirks mode

Setting a particular doctype will trigger standards compliant mode in Internet Explorer which will make it render your document according to the standards for HTML and CSS and will get rid of a lot of bugs. Other browsers also has a strict and quirks mode, but are more specific on what doctype that triggers strict mode. Doctypes that are sure to trigger strict mode is the doctypes recommended above. For a full table please refer to WebDevout

Further reading

Personal tools