This would be the first in the series of posts I plan to do for HTML5 for ASP.NET Developers The first thing that everyone would have experienced is the HTML5 header tag.
The regular header tag that Visual Studio creates for ASP.NET Webforms is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
This would be the header tag present in the Master Page or the actual ASPX Page when you don’t inherit from a Master Page. Till HTML5 specifications started momentum, the general DOCTYPE was this lengthy and makes it hard to really remember. It also indicates a bit of versioning to HTML.
With HTML5, the header changes simply to
You would notice this tag quite prominently in all HTML5 conferences and articles.
Also, when you create an ASP.NET MVC 3 project using Visual Studio 2010, you would notice that this is the default header tag in your Layout.cshtml page (equivalent of Master Pages for MVC3)
Strictly speaking this tag is not mandatory for using other HTML5 tags. But having this would mean or decipher to the browser that this page uses HTML5 features.
Going forward VS11 and other project types would have this default header tag but as of now, we can modify our page header and simply put <!DOCTYPE html>
One interesting thing which was identified by my friend and team mate Rajasekharan Vengalil is that, if we remove the tag completely, the Internet Developer Toolbar defaults to Quirks Mode since its unable to find a DocType. The IE Developer Toolbar is a wonderful utility for web developers for testing, debugging and doing a variety of tasks. I had written a bunch of posts earlier on this here, here & here Plan to write more of these in near future
To demonstrate this behavior, lets fire up Visual Studio 2010 and create a File – New Project – ASP.NET Web Forms Application. Just leave the defaults and let the site be created.
I would assume you are running the IE9 as your default browser. If you haven’t installed it yet, you can download it from here
Lets open up the Site.Master. We will find in the top the default XHTML 1.0 strict doctype. Lets remove this header and then run the page. Once IE opens up with the Default Page, press F12 or choose “F12 developer tools” from the Tools menu in the right top.
Once it opens up, you would notice the following for “Browser Mode” and “Document Mode”
So, we need to have DocType mentioned in the Master Page or Layout Page. And all the more good, if we simply change it to <!DOCTYPE html>
Next, we will jump into some advanced stuff and then come back to the mark up enhancements.