Whas Up DOCTYPEs?
Using CSS for layout can be tricky enough - but you're going to make your life much harder for yourself if you don't get your DOCTYPE's sorted.
Sitting right at the top of each of your web pages, before the <head>,
before even the <html> wrapper, should be a DOCTYPE
decalaration. It could look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
It's there to tell a modern browser what kind of markup you've written and how to go about rendering it.
DOCTYPES are important because without you adding one the browser is left to assume that you're just some mug punter who doesn't know what they are doing.
Once upon a time creating HTML was a pretty straightforward business, there weren’t very many tags and what they had to do was easy enough - they added structural description to a text document. HTML was designed to make things easy on document authors and web browsers were designed in a similar manner. As such they were written to be very tolerant of mistakes people make while writing HTML.
For instance, although the HTML specs say that you MUST close all <p> elements, you’ll find most browsers will put up with you leaving them out – so
<p>The first para
<p>The second para
and
<p>The first para</p>
<p>The second para</p>
would get rendered as the same thing.
Likewise, if you’re defining a list,
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
is the proper, correct mark-up – but most browsers would accept,
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
with none of the <li>’s closed.
Over the years browsers have been built to be ever more tolerant of human hand-coded errors, errors which take the practice of code as it is writ further and further from the original (and well planned) HTML specifications.
Added to this is the large number of browser/vendor driven extensions to HTML that authors have been using on their pages for years. Many of these also fall outside correct, specified HTML syntax and browsers have been built to be tolerant of them.
All of this creates problems when it comes to the correct rendering of more sophisticated web pages, especially those using CSS to style elements. When browsers have been created to tolerate and forgive every dumb mistake a document author can make it can cause difficulties when it’s trying to determine exactly what is you mean by a certain piece of mark-up.
And that’s what a DOCTYPE is for, and that’s
why it sits outside the enclosing <html> tag which holds
the content of the rest of your document – before it gets to deal
with the HTML of your page it’s got to be told by which set of rules
you want to render it.
You can find DOCTYPEs for each current version of HTML here.
The most important thing for most of us to know is that using a strict HTML 4.01 DOCTYPE you can fix a lot of anomalies in the way that Internet Explorer’s 5 and 6 for Windows render CSS - most noticeably in enforcing correct rendering of block level elements across all the modern browsers.