Doctype - that mysterious tag at the top of everyone’s code that not a lot of us really understand. Sure, it’s supposed to be there, but just what the hell is it, and why?
Perhaps a good place to start is with the misconception that a lot of new web developers and designers have - that code is code and really, if it’s in ‘HTML’ then it should look fine anywhere, right? Not quite. First, we have a plethora of different browsers - Firefox, Internet Explorer, Safari, Opera, Lynx, the mobile versions of these, and a ton of secondary browsers (okay, if you’re still using Lynx, you’re a bit SOL). Following this whole browser variable, there are different languages you can code in, and I’m not referring to scripting. HTML isn’t the same as XHTML, and there are different modes for both. So how does the browser decide how to render each differently? By using doctypes!
Essentially, the entire point of doctypes is to tell the browser which version of the various HTML languages we’re using in our page. Smart browsers will use this doctype definition to render differently to the screen depending on the styles set in the CSS and tags in the HTML of the page. In order to have a standards compliant page, it’s even required to include a doctype, and failing to implement one properly may send your bowser into quirks mode.
Quirks mode is how browsers deal with pages written back before standards were fully implemented. Without a fully documented standard, browsers wouldn’t have a full implementation of standards, and differences between browsers and code would occur. Developers would code directly for specific browsers, and though code was correct for that particular browser, it wouldn’t be for others. A large number of these web sites still exist, so new browsers implemented a method of backwards compatibility called quirks mode to deal with these older sites. Unfortunately however, quirks mode leads to several differences between browsers, including the IE box model bug, a difference in vertical alignments, the lack of inheritance of font sizes within tables and a few other issues.
So what’s the problem? In order to really make sure all of your users are seeing sufficiently similar content, doctypes can be used to take browsers out of quirks mode. This means no compensation for older content on your W3C standards compliant site (it is standards compliant isn’t it?), and everyone in the IE world can hold hands and sing merry songs with the folks in the Firefox world.
Great, now how do we implement them? First, you need to choose a doctype. There are many, but the most common few are below.
Strict Doctypes:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
XHTML 4.01 Strict
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Transitional Doctypes:
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Notice that each doctype has a web address (or URI) associated with it. Without a proper address associated with your doctype, browsers don’t know where to go to find out about it, and many will default to quirks mode without it.
Now what do we do with this?
Using the doctype is easy - just place the text at the very beginning of your code. If it’s placed anywhere but the very beginning, Internet Explorer has a tendency to jump over to quirks mode even though you supplied a doctype. Yeah, IE’s a tricky beast.
Strict vs Transitional doctypes.
More differences? Yeah, but these are simple. The W3C has, over the years, decided that some tags were not up to snuff and has classified them as deprecated. This means that older code, such as code that uses the “font” tag, isn’t quite standards compliant anymore. This is where we use a transitional doctype. All transitional means is that we can still use tags like “center”, “font”, “iframe”, “strike”, and “u”.
Strict doctypes, on the other hand, don’t include any of these deprecated tags and force the code to be completely standards compliant, which is what all web developers should be shooting for, since it’s most likely to be viewed the same on the largest number of browsers.
I’ve included a few good sources for more information on doctypes below. Please leave a comment if I’ve left something out or mis-explained something.
Doctypes on Wikipedia
Fix Your Site With the Right Doctype! - A List Apart
DOCTYPE Explained - O’Reilly Network
0 Responses to “Tutorial Series: Nailing down Doctypes”
Leave a Reply