Web Development

Quick Tip: Selecting the right doctype

Ryan Boudreaux covers the basics of selecting the most appropriate doctypes for you web pages.

This tip is an oldie but goodie: it might seem standard these days, but you would be surprised how selecting the right doctype can become a decision point for some web design houses. A document type definition (DTD) is the markup syntax tag declaration added to the top of HTML or XML pages that allows all browsers and validation scans to determine the type of document format and the layout mode. This allows the user agent to decipher the specifications used in coding for proper rendering and display.

Most coding tools have a nifty option for selecting the doctype for a new blank page or document. The doctypes available include HTML 4.01 Strict or Transitional, XHTML 1.0 Strict or Transitional, XHTML 1.1, and XHTML Mobile 1.0. Other Doctypes include Math Doctype Declarations such as MathML 2.0, and Compound document doctype declarations such as XHTML + MathML + SVG.

Common doctype declarations

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

The HTML 4.01 Strict document type puts emphasis on structure over presentation. Deprecated elements, presentational attributes, frames, and link targets are not allowed in this doctype, and visitors utilizing older browsers may render the pages with little or no flair and varied support for style sheets.

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

The HTML 4.01 Transitional document type declares and includes all elements and attributes of HTML 4.01 strict with additional support for presentational attributes, deprecated elements, and linking targets.

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This is the xml version of the HTML 4.01 Strict document type.
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is the xml version of the HTML 4.01 Transitional document type.

As you can see, the major decision points here are whether to choose between HTML and XHTML, or between strict and transitional. The decisions you make will determine which doctype you will declare inside your web documents.

Which doctype declaration should you implement?

If you start out without a doctype at all, it will throw the browser or validation tool into what is known as "Quirks" mode and the user agent will assume the page is written in an older invalid markup and code including outdated or deprecated practices. The user agent will attempt to parse and render the content in a backwards compatibility method, possibly rendering the code and CSS down to the level of IE4 or earlier and using proprietary Document Object Models (DOM's) specific to the browser or user agent. Not exactly how you would want your web pages and documents to be rendered if you want to ensure all user experience events and interactions match with your expectations and goals.

In most web document implementations there are two main options for selecting the correct doctype, either HTML 4.01 Transitional or HTML 4.01 Strict. XHTML alone is rarely used on the web today. If you use XHTML, it should be marked up with the application/xhtml+xml MIME type. The alternative, using XHTML but delivering it as text/html, causes numerous problems that are outlined in the document entitled "Sending XHTML as text/html Considered Harmful."

Select the HTML 4.01 Transitional doctype for an all-around, standards-compliant document that renders in most user agents and containing all the necessary elements and attributes. Consider the transitional doctype if your web pages meet the following criteria or requirements:

  • You are creating new pages and are unsure what doctype to use
  • You need your page to include tables as a means for layout and also include images inside of tables
  • The pages emphasize presentational markup
  • You need to allow external linking to open up in new browser windows

Select the HTML 4.01 Strict doctype for full standards compliance in all current browsers and user agents with new pages that contain clean, fully compliant markup and code, and combined with CSS for both presentation and positioning. Consider the strict doctype if your web pages meet the following criteria:

  • CSS is used for both layout positioning and presentation styling
  • You need to increase the accessibility of the page
  • You need to meet standards of compliance for all modern browsers
  • The page needs to render in alternate and mobile devices
  • The page will not be using presentational HTML coding

What doctype do you implement in your web documents and why?

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments
KarrasB
KarrasB

I run all my work by W3 for validation. Have done this for a decade. W3 validation will show if you have an incorrect declaration based on your page coding.

Editor's Picks