Skip to main content

HTML Doctype

Understanding HTML Doctype

HTML Doctype, or Document Type Definition (DTD), is an instruction that associates a particular SGML (Standard Generalized Markup Language) or XML (eXtensible Markup Language) document with a document type definition.

The <!DOCTYPE html> declaration is used to inform a website browser about the version of HTML in which a page is written. It is the first thing in your HTML document and should be declared before the <html> tag.

Why Do We Need HTML Doctype?​

The Doctype ensures that the browser makes a correct 'rendering mode' choice when displaying a document written in HTML. Browsers use 'rendering modes' such as 'Quirks Mode' or 'Standards Mode' to interpret the page. A correct Doctype helps in the accurate rendering of the page by the browser.

Without a Doctype, the browser will interpret the document in 'Quirks Mode' which is a backward-compatibility mode with non-standard behavior, leading to possible inconsistencies in your page display across different browsers.

Syntax​

The HTML Doctype is declared as follows:

<!DOCTYPE html>

This declaration is case-insensitive and does not contain any closing tag.

HTML5 Doctype​

In HTML5, the Doctype declaration is simple and straightforward:

<!DOCTYPE html>

This Doctype is recommended for all HTML5 documents.

HTML 4.01 Doctype​

In HTML 4.01, the Doctype declaration is a bit complex and comes in three variations:

  1. Strict: This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements like <font>. Framesets are not allowed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
  1. Transitional: This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements like <font>. Framesets are not allowed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
  1. Frameset: This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

XHTML Doctype​

XHTML also has three document types: strict, transitional, and frameset, similar to HTML 4.01.

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

Conclusion​

The Doctype declaration is an essential part of any HTML document. It ensures that the browser interprets and displays your webpage as intended. Always make sure to include it at the top of your HTML document.

Remember, the simpler <!DOCTYPE html> declaration is recommended for HTML5 documents. It is recognized by all modern browsers, and will render your webpage in Standards Mode, ensuring consistency across different browsers and devices.