DOCTYPE.. (X)HTML, Strict or Transitional?
Lately, I have been reading up on DOCTYPE and (X)HTML as I felt that my knowledge of them was limited. This post is a summary and brain-dump of my readings and is not to be taken as an exhaustive documentation on the subject of DOCTYPE and (X)HTML. Do correct me if I err in any of the stuff mentioned below.
DOCTYPE
A DOCTYPE, or Document Type Declaration, defines the legal structure, elements and attributes of a web page. It is declared at the very top of every web page, and is required for browsers and validators to parse and render the document consistently and correctly.
HTML vs. XHTML
In the process of creating a web page, we have the choice of declaring our markup to be either HTML or XHTML. However, based on my observations, web pages nowadays are mostly declared as XHTML because XHTML, being known as a reformulation of HTML in XML, is an extension and improvement over HTML.
To quote the current XHTML 1.0 Recommendation:
The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content’s backward and future compatibility.
As XHTML conforms to the syntax of XML, XHTML pages are required to be well-formed. By enforcing well-formed rules in our markup, XHTML is more consistent to code and easier to maintain. The following are some of the more important rules of being well-formed:
- elements must be properly nested
- elements and attributes must be written in lowercase
- non-empty elements must be closed
- empty elements are minimized as a single element and closed with a space before the trailing slash
- images must contain alternative text
- markup characters: <, >, & and " are escaped
Being well-formed also means that XHTML is backward-compatible and can be served as HTML, using the media type: text/html. In fact, web servers and server-side scripting environments (PHP, Ruby etc) use this media type for content delivery, and so by default, XHTML pages are served as HTML.
In addition, XHTML inherits a useful feature from XML in XML namespaces. Because of this, XHTML markup can include other markup languages like MathML, SMIL, or SVG, and thus extend the basic functionality of a web document. This is semantic flexibility that isn’t available in HTML.
Deciding between HTML and XHTML is the easy part, but for each declaration, there are also different flavours to choose from, such as the Strict and Transitional DOCTYPE (and Frameset DOCTYPE).
Strict DOCTYPE
A Strict DOCTYPE enforces the separation of structure and presentation, requiring that presentational elements are shifted from markup to CSS. Using a Strict DOCTYPE also ensures that all markup are fully standards-compliant, and would only be processed by browsers in their strictest, standards-compliant mode. Ultimately, this results in the most consistent and forward compatible interpretation of the markup.
Transitional DOCTYPE
A Transitional DOCTYPE is used when transiting from legacy markup to modern standards, permitting the use of some deprecated elements or attributes that were common in legacy markup. This DOCTYPE is not meant to be used permanently and all markup should aim towards implementing the Strict DOCTYPE.
Differences between Strict and Transitional DOCTYPE
In general, most of the differences between a Strict and Transitional DOCTYPE are related to presentational elements. Listed below are some of the differences that are more likely to cause problems when migrating from Transitional to Strict DOCTYPE.
Elements not allowed with Strict DOCTYPEs:
- center
- font
- iframe
- strike
- u
Attributes not allowed with Strict DOCTYPEs:
- align (allowed on table elements: col, colgroup, tbody, td, tfoot, th, thead, and tr)
- language
- background
- bgcolor
- border (allowed on table)
- height (allowed on img and object)
- hspace
- noshade
- nowrap
- target
- text
- link
- vlink
- alink
- vspace
- width (allowed on img, object, table, col, and colgroup)
Conclusion
As most of the readings point out, we should strive to use a Strict DOCTYPE for our web quality’s sake. This is because a Strict DOCTYPE promotes the separation of presentation and structure, and results in code consistency and ease of maintenance of any website. HTML 4.01 Strict or XHTML 1.0 Strict? That would depends on our requirements and application architecture. But from a Web Standardista’s point of view, making sure that a Strict DOCTYPE is in use is more important than anything else.
Note to self: I should start to transit this blog into a Strict DOCTYPE.
winston.yongwei