HTML Doctypes – A Complete Guide

GK | July 25, 2015 | Technology | No Comments

Document type definition or DTD is often called Doctype. Most used doctype now is <!DOCTYPE html>.

Doctype declarations must be the very first thing in the HTML document before <html> tag. Doctype are simply a way to tell the browser or gives instruction to the browser about the HTML page version. So, always add Doctype declaration to your HTML document so that browser should know about which document it is rendering. If a page renders improperly with correct doctype that means page is not coded correctly.

If we don’t declare the doctype then we are forcing the browser to render the page in Quirks mode. Actually, the use of Doctype is to switch a browser between quirks and standard mode rendering. I will discuss about quirks and standard mode in browser later.

So actually, What Doctype does –

While we perform HTML validation test on a web page, it tells the HTML validator which version of (X)HTML standard web page coding is supposed to be comply with. Validator checks the code against the applicable standards then reports which portion of code do not pass html validation test.

Earlier Doctype was very long and hard to remember But now for HTML5, doctype is very short and easy to remember –

<!DOCTYPE HTML>

In HTML 4.01 , <!DOCTYPE> declaration refers to DTD, because HTML 4.01 based on SGML . And Doctype define the type of markup language so that browser can render content properly.

Lets first list down some common used doctype declaration then we will know about them in detail.

HTML5

<!DOCTYPE html>

HTML 4.01 Strict – This DTD contain all html elements but does not include deprecated elements.

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

HTML 4.01 Transitional – This DTD contain all html elements including deprecated elements but frame sets not allowed

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

HTML 4.01 Frameset – This DTD is equal to HTML 4.01 Transitional but also allows the use of frameset.

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

XHTML 1.0 Strict – Contain all html attribute and elements but does not includes deprecated elements and frameset. Markup should also be written as well-formed XML.

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

XHTML 1.0 Transitional – Contain all html attribute and elements , also includes deprecated elements but frameset not allowed. Markup should also be written as well-formed XML.

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

XHTML 1.0 Frameset– Its same as XHTML 1.0 transitional and also allow the use of frameset.

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

Doctype made up of following parts –

!Doctype – An identifier indicates to the user agent about the type of document.
HTML – Top level element- tells the browser what to be expect as top level element. For html and xhtml documents this would be <html>
Public– The availability . We use most doctype publicly available “Public”.

“-//W3C//DTD XHTML 1.0 Transitional//EN” – Formal Public Identifier. This identifies the Doctype .
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd – Indicated where the DTD for this Doctype can be found.