Accessibility

Table of Contents

  1. Introduction
  2. Document Type Definition
  3. Setting your doctype and avoiding quirks mode
  4. Syntax of CSS and linking an external style sheet

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

Setting your doctype and avoiding quirks mode

In Listing 2, you can see that the doctype includes a URL to the W3C. Within that URL, it includes a reference to the standard that the code following it should adhere to. In this case, the doctype is set to xhtml1-transitional. When a browser—or other device—comes across a valid doctype like this, the code that follows will be rendered in standards mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Listing 2. A doctype that includes a URL to the W3C that includes a reference to the standard

Take a look at the doctype shown in Listing 3. This doctype doesn't contain the URL back to the W3C and is deemed to be a partial doctype. When a browser—or other device—is presented with a partial doctype, then assumptions are made by the user agent (the browser) on how the code following it should be rendered. The result of the rendering under this type of doctype is known as quirks mode. Quirks mode tends to throw up some nasty surprises when your page is rendered. Quirks mode is another way of saying your web pages will not be rendered in a standards-compliant way.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Listing 3. A partial doctype

A list of valid doctypes can be found here:

HTML 4.01

<!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 HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

<!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">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

You can find doctypes for versions of the (X)HTML and HTML specifications at the W3C website.

From what I have discussed, you can see the importance of including not only a full doctype but also the correct doctype for your page. You should always aim to have your web pages rendered in standards-compliant mode. This gives you the best chance of creating cross-browser and cross-platform compatible websites.

Microsoft Internet Explorer 6 has one or two quirks of its own when it comes to rendering in standards mode—even when a full doctype has been declared. You should avoid adding anything above the doctype in Internet Explorer 6, as this drops the browser into quirks mode when rendering your web pages—even if the only thing that exists above the doctype is a simple HTML comment. You may have heard mention of the "box model problem." If not, I'm sure this is something you will learn more about later in this series. Suffice to say in standards mode, Internet Explorer 6 does not suffer from this problem. In standards mode, the box model is rendered correctly.

In the following Captivate demo, you will see how dropping into quirks mode can destroy your design. Within the download files for this article, you will find a page called ie6quirks.html that is referenced in the demo.

Alternatively you can complete the following steps:

  1. Open the ie6quirks.html page.
  2. View the source code and not the HTML comment above the doctype. Note that the doctype is a full doctype.
  3. Preview the page in Internet Explorer 6.
  4. Return to Dreamweaver and delete the comment above the doctype.
  5. Save your page.
  6. Preview it again in Internet Explorer 6. Note how much bigger the div is rendered.

This demonstration is a simple test to show how differently a page can be rendered depending on whether it is being rendered in standards mode or quirks mode. If you don't have Internet Explorer 6 to test in, see Figure 1.

Quirks mode and Standards mode

Figure 1. Quirks mode and Standards mode

Conclusions about doctype

From the discussion on doctypes you should be able to draw the following conclusions:

  • Always use the correct doctype for your document
  • Always use a full doctype
  • Ensure that you write code that matches your doctype
  • Never allow anything above the doctype

Note: Server-side code above the doctype is fine; all such code is executed on the server before the page is sent to the browser and is not rendered in the browser.

With a good doctype set in your document, you can begin to style your content with the knowledge that you are working in standards-compliant mode.

Page 3 of 4
Previous Page
Next Page