DocType HTML PUBLIC

What is a DocType?

The DocType is the first tag that shall appear in any HTML document, even before the HTML tag itself. It tells the web browser client what version of the markup language the page will use.

Inside a doctype we can specify the DTD (Document Type Definition), which specifies the rules in order for the browser to render properly the page. Different DTDs initialize defaults of tags to different values. For example, the margin amount of a P tag.

Example of the doctype tag:

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

Is it mandatory?

Although it is not mandatory, not specifying the DocType will put the browser in a compatibility mode called “quirks mode”.

In this mode, the browser tries to figure out which doctype you wanted by analyzing the structure and content of your HTML page, which usually results in slower loading and some side effects.

What are the side effects of quirks mode?

Every browser decides which is the best default value as standard, and thus, inconsistent across different browsers. For example:

  • Some browsers switch to the defaults that Internet Explorer 5.5 had.
  • Some browsers will not inherit css styles inside tables.
  • Paddings, margins, text alignment and other defaults will have different values on different browsers.
  • Javascript code will behave differently, like the value of a radio button element will return an array rather than the selected value in some browsers.

What DocType shall I use?

Depends on the target browser you are aiming.

Usually, if you are starting a new project, use the HTML 5 DocType:

<!DOCTYPE html>

The reason to use this DocType is that is mostly accepted in all new browsers (Firefox, Chrome, Safari) and its backwards compatible with most Internet Explorer versions.

If you are developing a page which targets older browsers (Internet Explorer 5 and below, Netscape 4 and below), and want to be compatible with newer browsers, you shall force the DocType, so new browsers know that you are writing a page for an older standard.

Your goal would be to trigger the strict mode in all possible browsers, in order to reduce the number of browser-specific tricks and hacks.

XHTML 1.0 Transitional is your best bet:

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

Where I can learn more about HTML and XHTML?

There are many resources in Internet, for example: w3schools.com that will help you regarding the doctype.

Also, a good book about HTML and XHTML is HTML and XHTML Pocket Reference published by O’Reilly Media.

What are the common doctypes?

HTML 4.01 Strict

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

XHTML 1.0 Strict

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

XHTML 1.0 Transitional

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

XHTML 1.1

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

HTML 5

<!DOCTYPE html>