Dreamweaver Article

CSS design basics with Dreamweaver – Part 1: Learning about doctype

Document Type Definition

The Document Type Definition is known by several abbreviated names. You might hear it referred to as the doctype, just as I did in the opening paragraphs of this article; you might also here it referred to as a DTD. What you call it is not important; what is important is how it is written and thereby the effect it can have on how your web pages are presented to your end users. The difference in the rendering of a site with a full doctype and one with a partial doctype—or even no doctype at all—can be huge. Before you learn about these differences in rendering, it is only right that you spend a little time understanding what a doctype is and what it does. This is where you will start Part 1 of this article series—at the beginning and laying good foundations for your future work.

You will often here your fellow designers and developers referring to a doctype as "the doctype." This gives the impression that there is only one. There are in fact many different types of doctypes. Each doctype provides the browser—or device—with a complete set of rules that dictate how your page should be rendered and how your code should be written for it to be deemed valid code.

The different versions of (X)HTML provide different rules that lay down exactly what is and isn't legal within your code. One such difference is the transition to closing open tags in XHTML that wasn't required in HTML 4.01. Open tags are tags that don't have a closing tag in HTML—tags such as the image and break tags, among others. In XHTML these tags must be closed. See the code in Listing 1 for an example.

XHTML

<img src="images/MyImage.gif" alt="alt text" width="172" height="172" />
<br />

HTML

<img src="images/MyImage.gif" alt="alt text" width="172" height="172">
<br>

Listing 1. How an image tag and a break tag should be self closed by adding a closing slash

The first set of code in Listing 1 shows how an image tag and a break tag should be self closed by adding a closing slash. The space before the closing slash is optional, but I find it better to add it—if only for readability of your code. Below the XHTML code is standard HTML 4.01 code for the same tags. In HTML 4.01 the closing slash is omitted; it is not necessary to close open tags in the HTML 4.01 specification.

The style of writing valid code is dictated by the doctype. Had you used an XHTML doctype, then the specification says you must close your open tags with the trailing slash. If you failed to do that, then your document would be deemed to be invalid due to your code deviating from the XHTML specification. You can easily evaluate how valid your code is by using the W3C validator. This will test your code against the doctype supplied and provide you with a full report of any invalid markup that exists in any given page. You can access the W3C validator at validator.w3.org.

When coding pages, I do so under the XHTML transitional doctype. Others will use the HTML 4.01 doctype, and you should use what you're comfortable with. For me, XHTML is the way forward, especially if you intend to integrate your work with XML documents. But I digress and will get back on track with the article.

Page 2 of 4

Previous Page

Next Page