Doctype Declarations - First thing in the page, yet often overlooked.
Saturday, August 16th, 2008 | HTML
Considering this is my first post, i thought what better way to start than with the first element on a typical html page, the doctype declaration (usually referred to as the shorthand ‘DOCTYPE’). Most designers and developers would admit to simply cutting and pasting this crucial snippet of code from an external source without understanding its true meaning or purpose. It is beneficial to have a basic understanding of the DOCTYPE because it can be the source of rendering issues and is often the last place you would look to rectify a problem. A DOCTYPE essentially informs the browser as to which Document Type Definition (DTD) you intend your markup to conform to. A DTD being a specification of the rules and guidelines as to the structure of the markup you write.
DOCTYPE options
In terms of web standards, a DOCTYPE informs the validator which version of (X)HTML you’ve incorporated, and must appear at the top of every page. DOCTYPEs are an essential component of standards compliant web pages: your markup and CSS will simply not validate without them.
In fact, using an incorrect/incomplete DOCTYPE - or no DOCTYPE at all - leads many browsers to render your page in a so-called “Quirks” mode. Essentially, in this event the browser assumes that you’ve written outdated, invalid markup characteristic of the late 90s. To cope with this, the browser will try to render your website in a backward-compatible mode, displaying it as it might have appeared in antiquated browsers such as IE4. This is usually not what you intend and will result in all kinds of problems.
The Anatomy of a doctype
Lets take a look at a typical doctype declaration and examine each of its components in detail:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
- The <!DOCTYPE html portion simply states that we are beginning a doctype declaration and that the html element is the root element of our page.
- The word PUBLIC is referring to the fact that the DTD we’re referencing is publicy available
- The string “-//W3C//DTD XHTML 1.0 Strict//EN” is an example of a Formal Public Identifier (FPI). In a nutshell, this outlines details about the DTD and the organisation that owns it (in this case the W3C). The inclusion of EN means that the language of the DTD is english in this case.
- Lastly, the URL of “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” points to the location of the DTD.
Available doctypes
XHTML 1.0 specifies three XML document types for us to use: Strict, Transitional, and Frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
- Strict DTD - should be used when you want clean markup that is absent of any tags or attributes that exist for presentational purposes. That is, you are able to confine all presentational facets of your page to your CSS.
- Transitional DTD - should be utilised when you have no option but to use XHTML’s presentational features because your potential audience may use a browser that does not properly support modern CSS.
- Frameset DTD - should only be relied upon when you are using frames in the layout of your page.
In summary, as standards-aware designers and developers we should be striving to use the strict doctype in all of our work. By validating a page with a strict doctype, we have the comfort of knowing we have properly seperated our structure (HTML) from our presentation layer (CSS). We should only be resorting to the transitional and frameset DTDs in exceptional circumstances. Cases such as supporting legacy pages written using frames, or a web page targeted at a mobile device browser that does not support modern day CSS.
I hope this has educated you somewhat in the importance of a correct DOCTYPE and that you can now view the top of your HTML pages in a different light.
References
- 2008, HTML DOCTYPE TAG, W3C Schools, 15/8/2008, http://www.w3schools.com/tags/tag_DOCTYPE.asp
- Haine, P. 2006, HTML Mastery Semantics, Standards, and Styling, 1st Edition, Friends of Ed.
- Jeffrey Zeldman 2002, Fix Your Site With the RIght DOCTYPE!, A list Apart, 15/8/2008, http://www.alistapart.com/articles/doctype/
No comments yet.