HTML document types

Not every HTML document is made the same way. In fact, there are three different types of HTML documents. How do we go about classifying webpages in this manner?

This tutorial focuses on:

What is a 'document type definition'?
Specifying a document type definition
The Transitional document type definition
The Frameset document type definition
The Strict document type definition
Page validation

What is a 'document type definition'?

A Document Type Definition (DTD) is the specification by which HTML documents are classified into different categories. Don't let the word 'categories' make you nervous thinking that there are so many different types of categories of HTML documents out there. There are actually only three.

There are three document type definitions in HTML. Each document type definition specifies what type of document an HTML document will be.

Transitional - For HTML documents that use deprecated elements or attributes.
Frameset - For HTML documents that use frames (can also include deprecated elements or attributes like the transitional document type).
Strict - For HTML documents that include no deprecated elements or attributes, and no frames.

Every HTML document you create will fall into one of the above three categories.

Specifying a document type definition

Now that you know what the three document types are, how do you go about classifying your HTML documents accordingly?

A document type definition is specified with the <!DOCTYPE> declaration. The <!DOCTYPE> declaration should be the first line of code in an HTML document, even before the <html> tag.

NOTE: The <!DOCTYPE> declaration is mandatory (if you want your pages to validate with an HTML validator) and should always be the first thing in an HTML document.

NOTE: Although a document type definition is technically not required for a functioning webpage, it is good practice to always include it in your code. As you learn to build webpages, get into the habit of always including the document type definition in your code.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Specifying a document type definition</title> </head> <body> <h1>Content</h1> </body> </html>

In the above example, the line of code that specifies the document type definition is:

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

The Transitional document type definition

The Transitional document type definition specifies an HTML document that uses some deprecated elements or attributes such as the <font> tag, and can also be used for documents that will be displayed in browsers that do not support CSS.

Example:

The Frameset document type definition

The Frameset document type definition specifies an HTML document that uses frames to display one or more pages at the same time in the browser window and can also include deprecated elements or attributes (like the Transitional document type definition). But unlike the Transitional document type definition, the Frameset document type definition uses the <frameset> tag instead of the <body> tag.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Specifying a document type definition</title> </head> <frameset cols="50%, 50%"> <frame src="frame1.php" /> <frame src="frame2.php" /> </frameset> </html>

The Strict document type definition

The Strict document type definition specifies an HTML document that includes no deprecated elements or attributes such as the <font> tag, and no frames.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Specifying a document type definition</title> </head> <body> <h1>Content</h1> </body> </html>

Page validation

The process of page validation involves checking the code of an HTML document to make sure it conforms to certain standards such as having the <!DOCTYPE> declaration and that tags are closed in the proper order.

Why is page validation important?

Page validation is important because it shows that the author of the page took the time to write semantic code that follows proper HTML standards.

HTML has certain rules and conventions that should be followed if you want your pages to appear as you intend them to appear across browsers. Page validation is the process by which this is verified. Everyone makes mistakes, and it's ok to have a few errors here and there, but whenever this happens and your pages don't validate, you should take the time to fix them.

Where can I validate my pages?

The W3C provides an HTML document validation service that you can use for free. You can use it to validate an HTML document that is already online, an HTML document from your hard drive, or directly input HTML code. If there are any errors, the validator will inform you of this and will also inform you where the errors are located so that you can fix them.

Specifically, the validation process involves checking an HTML document against the document type definition that you classify it into. If you claim an HTML document as part of the Strict document type definition, then the validator will check that you are following the rules for that document type definition along with the usual things such as including the <!DOCTYPE> declaration and including tags in the proper order.