Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

Though DOCTYPEs have been around in the web world since about 1999, only in the past few years have they started getting the kind of respect and attention they were intended to have.

A DOCTYPE — also often referred to as a Document Type Definition, or DTD, or sometimes even a Document Type Declaration (again, DTD) — is a set of instructions in the top code of an HTML page that tells a browser how to identify the type of code that the page was written in as either HTML, XHTML, HTML5, or Frames.

More importantly, the DOCTYPE informs the browser how the document should be interpreted as an application of the XML programming language. XML, which stands for eXtensible Markup Language, is an easily customizable programming language for the communication of information and application services between people and computers using structured and meaningful semantic code.

By taking care to use the proper DTD on all your web pages, you can improve the accessibility of your website while also ensuring that your page code is valid.

The DOCTYPE is a line of code that gets added to the top of each web page. The DOCTYPE must be placed at the top of the HTML code, before the opening tag, which uses the old HTML 4.01 Transitional DTD.

In addition to informing the browser which markup language the page uses, the DOCTYPE associates an XML or SGML file with a DTD. Before you learn about which DOCTYPE to use, take a look at the code.

image0.jpg

The DTD itself, whether it’s for an HTML-, XHTML-, or HTML5-based page, is composed of two parts:

  • Definition: The first half is the markup language identifier, which matches the DTD type to the type of code used in the web document.

  • Declaration: The other half of the DTD specifies the URL of a web-accessible text file that contains more information about that DTD’s usage.

The W3C recommends that all HTML 4.01, XHTML, and HTML5 web pages include a DOCTYPE specifying a DTD. They used to require that Frameset pages use a DTD too, but those tags are now obsolete.

HTML 4.01 DOCTYPEs

You can use three types of DTDs with HTML 4.01 on your pages. The first can be used for most, if not all, of your pages because it tells browsers to use the strictest, most accurate, standards-compliant page rendering. Keep in mind, however, that it does require that the HTML contain no coding errors or deprecated tags:

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

The second HTML DTD should be used for pages that might contain legacy code, deprecated tags, and possibly some minor coding mistakes, all of which do not or cannot comply with strict DTD guidelines. The transitional and loose settings tell browsers to be a bit forgiving when interpreting any out-of-date tags and common code blunders:

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

The third, now obsolete HTML DTD was for HTML documents that use frameset tags to display two or more pages within a single browser window:

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

XHTML DOCTYPEs

When working with XHTML code, you must choose the correct XHTML DTD. You can choose from three kinds of DTDs when writing XHTML 1.0 code. The first can be used for most or all of your XHTML files that use CSS for page content presentation and adhere to the strictest possible interpretation of standards-compliant code. Note that with this DTD, the opening tag is appended with the xmlns attribute:

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

The second DTD is for XHTML files that might still contain styling and presentation code within the file as well as certain tags and attributes that the strict DTD disallows:

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

The third XHTML DTD was used for XHTML documents that included frameset pages with XHTML syntax rules:

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

In addition to these DTDs, you find two other XHTML DTDs. Strict XHTML 1.1 is a newer version of Strict XHTML 1.0 based upon the modularization of XHTML:

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

This DTD should be used only if you’re certain that you can comply with the stricter coding requirements of this form of XHTML. In other words, if you think you may need to use some coding hacks to get your job done, don’t use it.

Likewise, the Mobile 1.0 XHTML is a DTD used to describe XHTML code that’s been developed for wireless display.

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

HTML5 DOCTYPE

Surprisingly, the HTML5 DOCTYPE isn’t much of a DOCTYPE at all! The main differences from HTML 4.01 and XHTML you’ll notice are the use of all lowercase letters, the removal of a declaration of a URL for DTD usage, and the lack of an attribute appended to the opening tag:

<!doctype html>
<html>

This simplification is mainly because, unlike HTML and XHTML, HTML5 isn’t based on SGML (Standard Generalized Markup Language), an international standard for markup languages.

HTML5 is now the current standard used by web design and production professionals as browser and device support for it continues to grow. To see whether your browser or device supports HTML5, check out the test scores at The HTML5 Test.

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: