Document Type Tutorial

kodiak · #1 (**permalink**) 07-18-2007, 02:17 AM

I came accross this bit of information and I'd thought I would share it with you.

Programming Web Pages now-a-days with the new features and better validation / syntax that is availible can be very fun and exciting. With XHTML and CSS you can create some really neat stuff.

That's why I want to talk to you about the importance of using the correct doctype when you start creating.

O.K. Imagine you just create an awsome piece of work. It took you hours to line everything up in CSS, added the CSS hacks and everything just too make shure it looked A1 in all the browsers. BUT you didn't add what type of document it was!

Just because of that your awsome design doesn't display correctly at all. You go back and rework it unknowingly that the whole problem was you didnt have a doctype assigned to the page.

Frustrating I know! But let's get down to why its not showing up right shall we?

First of all you should know that every document on the web is parsed through the browser. Meaning The browser reads all of your code from your Web Page and deciphers it to the actual web page.

You may be asking well how does it know how to parse it? Good question!
I know if you ever done some snooping at some source code you've ran accross something like this:

Code:

1<?xml version="1.0" encoding="iso-8859-1"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5<head>
6<title>Untitled Document</title>
7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" 8/>
9</head>
10<body>
11
12</body>
13</html>

Notice lines 1,2,3,4, and 7. They play a key role in telling the browser how to interpret your code and display it.

This particular sniplet is for an XHTML version 1 compliant page.

ine 1 is explaining that this page is compliant with XML version 1 and using iso-8859-1 symbols. Meaning the english symbols/characters...
lines 2,3, and 4 are giving the browser a link to 'refer to' when parsing the document.
line 7 is just refering to what character set to use for the page.

You see by using the correct .dtd file you can enshure that your Web Page is always being read correctly.

Now when you dont use the correct .dtd file you run the risk of making the browser go into quirks mode.

Quirks mode is when the browser attempts to make the software behave like in the days of Microsoft Internet Explores 5 and Netscape Navigator 4 days.. It says well this page dosen't tell me how I should parse it so ill just display it like an old web page... Thats why you should always use the current doctype to enshure your page gets parsed with all the bells and whistles added.

I hope this tutorial helped some of you! and I hope you all can understand what im trying to say also... hahhaha

P.S.

for more technical information on quirks mode visit: quirks mode
for doctypes for framesets visit: DTD List, Frames Set

Also you can find my tuts on my Web Site Also. Sometimes I wont have time to post them to my site and here at the same time so if you want to you can check my site for updates. just click on my membername here and follow the homepage link.