You may have at one point of your HTML exploration journey asked this question before and wondered what is this DOCTYPE tag doing at the top of your HTML file.
We’ll answer your question in this article and share with you what the declaration does and why every web page needs to have this set correctly.
What is the DOCTYPE declaration?
To begin with, DOCTYPE declaration is the abbreviation for Document Type Declaration (DTD). It specifies the element type of the HTML root element and tells your browser what mode to render your HTML document in. The DOCTYPE declaration must precede any other markup in the document.
This is an example of how it may look like:
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
The first part of the declaration specifies the root-element (html) of your document, followed by the formal public identifier (-//W3C//DTD HTML 4.01//EN), and lastly the URI of the actual DTD (http://www.w3.org/TR/html4/strict.dtd)
What does the DOCTYPE declaration do?
As quoted from the W3C webpage:
A DOCTYPE is a required preamble.
DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.
In addition, the DOCTYPE declaration also tells the HTML validator which version of the XHTML standard your web page is coded in. When you validate your web page, the validator will check your codes against the applicable standards and report back anything that does not comply with the standards.
What are the different standards available?
There are primarily 3 types of DTD standards that W3C recommends.
1) HTML 4.01 Strict DTD
The Strict DTD emphasis on the separation of your content and presentation codes. It does not allow you to include presentation codes (e.g. <b>, <i>, <font>, etc) in your HTML page. You have to use a Cascading Style Sheet (CSS) to handle all your presentation. This is the W3C recommended standard for new HTML documents.
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
2) HTML 4.01 Transitional DTD
As the name suggests, Transitional DTD is used in situations where you are transiting from pre-HTML4 to modern markup. It allows the inclusion of presentation codes (e.g. <b>, <i>, <font>, etc) but does not include frame-related codes. The Transitional DTD allow some older PUBLIC and attributes that have been deprecated in the Strict DTD to be used.
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
3) HTML 4.01 Frameset DTD
This is similar to the Transitional DTD except that it allows frame-related codes. Frames have been deprecated by W3C.
|
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
Which DOCTYPE should I use?
W3C recommends the Strict DTD for all new web pages. If you are transitioning from pre-HTML 4 (e.g. HTML 2.0, 3.2) documents, you can use the HTML 4.01 Transitional until you transfer all your presentation markups to CSS.
HTML 5 DTD-less DOCTYPE
In HTML 5, there is only one simple DOCTYPE declaration. There’s no need to reference to any DTD URI.
|
1 |
<!DOCTYPE HTML> |
How can I validate my HTML codes?
You can use the HTML validator at W3C to check your HTML codes for compliance.
What if the DOCTYPE is not present in my HTML document?
HTML documents that do not have a DOCTYPE declaration will be rendered in backwards compatibility mode (Quirk Mode). The browser will assume that your HTML document is an older document written before DOCTYPE is available. You will also not be able to use HTML validators to check your codes.
