When learning HTML, one of the first things introduced is the DOCTYPE, which tells the web browser how to render the page. If that does not make sense, think of the DOCTYPE like so: if you meet someone who speaks English, then you reply in English because they understand it. If you meet someone who speaks Spanish, you either reply in Spanish or find someone who will kindly translate. What was the reason for getting a translator? Easy, you do not speak the Spanish language. The HTML DOCTYPE follows the same concept. It tells the browser what language it must speak.

There are many different variations of the DOCTYPE, each meaning something different. That is because three have been many versions and subsets of HTML since its creation in 1993. The DOCTYPE forms out there include but are not limited to:

  • <DOCTYPE html>
  • <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  • <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
  • <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">

If your eyes glazed over while reading those long, drawn out, confusingly alike yet different DOCTYPEs… I cannot blame you. 😛 Because they are so long yet alike, typing one of them is an absolute pain and near-impossible for the average dev to remember (even I cannot remember those). The question is, how do you know what HTML version/subset each DOCTYPE belongs to, and more importantly which one should be used?

Here, let me make it easy for you.

  • <DOCTYPE html>

That is officially all the DOCTYPE you need. 🙂 Unfortunately for you, this tutorial is not officially over yet. 😛

This particular DOCTYPE, known as the HTML5 DOCTYPE, was introduced with the HTML5 specification and is special in many ways. In fact, it is so special that it is the only DOCTYPE you should ever need. No piece of resistance (think The LEGO Movie®) is needed!

What makes the HTML5 DOCTYPE more special than all the other minifigures DOCTYPES, you ask? The answer is threefold.

  • It is the standardized version. On 28 October, 2014, HTML5 became the new standard version of HTML, replacing HTML 4 and XHTML 1.1. This makes the “HTML5 DOCTYPE” the only DOCTYPE that should be used. That does not mean you cannot use any of the other ones, but you really should not use them. 😉
  • It triggers the latest compatibility mode in every single browser. Presumably because it is not tied down to a specific HTML version, the HTML5 DOCTYPE triggers the latest standards compatibility a browser supports, even in Internet Explorer 6. This was discovered though lots of hard work. Take advantage of this fact and have piece of mind knowing that your visitor’s browser might just support the latest and greatest HTML5 tech to be thrown at us (even though it probably will not :P).
  • You gain access to all of the newest stuff. With the HTML5 spec completed and the official recommendation, both the W3C and WHATWG are turning their focus to HTML5.1 and HTML5.2, which will help refine any rough and/or volatile areas in HTML5 (hello <video> and <audio> tags) and any deferred items. You will need to use the HTML5 DOCTYPE as browsers work to finish and continue to implement the spec in order to access it all. While technically not HTML5 but instead included under the HTML5 umbrella term, CSS3 is still under active development, and browser support for all the new and changed stuff in that spec is less than the new semantic HTML elements. However, those new things can still be accessed when using the HTML5 DOCTYPE. Thus if you want to have access to the newest HTML5 and CSS3 implementations, you should use the HTML5 DOCTYPE.

As you have hopefully been able to see,  you should use the HTML5 DOCTYPE regardless, and definitely in any new project you make.

I know, that was a lame ending. 😛



2 thoughts on “DOCument TYPE: HTML

  1. It is amazing how the things get simpler as the time goes by. We used to have those lond document type declarations and not it is just two words. I would like to see they start simplifying javascript like that…

    1. Truthfully, I do not find JavaScript all that complicated. If anything, ES6 is making it more complicated, if you can imagine that, by added features we really don’t need (classes, for one) instead of fixing long-standing issues (complete lack of multi-line strings (although basic support is finally coming for this), removal of bad functions (eval()), and other things like that).

Comments are closed.