Why we type ! before DOCTYPE ? what is the role of ! in <!DOCTYPE html>?


<Below this line, add a link to the EXACT exercise that you are stuck at.>

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>


Replace this line with your code.

<do not remove the three backticks above>
1 Like

It tells the browser that your code is html so it can understand it. It also tells what kind of html to expect (html4 or html5) or if it’s xml etc.

The use of the exclamation mark or point ( ! ) before DOCTYPE is a historical leftover from earlier versions of HTML. Up to HTML5, HTML (the language itself) was written in SGML (Standard Generalised Markup Language). In SGML <! indicates it is a markup declaration, rather than being an actual markup element. You’ll see that comments in HTML also start with <! too. If you think about it you’re not actually marking anything up with the DOCTYPE declaration or when you insert a comment, you’re just declaring “this is a HTML document” or “this is a comment”.

And why do you need a DOCTYPE anyway? Well, again due to it’s SGML roots, previous HTML versions had their syntax defined in a document called a DTD (document type definition). All SGML documents need a DTD, otherwise the parser (in this case our web browser) wouldn’t know how to translate the code into what you see on the screen.

Here’s what the old HTML 4 (Strict) DOCTYPE looked like:

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

See how it tells the browser to use the HTML 4.01 DTD written by the W3C and the URL where it is located?

Now with HTML5 we don’t really need a DOCTYPE as there is no HTML5 DTD for browsers to refer to. However, browsers can behave a little bit funny without the DOCTYPE, again for historical reasons. Going back to the early days of Netscape Navigator and Internet Explorer, when the web started standardizing on HTML, the browser manufacturers were concerned that if their web browsers started following the new standards, old non-standard web sites might break. So they introduced a feature called “quirks” mode which was triggered when a web page had no DOCTYPE. This alternative mode would allow non-standard websites to continue to work. The DOCTYPE is used in HTML5 to make sure the browser doesn’t switch into “quirks” mode and remains in full standards mode, i.e. the HTML you write does what you expect it to. There can be a lot of “quirks” in “quirks” mode! Here’s a list of how Firefox differs in “quirks” mode:

Hope that helps (and isn’t too complicated!)


Dear Sir
Thanks a lot for clearing my doubt.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.