Doctype
May 20, 2023
The term doctype (short for document type declaration) refers to an HTML or XML tag that specifies the version of the markup language used to create a web page. It is usually the first line of code in an HTML file and is used by web browsers to determine how to render the page.
Purpose
A doctype declaration serves two primary purposes:
-
To inform web browsers of the document type – A web browser needs to know the type of document it is rendering in order to apply the correct parsing rules and display the content correctly. There are several versions of HTML and XML, each with its own set of rules and tags. Without a doctype, a web browser may not know which set of rules to apply, resulting in a page that is rendered incorrectly.
-
To trigger standards mode – When a web browser encounters a doctype, it uses it to determine whether to render the page in standards mode or quirks mode. Standards mode is the preferred rendering mode in which the browser follows the documented standards for the markup language, while quirks mode is a backwards compatibility mode that emulates the rendering behavior of older browsers. By including a doctype, authors can ensure that their pages are rendered consistently across different browsers.
Usage
A doctype declaration is included at the very beginning of an HTML or XML document, before the <html> tag. The syntax for a doctype declaration varies depending on the document type, but it generally follows this pattern:
<!DOCTYPE html>
This declaration tells the browser that the document is an HTML5 document, and triggers standards mode. Other doctype declarations for older versions of HTML include:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This declaration tells the browser that the document is an HTML 4.01 Strict document, and triggers standards mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This declaration tells the browser that the document is an HTML 4.01 Transitional document, and triggers quirks mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This declaration tells the browser that the document is an XHTML 1.0 Transitional document, and triggers standards mode.
Note that doctype declarations are case-insensitive and do not require any specific capitalization. However, it is considered best practice to use all uppercase letters to make the declaration easier to read and understand.
Quirks mode
If a doctype declaration is not included, or if it is invalid or incomplete, the browser will enter quirks mode. In this mode, the browser emulates the behavior of older browsers, even if it doesn’t comply with modern web standards. This can result in unexpected rendering and layout issues, as well as compatibility issues with newer features and technologies.
For example, in quirks mode, the browser may ignore the box model and apply incorrect margins and padding to elements. It may also apply default font sizes and styles that differ from those specified in the CSS.
