Looking for the lessons? Get started!
Quick examination of the DOCTYPE definition, and why this site only uses HTML 4.01 Strict.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
Using an incomplete or outdated DOCTYPE – or no DOCTYPE at all – throws … browsers into ‘Quirks’ mode, where the browser assumes you’ve written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s. — Jeffrey Zeldman
The very inclusion of a [DOCTYPE] in your document can set standards for your code and avoid the obscurities that quirks mode can present to your web browser. Therefore, having this [inclusion], which describes the language used, can prove beneficial in inheriting Web standards. — Alex Dawson
The W3C page we visited during the lesson has all kinds of DOCTYPEs in it, and Ian Lloyd gives us a relatively esoteric explanation of what they are. Right now, we don’t care about that. (We will later.)
Here’s what you need to know to get this going. If you’ve been following the lessons, you are using the most current, widely accepted, and valid DOCTYPE out there, called HTML 4.01 Strict. It tells your browser to read (“parse”) your Web page using HTML 4.01 Strict protocols.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Note: As designer Craig Cook reminds us, the DOCTYPE comes before everything in the page. Everything. Even a single space or carriage return (a whack on the Enter key) will render the entire page invalid, and perhaps prevent the page from displaying properly.
Many people use XHTML to code their page. I won’t get into the huge debate over which one is “better,” but since this is my tutorial, I’m advising you to stick with HTML 4.01 Strict over XHTML DOCTYPEs. If you decide later to move to XHTML coding, use XHTML 1.0 Strict. (Read more about the differences between the two here and here.)
Both HTML and XHTML also have “Transitional” DOCTYPEs. Unless you have a specific need to do so, don’t bother with them. Design and code expert Tommy Olsson gives one good reason to use a Transitional DOCTYPE:
If we are creating a new web page, the W3C recommends that we use HTML 4.01 Strict. If we are trying to convert older HTML 2.0 or HTML 3.2 documents to the modern world, we can use HTML 4.01 Transitional until we have managed to transfer all presentational issues to CSS, and all behavioral issues to JavaScript.
There are other DOCTYPEs such as “Frameset” and others – if you need to find out about those at a later date, feel free to look them up on the Internet. And, Web designers are very excited about the brand-new HTML 5, which has its own very simple DOCTYPE, but we aren’t going to get into that here. At some point, when browsers catch up, HTML 5 (or its successor) will most likely become the accepted standard, but that day ain’t today.
Some older tutorials do not include DOCTYPEs, and begin the page with the <HTML> element. While most browsers will display pages without DOCTYPEs (forcing some browsers into what is called “quirks mode” and others into “almost standards” mode), it is absolutely not best practice to fail to use a proper DOCTYPE in your pages. Don’t let those old tutorials lead you down the wrong path.
Most fundamentally: to have a valid Web page, you must use a DOCTYPE, and conform to its standards.
Only if you care: the aptly named Quirks Mode gives us a comparison chart that shows what behaviors the various DOCTYPEs, or lack thereof, trigger in various browsers. It’s not completely up-to-date, but it serves its purpose.
And watch out for “partial DOCTYPEs.” Some older design programs generate them, and some older online resources provide them; they often leave out the URL or make other excisions. Again, these send some browsers into quirks mode.
My friend Tommy Olsson gives us a good, brief description of the different elements of the DOCTYPE, and of the three DTDs.
Citing the Language Used
This isn’t strictly about DOCTYPEs, but it seems to be a good place to put this little snippet.
A lot of designers just stick a raw html tag in the head of their code:
<html>
If you add a bit more information, it becomes much more useful:
<html lang="en">
Basically, doing this gives some much-needed language information to site visitors who use speech readers or other assistive technology.
The en value is, of course, English; other languages have other values.
My take: use it in your designs as a matter of course, and of best practice.
