The Basics
To start this off in the next few posts I’ll be covering the basics, and yes, some people may think the following is obvious, but it never hurts to make sure that everyone is on the same page.
Why You Should Be Using DocTypes
Using a correct DocType is the single most important thing to do in creating a webpage. Sadly many authoring tools actually insert incorrect or broken doctypes in the code they create. Doctypes are what tells the browser the kind of page it is expecting. This is especially important as correct doctypes help browsers to render the page in ’standards compliant’ mode, turning off all the goofy features that other, badly coded, pages might need - and that screw up all your hard work.
Of course you don’t need these features because your web page is going to be coded properly right? Right? Right.
Why are there these features in browsers? To compensate for the awful coding people have done in the past for the sake of ‘backward compatibility’ that’s why. Its the browsers fault originally of course, the war for dominance in the browser market created many of the problems that are now trying to be fixed. Due to this many web pages have code that is frankly incompetently coded - with unclosed tags and typos within the code. Putting a doctype in your code lets the browser know that you are coding to a certain specification, and that it should display it as such.
In fact having a doctype (and code that complies with it) is the single biggest step anyone can take to making their site look good, and more importantly consistent, on all platforms.
So What Is A DocType?
DocType stands for ‘document type declaration’ or ‘DTD’ and basically does just that - declare the type of document that it is. They usually come in 3 flavours - Strict, Transitional, and Frameset.
- Strict - Strict is just that, its a strict set of rules that conform to the wc3’s recommendations for web standards. It doesn’t allow any tags or properties that have been depreciated in the specification, and you should have content and presentation separated. Ideally this is what you should be working with, especially if you are creating a site from scratch.
- Transitional - Much friendlier for many people, transitional understands that you may not be able to, or may not want to code to the ideals of the strict doctype. It features the depreciated attributes, and doesn’t require you to remove content from presentation as much. A good doctype to start with if.
- Frameset - This is the same as transitional, but with support for the outdated and often misused html frames.
DocTypes also vary depending on what language you are coding in, HTML, XHTML 1, or XHTML 1.1. The difference between html and xhtml is subtle, but important. However I’m not going to cover this today, if you don’t know the difference then you are very probably using html.
What DocType Should You Use?
Good question, its quite hard to find correct doctypes on the net, even when someone declares one it is often wrong. To explain why lets look at a DocType, in this case for HTML 4 Strict:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
This pretty much breaks down to three sections. Telling that its a public doctype for html, the actual definition of the type, and the url to the specification of the type. Note the FULL url in the code. Often this is written as ‘TR/html4/strict.dtd’ or ’strict.dtd’ this is wrong! You must include the full url in the doctype else it is invalid and will do nothing for you.
With that lets show you the valid doctypes:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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”>
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
XHTML 1.1 (No transitional or frameset)
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
That’s all of them. They go just like that in your code as the first thing in the file before any other tag, even the html tag. You can check that you are conforming to the standard that you’ve declared in your doctype by validating your code (check the links side panel for the w3.org’s validator). You should try to eliminate any warnings and definately get rid of any errors it displays. In the long run you’ll learn how to code better displayed pages so that your site is fast, and the design looks right across all platforms.
Congratulations on the first step towards a better web.