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.
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:
- <!DOCTYPE>
The directive. - HTML
The root element of the document. - PUBLIC
Keyword to introduce a public identifier (FPI). - "-//W3C//DTD HTML 4.01//EN"
FPI (Formal Public Identifier) of the DTD, indicating the type of SGML document, version and language, is the first part of the DTD. - "http://www.w3.org/TR/html4/strict.dtd">
A URI reference to the definition file that describes the doctype the browser is supposed to download to apply to the content.
This is the second part of the DTD. There are two main DTD, strict and transitional.
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.
- html and HTML in the DTD.
- html and XHTML in the DTD.
- math and MathML in the DTD.
- svg and SVG in the DTD.
- and many others ...
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:
- -//W3C//DTD HTML 4.01//EN
- -//W3C//DTD HTML 4.01 Transitional//EN
- -//W3C//DTD HTML 4.01 Frameset//EN
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
- W3C validator. Checking the conformance of a page.