Index by Christopher Schmitt

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Understanding DOCTYPEs and Effects on Browser Layout

Problem

You want to make your web page standards compliant and valid.

Solution

HTML 4.01 has three document types: Strict, Transitional, and Frameset.

Both HTML5 and XHTML 1.1 have one document type, but XHTML 1.0, like HTML 4.01, has three.

Only one document type definition (DTD) appears in the HTML document. Use any one of the following DOCTYPEs that best fits your project needs.

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">

HTML5 DTD:

<!DOCTYPE html>

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 HTML5 DTD and the required head, body, and html elements:

<!DOCTYPE html>
<html>
 <head>
  <title>CSS Cookbook</title>
 </head>
 <body>
  <h1>My Basic Web Page</h1>
  <p>Epsum factorial non deposit quid pro quo hic escorol.</p>
 </body>
</html>

Discussion

A DOCTYPE, short for document type definition, defines an HTML or XHTML document’s building blocks and tells the browsers and validators which version of HTML or XHTML your document uses.

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

Quirks mode

XHTML requires a valid DOCTYPE at the top of the document; otherwise, the pages won’t validate and the browsers will fall back into what is known as quirks mode.

Quirks mode occurs when a browser treats a web page as “buggy.” As a result, such pages are treated as though they were written in invalid markup, and therefore will be improperly rendered in modern browsers even if the XHTML and CSS are coded perfectly.

A web page that is without a DOCTYPE, with an older DOCTYPE, or with a typo-riddled DOCTYPE triggers quirks mode. So, when coding pages, make sure to check that the DOCTYPE is both added to the page and typed correctly to ensure that browsers do not render pages in quirks mode.

Note

If a web page has an HTML5 DOCTYPE, modern browsers will trigger standards mode, even though the actual markup isn’t coded with HTML5 elements. Internet Explorer for Windows 6 and 7 ignores HTML5 features.

Figures 1-2 and 1-3 show how a table contained within a div with a width of 100% goes into quirks mode in Internet Explorer 6, and how the page should look in standards mode.

Why not use the latest DOCTYPE?

Using newer DOCTYPEs such as HTML5 is an option. However, it’s not the only option. Unlike software application releases, newer DOCTYPEs don’t make older DOCTYPEs moot.

For example, you would be hard-pressed to install, much less run, Photoshop 4 on today’s computers. However, you can still use HTML4 syntax and DOCTYPEs without fear of browsers not rendering your content.

Table width in Internet Explorer 6 in quirks mode with no DOCTYPE included

Figure 1-2. Table width in Internet Explorer 6 in quirks mode with no DOCTYPE included

Table width in Firefox 1.5 in standards mode with HTML 4.01 Strict DOCTYPE

Figure 1-3. Table width in Firefox 1.5 in standards mode with HTML 4.01 Strict DOCTYPE

The smallest web page ever

The Solution provides an example of a relatively short HTML5 page. However, an even shorter and valid example can be made:

<!DOCTYPE html>
<title>Small HTML5</title>
<p>Hello world</p

These three HTML elements validate for HTML5 by checking out the page at http://validator.w3.org/check?uri=http%3A%2F%2Fjsbin.com%2Fowata&ss=1.

See Also

HTML5 specification for DTD at http://dev.w3.org/html5/spec/Overview.html#the-doctype; HTML 4.01 specification for DTD at http://www.w3.org/TR/html401/intro/sgmltut.html#h-3.3; W3C validators at http://www.w3.org/QA/Tools/#validators; DOCTYPEs article from A List Apart at http://www.alistapart.com/articles/doctype/; Article from QuirksMode at http://www.quirksmode.org/index.html?/css/quirksmode.html; Mozilla’s information on quirks mode, which explains the differences between the rendering modes and how it handles quirks mode, at https://developer.mozilla.org/en/Mozilla's_Quirks_Mode; Opera’s DOCTYPE page at http://www.opera.com/docs/specs/doctype/

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required