Welcome to another article on Building Better Web Pages. This article series comprehensively covers building an HTML document: easily learned, but rarely perfected.
Today’s article covers Strict versus Transitional Doctype declarations. This is an extended discussion regarding the article about Doctype declarations. I always suggest XHTML Doctypes. There is some interesting debate over the HTML vs XHTML, but it is becoming less relevant as the web continues to mature.
Solid Statement: Choose the Strict Doctype for all new content. Transitional is only around to support old web content. While the word ‘Strict’ may evoke certain connotations, it does not mean that it is inflexible or limited. It means that it will force you to write markup correctly.
Whats the Difference?
The Transitional document type exists for the purposes of, well… transitioning. When the internet was younger, it used a somewhat different style of markup. It was like the American Wild West and each browser was an outlaw. In those days, a browser could make up its own set of tags and force the townsfolk to use them. I’m looking at you, Netscape and Microsoft! Early browsers had little compatibility between them. Over time the standards were drafted by the W3C and the web started to converge. The proprietary tags of old became deprecated and a new universal model was born. This, of course, would leave a lot of pages behind. Therefore, the Transitional Doctype was designed to allow these old pages to continue existence.
Technically, these Transitional websites were supposed to be transitioning to what we now know as Strict. This would ensure that markup meets the latest standards compliance. It would take away certain old tags like <font> that had nothing to do with semantic structure and was purely presentational. It would also remove attributes in the same manner. The align attribute has nothing to do with the document structure either, so they nixed that one. While it may seem so much easier just to say <div align="center">, presentation should always be left up to the stylesheets. More on that topic here. In fact, this concept is the very first sentence in the W3C definition of the Strict Document Type.
This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures.
Have style sheets matured? Well… That was written over 10 years ago! Of course they’ve matured. And it’s about time designers get done ‘transitioning’ and get on board.
How Does Strict Benefit Me?
Beyond enforcing the separation of presentation, Strict Doctypes also ensure that browsers use the correct rendering modes. While you can get away with using invalid, deprecated tags and attributes for the time being, Internet Explorer, Firefox, Safari, and Chrome only support these as a favor to you. They could release their next version without support for any of that old stuff. You would then find that your laziness has come back to haunt you.
Making the Move: Transitional to Strict
If you are making the move, you will find the following lists very helpful. This applies to you if you are updating old HTML or if you are simply teaching yourself to use Strict standards after working in Transitional land for a long time.
Elements no longer allowed in Strict.
applet, basefont, center, dir, font, iframe, isindex, menu, noframes, s, strike, u
Solid Tip: Watch out for the big three here: iframe, font, and u. These three are the most abused, in that order. If you were like me when you found out, you’re currently saying, “WHAT! No iframes?” That’s right. You’re not supposed to be using iframes. I didn’t come across this for a long time because 1. I hate iframes, and 2. I only used them in corporate web applications. Technically, you should be using the <object> tag instead. It has all the same issues as an iframe with a hip new name!
Attributes no longer allowed at all in Strict.
alink, background, bgcolor, clear, color, compact, language, link, noshade, nowrap, size, start, target, text, vlink
Attributes now only partially allowed in Strict.
align can only be used with tr, td, thead, th, tbody, col, colgroup, tfoot
border can only be used with table
height can only be used with img, object
hspace can only be used with img, object
name can only be used with a, button, input, map, meta, object, param, select, textarea
type can only be used with a, button, input, link, object, param, script, style
value can only be used with button, input, option, param
vspace can only be used with img, object
width can only be used with img, object, table, col, colgroup
Solid Tip: Watch out for the following common mistakes. While align is technically allowed on table related elements, it is not allowed on the table tag itself. You shouldn’t use it anyway. Width is allowed on table, but height is not. Also, width is not allowed on the td tag. Name is no longer allowed on form and img tags.
Tag Nesting differences
Elements that can no longer be a direct child of body, blockquote, form, noscript.
a ,abbr ,acronym ,b ,bdo ,big ,br ,button ,cite ,code ,dfn ,em ,i ,img ,input ,
kbd ,label ,map ,object ,q ,samp ,select ,small ,span ,strong ,sub ,sup ,textarea ,tt ,var
Solid Tip: Watch out for the following common mistakes. Images and plain text must be wrapped in a block level element. You can no longer put your form inputs right inside a form tag. They must be wrapped in block elements as well. This is also the case for text in blockquotes.
Solid Reading
For building better web pages, any of the following books are a great! “Web Design For Dummies”
