How to Declare DOCTYPE in HTML5?

Problem

May be you’re learning HTML for the first time or you’re already familiar with previous versions of HTML and want to upgrade your skill to HTML5. So, you’re looking for the code how to specify the DOCTYPE in HTML5.

Solution

The Code
HTML5 DOCTYPE declaration is very simple. Just write the following line at the very top of your HTML document.

<!DOCTYPE html>


Explanation
When you visit an HTML page in a browser, the browser processes the HTML code (visual 45) and displays its content to you. Before processing an HTML page, browser has to know the document type to properly process it. So, before writing the very first line of HTML code which is <HTML lang=”en”>, you have to inform browser that it is an HTML document and it is written in version 5.

In the above code line, DOCTYPE is the short for Document Type Declaration. And, the word “html” after DOCTYPE indicates that the following code is written in version 5 of HTML. To declare a HTML5 page, that is all what you need.

An HTML5 page with proper DOCTYPE declaration

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <body>
    </body>
</html>

Things to know about HTML5 DOCTYPE declaration

Here are some important things you should know about HTML5 DOCTYPE declaration-

  • Make DOCTYPE declaration the First line in the HTML document
    If you don’t declare <!DOCTYPE html> or write the declaration incorrectly, the browser will switch to the quirks mode. Moreover, anything written before DOCTYPE declaration will switch to the quirks mode in IE 9 or older. So, declare it at the very top in your HTML document to ensure that the browser will process the document in standard mode.

    In standard mode, browsers render pages according to the HTML and CSS specifications. On the other hand, in quirks mode, browsers use older browser techniques which were used before W3C standards were set and render pages accordingly.
  • DOCTYPE declaration is case-insensitive but use all capital in DOCTYPE
    DOCTYPE is case-insensitive in HTML5. That means all the following declarations are valid in HTML5-

    <!dOCTYPE html>
    <!DOCTYPe html>
    <!DoCtYpE html>
    <!DOCTYPE HTML>
    <!doctype html>
  • DOCTYPE declaration is required for page validation
    When you try to validate your HTML pages, the validator requires proper DOCTYPE declaration.