Tuesday, September 30, 2014

Tutorial on HTML5 Doctype

Posted by Suhel Sayyad
DOCTYPEs!  What are they? For non-technical people among us, it is only a single line declaration at the beginning of every HTML page. But did you ever wonder what they really all about? In this article, we will go through in-depth analysis of HTML5 DOCTYPE and DTD’s in general.
DOCTYPE has seen many changes and the real change came in HTML5. But before proceeding any further, we need to first know what DTD (Document Type Definition) is.
According to Wikipedia;
DTD or Document type definition is a set of markup declarations that define a document type for an SGML-family markup language (SGML, XML and HTML).

Looks confusing? In simple words DTD concerns about the attributes that are marked to set of pages in a website or different websites. It declares common set of rules for them.
Now, on the other hand, Document Type declaration is an instruction that associates a particular SGML or XML document (a single webpage) with a document type definition (DTD).
DOCTYPE are nothing but a special way to tell the set of rules for a particular webpage. 

Tutorial on HTML5 Doctype

Okie, enough of terminology, let’s move forward to the real thing.
Right click anywhere on the webpage and select “View page source”, and you will be showered by some alien looking code in front of you. You can also view the source code by pressing Ctrl-U. Though, it doesn’t work in Internet Explorer (many things doesn’t work in Internet Explorer and this is just one of them). In IE, you have to do it by the first method I showed you i.e. right clicking on the webpage anywhere and copy source code.
Next, you can either view the source code in the browser or copy the code into Notepad or any other code editors like Sublime Text, Bracket etc.
At the very top of the page, you can see the HTML5 DOCTYPE

<DOCTYPE html>

The term has special meaning to the page as it’s is the Document Type Declaration.
<!DOCTYPE html>
<html>
  <head>
    <title>
      XYZ
    </title>
  </head>
  <body>
    <p>
      A simple HTML5 Page
    </p>
  </body>
</html>

The DOCTYPE is case-insensitive this means it can be written in the any of the following ways:
  • <!doctype HTML>
  • <!DOCTYPE html>
  • <!dOcType Html>
There are more combinations but these will suffice for giving you the idea about its case insensitiveness.
The HTML5 DOCTYPE means that the page has been coded by HTML5 Specification instead of earlier HTML specifications like 4.01 and below.
Now, let’s dig deep into the components that the DOCTYPE must have. According to w3.org site, the HTML5 DOCTYPE must contain the following component and in the order they are mentioned.
  1. An ASCII case-insensitive string that is match for the string “<!DOCTYPE”.
  2. Space Characters (One or more).
  3. An ASCII case-insensitive string that is match for the string “html”.
  4. A DOCTYPE legacy string or an absolute permitted DOCTYPE string. This is optional.
  5. Space Characters (Zero or more).
  6. A ">" (U+003E) character.
In other words,
<!DOCTYPE html> , case-insensitively.
Too many technical terminologies can really take away the simplicity of HTML5. In short DOCTYPE serves its role to tell the browser that it is HTML5.