Doctypes in HTML documents

Ok, So  I was working with some javascript plugin the other day. It was based on jquery and I wanted to implement it with some page I was making. So I download and include the plugin and it seemed to be working fine with Firefox and Google chrome until I opened the page in Internet Explorer. I am using IE9 though but still Internet explorer does such a great job in destroying the CSS and javascript support and it’s totally outdated when it comes to meeting the current web standards. Nonetheless I realised how tough it is for web designers and developers to make their code browser compatible and allow code refactoring to comply with updation of web standards.

Anyway, so I check the dcumentation and some examples on the website of the developer of the plugin and the code seemed to be working great in IE9 on my computer. I realised that I had missed out on one thing in my HTML document i.e :

This fixed my problem with Internet Explorer but still I didn’t fully understand what I did there.

The first line in the code before the <html> tag is the doctype declaration where I am making a reference to some XHTML1.0 standard. XHTML1.0 was developed shortly after release of HTML 4 with the idea of generating a new hypertext markup language that is more structured and semantically correct. The XHTML system is based on the XML architecture of tags and is thus in some sense more “strict” when it comes to standards as compared to HTML which is a good thing because it makes it easier for the developers to write “correct” code and thus maintain it.

Now these standards can be defined in 3 modes:

  • Strict – Strongly recommended to match W3C standards for regular documents. For that we would go:

    or
  • Transitional – Which allows us to use some depreciated tags and elements.
  • Frameset

The .dtd (Document type definitions) files therefore provide the specifications for support of various elements or tags in our document(that we need to conform to). It works like an HTML validator in some sense. A complete table for support of various tags under these modes can be found  here.

Since we are sticking to the XHTML1.0 standards, it also requires us to have an xmlns declaration for the XHTML namespace in the root element of our document i.e the <html> tag. Imagine the HTML document like an XML document, so we get a tree of nodes with the <html> tag as the root. This is why we add :

So how did this make it work in Internet Explorer?

In an article by  Henri Sivonin, he explains this in great detail. Basically when we define the doctype of an HTML file we are not only defining standards, we also indirectly activate different browser modes with the doctypes. I am taking an excerpt from his article which clearly defines these browser modes:

Quirks Mode- In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s.

Standards Mode- In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. HTML5 calls this mode the “no quirks mode.”

Almost Standards Mode- Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “Almost Standards mode,” that implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. HTML5 calls this mode the “limited quirks mode.”

So this piece of code :

Forces the browser into the standards mode whereas the code I used in my document forces the browser (in this case IE9) to an almost standards mode which makes the code work.

What happens when we don’t give a doctype declaration?

The browsers go to the quirks mode and I quote Henri on what he has to say about the quirks mode-

If you are authoring new page, don’t use the Quirks mode. Just don’t. Use the Standards mode.

In addition to the interoperable Quirks mode, IE10 also has a mode called “Internet Explorer 5 Quirks”, which imitates IE 5.5 and is the mode that was known as the Quirks mode in IE6, IE7, IE8 and IE9.

 

So you can only imagine the horror of working with IE5.5 standards. Nonetheless IE10 has fixed this issue and I feel it’s very important for especially web designers  to check the cross browser comptability of their CSS or javascript because a lot of people out there still use Internet Explorer(trust me). Google chrome and Mozilla firefox are really forgiving and understanding browsers when it comes to rendering CSS :D

The moral of the story is, if you are ever developing a web page please do not forget to define the doctype of the document and with HTML5 is really simple(and because it is not XHTML , it’s case insensitive!):

Also if for some reason your javascript also doesn’t seem to be working like you expected in some browsers, you might want to check your doctype declaration.

For further reading – A beautifully written post on web semantics.