The Doctype Declaration

Every HTML document should have a document type declaration. The "doctype" begins the web page and tells the browser how to interpret the coding on the page. It also tells a validator which version of HTML to use in checking the document's syntax.

When you use a CSS file, omitting the document type will throw the browser into "quirks" mode and can give you very unpredictable results. Since CSS is designed to tell the browser how to display the content, why make the browser guess? Add a doctype! While there are a variety of document types from which to choose, chances are you will want to select from one of five options:

HTML5

All of our templates are coded using HTML5. HTML5 is latest major revision of the HTML standard. It's really the HTML we're all used to, just with more elements.

But HTML5 isn’t one thing. It is a whole collection of features and technologies. While not all of these features are cross-browser compatible, the good news is many parts are ready for prime time so we can use HTML5 right now.

For instance, you can change your doctype to the HTML5 one (<!doctype html>). Your document is now HTML5. Because the HTML5 spec was based on a lot of work figuring out what browsers already do, things like this work. So, if you prefer the HTML5 syntax, feel free to do that now.

html
  1. <!DOCTYPE html>
  2. <html>

As for the new elements, they’re lacking support in older versions of IE, but you can add quite a bit of support for HTML5 into IE with JavaScript. We have previously added the following into our templates for the HTML5 elements we use.

This "conditional" coding says that in IE browsers prior to IE9, create the following elements:

javascript
  1. <!--[if lt IE 9]>
  2. <script>
  3. document.createElement('header');
  4. document.createElement('nav');
  5. document.createElement('section');
  6. document.createElement('article');
  7. document.createElement('aside');
  8. document.createElement('footer');
  9. </script>
  10. <![endif]-->

Note that unknown HTML elements are displayed as inline by all browsers, so we've added display: block; for new block-level elements in the main CSS file for older browsers.

css
  1. header, footer, nav, article, section, aside, figure,
  2. figcaption {display: block;}

We're going to continue moving forward with HTML5 in our templates because it offers more functionality while still using the main things in Web creation -- HTML, CSS, and Javascript.

Previous Doctype Declarations

Because it's good know what has come before...

XHTML 1.0 Transitional

Most web sites that use CSS for positioning elements will use XHTML rather than HTML coding. The W3C (World Wide Web Consortium) currently recommends using XHTML. This hybrid language looks and works much like HTML, but is based on XML, the web's "super" markup language. XHTML requires a more "logical" document structure.

XHTML 1.0 Transitional is an XML version of HTML 4 Transitional and is written as follows:

html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmins="http://www.w3.org/1999/xhtml">

It is also recommended that you include the "namespace" information into your opening <html> tag.

XHTML 1.0 Strict

XHTML 1.0 Strict is an XML version of HTML 4 Strict.  Deprecated elements and attributes, frames, and link targets are not allowed. The document type declaration is written as follows:

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

It is also recommended that you include the "namespace" information into your opening <html> tag.

HTML 4.0 Transitional

HTML 4.0 Transitional is probably the most "forgiving" of the document types. It allows presentational attributes, some deprecated elements, and link targets. The document type declaration for HTML 4.0 Transitional is:

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

HTML 4.0 Strict

HTML 4.0 Strict is a trimmed down version of HTML 4.0 that emphasizes structure over presentation. Deprecated elements and attributes, frames, and link targets are not allowed. By writing to HTML 4.0 strict, you can achieve accessible, structurally rich documents that easily adapt to style sheets and different browser situations. The document type declaration for HTML 4.0 strict is:

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