May 25th, 2005 
[Article] kiswa's Article Part 2: DOCTYPE
Using DOCTYPE Matters!
First, let??s refer back to the ??semantic?? markup I had in Part 1:
Code:<html>
<head>
<title>Test</title>
</head><body>
<div id="header">
<h1>This is the Page Title</h1>
</div><div id="nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div><div id="main_text">
<h3>Paragraph Title</h3>
<p>This is some filler text... This is some filler text... This is some filler text...
<br />This is some filler text... </p>
<h3>Paragraph Title</h3>
<p>This is some filler text... This is some filler text... This is some filler text...
<br />This is some filler text... </p>
</div><div id="footer">
<p>Copyright 2005 All Rights Reserved.</p>
</div></body>
</html>
Okay, so I mentioned before that this isn??t really semantic code. It??s semantic, but it includes extras - markup beyond the basics required for display on a text-only medium. The Internet is not text-only though, now is it? So, I??ve included all the divisions to make styling this document with CSS much easier for us to accomplish!
There is however, something this document is missing and that is?
The All Important DOCTYPE!
The DOCTYPE should be the very first thing in your document and gives a validator the information it needs to check your document??s syntax, and lets a browser know what to expect. There are a few options available to you:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If you??re going to use frames, the DOCTYPE for the frameset page should be one of the following:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
There are also a few options that aren??t used as much, and they are:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
The first group has the most common choices used, namely HTML 4 (Strict and Transitional), and XHTML 1.0 (Strict and Transitional again!). The Strict versions emphasize ??structure over presentation. Deprecated elements and attributes [sic], frames, and link targets are not allowed [sic].? The usefulness of Strict mode is that it focuses on structure and is more easily adaptable to varying browsing options. The Transitional versions allow you to include non-presentational code so you can compensate for media that do not support CSS styling like they should.
The XHTML standard is really an XML version of the HTML 4 standard (and because of this it allows for even further separation of content from style, but that??s a whole other set of articles and I??m not going to go there). The biggest difference between the two is that XHTML has no unclosed tags (i.e. <img src=?? alt=??> is no good, it??s <img src=?? alt=?? /> in XHTML).
The second group is for Framesets. If you??re going to use frames, use the appropriate DOCTYPE! The Frameset DOCTYPEs above are variants of HTML 4 Transitional.
The last group includes DOCTYPEs for older HTML standards. While they are supported by almost every browser you could think of, they don??t support CSS very well and are entirely incompatible with Framesets and internationalization (and 2.0 doesn??t even do tables well).
Setting a DOCTYPE tells the browsers that visit this page what to expect and gives us a standard to validate our code against. And that??s where DOCTYPE becomes really useful!
Validate Your Code!
Okay, lets say we want to use XHTML 1.0 Strict. Thanks to DOCTYPE, we can be sure that everything treats our code as XHTML 1.0 Strict. And online validators like http://validator.w3.org/ will know what to compare our code to so we can see how we??ve done. Simply by adding the DOCTYPE to the beginning of our code, we get a ??Tentative? validation from that address. The only thing missing for a guaranteed validation is a character set (a.k.a. charset).
If we simply add one little meta tag, we have a valid XHTML 1.0 Strict document. That meta tag is:
Code:<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
That sets our character set to iso-8859-1 (International Standards Organization Latin 1 charset). There are other options, but if your site is going to be using the standard Latin 1 characters, use that charset. For more options, you can go here.
The content type is also set in this meta tag, and in the case of XHTML 1.0 Strict, it is "application/xhtml+xml". You can find out more about which content type to select by going here.
So, our final code for our Standards Compliant, Valid, XHTML 1.0 Strict document is:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
</head><body>
<div id="header">
<h1>This is the Page Title</h1>
</div><div id="nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div><div id="main_text">
<h3>Paragraph Title</h3>
<p>This is some filler text... This is some filler text... This is some filler text...
<br />This is some filler text... </p>
<h3>Paragraph Title</h3>
<p>This is some filler text... This is some filler text... This is some filler text...
<br />This is some filler text... </p>
</div><div id="footer">
<p>Copyright 2005 All Rights Reserved.</p>
</div></body>
</html>
I was going to go into methods of using CSS to style a document like this (actually, I was going to use this one!), but it seems my DOCTYPE article got nice and long so?.
Next Time - kiswa's Article Part 3: Styling With CSS
Thanks,
kiswa
Source:
http://htmlhelp.com/tools/validator/doctype.html
___________________
www.kiswa.com
My attempt at articles for Neverside CodeBase: Part 1 Part 2 Part 3
(. )v( ) <- The Webstandards Owl
Last edited by kiswa, May 26th, 2005 02:49 PM (Edited 1 times)
