What doctype to choose?

The DOCTYPE tells the browser how to render a Web page, it can affect how the page will be presented.

A priori, we will choose the HTML 5 code for new pages, because with it older browsers tend to display them in standard mode.
For pages already online, it is not necessary to change the doctype, it does indicate to new browsers to display the page according to the conventions of the time and not according to the new standards.

The directive must be placed on the first line of the document before the <html> tag. It is a meta statement to the browser, not an HTML tag.

HTML 5

In version 5, the directive simply indicates that you have a web page to display:

<!DOCTYPE html>

It can be uppercase or lowercase or a combination as above.

We can use this statement on any new HTML page, but on older pages designed to appear with old versions of browsers, we could have incorrect rendering and it is best to keep the old doctype, unless the structure is very basic.

One must add for Internet Explorer:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

To force the browser to the IE9 display mode, otherwise it mays enter the quirks mode.

HTML 4

A typical doctype in HTML 4 in the following form:

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

So with the following components:

These definitions have an impact especially on Internet Explorer and not on recent versions of Firefox or Webkit which tend to implement HTML 5.

Document Type

The type is indicated twice in the directive, first designating the root element, html or math or whatever, then the identifier in the DTD.

DTD (Document Type Definition)

Version 4 of HTML mentions the DTD because HTML was considered as a derivative of SGML, which is no longer the case in version 5.
The DTD in an SGML document indicates the type of document: SGML, HTML or XML and also specifies what the exact definition should be applied to process the contents.
It consists of the formal public identifier and a URI giving the address of the document containing the specification.

Examples of DTD identifiers:

Strict or Transitional?

The strict DTD has the following format:

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

Befits a document containing no deprecated element or attribute and no frameset.

The transitional DTD has the following format:

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

For a document with deprecated tags and attributes in the specification, but recognized by browsers.

A third version to define a frameset that it is unnecessary to describe because it is no longer part of the HTML standard.

Document without a doctype

It is assumed that it is designed in "quirk mode ", supported by older browsers. It befits if its structure is very basic or written to these browsers.

The same browser can process a document in quirk mode or standard mode. The result will be different depending on used tags and reliance on CSS. A significant effect will appear when you put images in a table.

If the URI is missing in the doctype, the document will also be addressed in quirk mode.

Conclusion

If the page layout depends on CSS, it is essential to specify the doctype, either in HTML 5 without DTDs, or as HTML 4 with the full DTD including the URI.

The simple HTML 5 code is preferable to a new page, especially if in addition it is intended to be displayed on mobile devices. In this case it will not contain obsolete tags or specific to a browser.

Note that the DOCTYPE is also a starting point for the validity of testing tools, which come in handy if you intended a document to different types of devices including mobiles.

References

© 2008-2012 Xul.fr