Recipe 1.6. Understanding DOCTYPES and Effects on Browser Layout

Problem

You want to make your web page standard-compliant and valid.

Solution

HTML 4.01 has three document types: strict, transitional, and frameset. XHTML 1.1 has one document type, but XHTML 1.0 has three document types, like HTML 4.01. Only one document type definition (DTD) appears in the HTML document, using any one of the following:

HTML 4.01 Strict DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

HTML 4.01 Frameset DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">

XHTML 1.0 Strict DTD:

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

XHTML 1.0 Transitional DTD:

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

XHTML 1.0 Frameset DTD:

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

XHTML 1.1 DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Here's a basic page with the XHTML 1.1 DTD and the required head, body, and html tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <title>XHTML DTD</title>  </head>  <body>   <p>XHTML requires having a DTD in every document otherwise it won't pass muster with the validators.</p>  </body> </html>

Discussion

DOCTYPE, short for DTD, defines an HTML or XHTML document's building blocks and tells the browsers and validators which version of HTML or XHTML your document is using.

The DOCTYPE declaration must appear at the beginning of every web page document before the html element to ensure your markup and CSS are standards compliant, and that browsers handle the pages based on the appropriate DTDs.

XHTML requires DOCTYPE, otherwise the pages won't validate and the browsers fall back on quirks mode, treating the pages as if they were written in invalid markup and therefore need to be improperly rendered in modern browsers even if the code may be perfect XHTML and CSS.

The W3C provides an HTML validator and a CSS validator so you can verify document validity. If there's no DOCTYPE, the validator chokes, as you see in Figure 1-29.

Figure 1-29. Screenshot of W3C's validator

A page without DOCTYPE, an older DOCTYPE, or an incorrectly coded DOCTYPE renders in quirks mode, in which a browser treats the page as buggy. In some cases, depending on the browser, some content will render according to W3C guidelines.

Figures 1-30 and 1-31 show how a web document with the same markup, a table contained within a div with a width of 100% goes into quirks mode in Internet Explorer 6.0 and how the page should look in standards mode.

Recipe 1.6. Understanding DOCTYPES and Effects on Browser Layout

Problem

Solution

Discussion

Figure 1-29. Screenshot of W3C's validator

Figure 1-30. Table width in Internet Explorer 6.0 in quirks mode with no DOCTYPE included

Figure 1-31. Table width in Firefox 1.5 in standard mode with HTML 4.01 Strict DOCTYPE

See Also