DOCTYPEs

What’s a DOCTYPE?

HTML is an old language that has been revised and extended several times to make it cleaner, more efficient, standardised and feature rich.  Whenever any software evolves, it leaves behind a trail of backwards compatibility issues.  In the case of HTML, initially it never included support for CSS.  Instead tags like <font> (now deprecated) were scattered everywhere throughout documents which created headaches for web designers.  But with the Internet containing millions of published pages, all containing instances of old techniques, the question must be asked… How do you keep these pages still working, whilst moving the language forward?

This is where the DOCTYPE comes in.  Before rendering the page, the browser will scan the first line of your page source to determine the DOCTYPE.  Newer web browsers are equipped to handle several versions of HTML. These include HTML 2.0, 3.2, 4.0 and XHTML 1.0 and 1.1.  The versions of HTML define the elements, their attributes and what CSS is supported.

In laymans terms, a DOCTYPE in HTML effectively defines the version of HTML the browser should render the page in.

Without getting too side tracked, DOCTYPEs are a part of the XML standard.  This means that they dont just apply to HTML, but you will also find them if you ever deal with SVG graphics or MathML.  In this article, we will only discuss the DOCTYPEs used by browsers for the purpose of rendering (X)HTML.

Quirks vs Standards Mode

In addition to these versions, there are also two rendering modes.  These are quirks mode and strict mode.  In the past, the implementations of CSS across browsers were not as standardised.  Quirks mode refers to a mode where browsers emulate rendering bugs from older browser versions to ensure backwards compatibility.

For example, given the CSS style: height: 100px; padding-top: 10px", does the height of 100px include or exclude the value of the 10px padding?  In older versions, the border-box model was not as standardised.

Loose vs Transitional vs Strict

There are three DOCTYPEs that let you control how legacy code is handled (loose, transitional and strict).

Loose

Loose mode will allow old deprecated tags and markup to be used and CSS will be rendered in quirks mode.

Transitional (Recommended)

Transitional mode allows deprecated elements to be used, but the document will be rendered in standards mode.

Strict

The strict DTD totally prevents legacy code from being used.  Some developers initially create their design in strict mode and then drop it back to transitional to ensure that if legacy markup needs to be used, it can (possibly created later by the site editor using a CMS).

The following elements can't be used in strict mode: center, font, iframe, strike, u.
The following attributes can't be used in strict mode: align (allowed on elements related to tables), language, background, bgcolor, border (allowed on table), height (allowed on img and object), hspace, name (allowed on input, textarea elements), noshade, nowrap, target, text, link, vlink,  alink, vspace, width (allowed on img, object, and table elements).

HTML vs XHTML

The main differences between HTML and XHTML are to do with standardization of the markup language and how the language relates to XML.  One of the main differences is that in HTML, elements which do not require a closing tag eg - <br>, <img> do not need any delimiters or markup to represent their termination.  It is implied by the type of the element.  In XHTML, to bring it into alignment with XML, a slash is added just before the end of the tag.  Eg - <br /> and <img />

Without going into too much detail, it is important to mention that the parser that the browser chooses to use is not defined by the doctype, but rather the content-type http header.

What happens when no DOCTYPE is specified?

DOCTypes are a fairly recent addition to HTML, so there are many pages out there that didn’t include one back in the days of old.  For this reason, if no DOCTYPE is specified, the browser will likely fall back HTML 4 Quirks Mode.

You will have unnecessary cross browser issues if you do not specify a DOCTYPE.  Your page will fail W3C validation without a DOCTYPE.  It is really bad to create new pages without a DOCTYPE. 

Frameset DOCTYPEs

For those people who still like to use frames, for the root page which defines the location of all the frames on the page, you can use a frameset DOCTYPE. Eg:

What’s all this DTD business?

You may have noticed in the examples provided of DOCTYPEs that there are web addresses of “DTDs” included in the tag.  DTD stands for “Document Type Definition” and is in fact very important.

DTDs are basically XML documents which describe the elements and their associated attributes.  DTDs allow XML developers to define their own custom tags.  The HTML DTDs are hosted and published by the W3C (World Wide Web Consortium).

When placing a DOCTYPE, you can omit the DTD url, but it is not recommended. Ie:

is the same as:

Looking into the Future

The future of HTML is going to be HTML  5.  HTML 5 will eliminate the <font> and <center> tags from the DTD entirely.  It will also add to the DTD some new tags for date pickers, audio and video players.  The World Wide Web consortium have been very thorough writing specifications as to how elements, CSS and JavaScript should behave which should continue to improve cross browser compatibility.  The DOCTYPE seems to be shortened to just <!DOCTYPE html>.  All of these changes should make life a lot easier for web designers.