24 ways: Transitional vs. Strict Markup

24 ways: Transitional vs. Strict Markup

The names reveal what they are about: Transitional DOCTYPEs are meant for those making the transition from older markup to modern ways. Strict DOCTYPEs are actually the default – the way HTML 4.01 and XHTML 1.0 were constructed to be used.

A Transitional DOCTYPE may be used when you have a lot of legacy markup that cannot easily be converted to comply with a Strict DOCTYPE. But Strict is what you should be aiming for. It encourages, and in some cases enforces, the separation of structure and presentation, moving the presentational aspects from markup to CSS. From the HTML 4 Document Type Definition:

Elements that are not allowed in Strict DOCTYPEs
* center
* font
* iframe
* strike
* u

Attributes not allowed in Strict DOCTYPEs
* align (allowed on elements related to tables: col, colgroup, tbody, td, tfoot, th, thead, and tr)
* language
* background
* bgcolor
* border (allowed on table)
* height (allowed on img and object)
* hspace
* name (allowed in HTML 4.01 Strict, not allowed on form and img in XHTML 1.0 Strict)
* noshade
* nowrap
* target
* text, link, vlink, and alink
* vspace
* width (allowed on img, object, table, col, and colgroup)

Content model differences
An element type’s content model describes what may be contained by an instance of the element type. The most important difference in content models between Transitional and Strict is that blockquote, body, and form elements may only contain block level elements. A few examples:

* text and images are not allowed immediately inside the body element, and need to be contained in a block level element like p or div
* input elements must not be direct descendants of a form element
* text in blockquote elements must be wrapped in a block level element like p or div