HTML5 and Visual Studio 2010
- by Harish Ranganathan
All of us work with Visual Studio (or the free Visual Web Developer Express Edition) for developing web applications targeting ASP.NET / ASP.NET MVC or Silverlight etc., Over the years, Visual Studio has grown to a great extent. From being a simple limited functionality tool in VS.NET 2002 to the multi-faceted, MEF driven Visual Studio 2010, it has come a long way. And as much as Visual Studio supports rapid web development by generating HTML mark up, it also added intellisense for some of the HTML specifications that one has otherwise monotonously type every time. Ex.-
In Visual Studio 2010, one can just type the angular bracket “<” and then the first keyword “h” or “x” for html or xhtml respectively and then press tab twice
and it would render the entire markup required for XHTML or HTML 1.0/1.1 strict/transitional and the fully qualified W3C URL.
The same holds good for specifying HTML type declaration. Now, the difference between HTML and XHTML has been discussed in detail already, though, if you are interested to know, you can read it from http://www.w3schools.com/xhtml/xhtml_html.asp
But, the industry trend or the buzz around is HTML5. With browsers like IE9 Beta, Google Chrome, Firefox 4 etc., supporting HTML5 standards big time, everyone wants to start developing HTML5 based websites.
VS developers (like me) often get the question around when would VS start supporting HTML5.
VS 2010 was released last year and HTML5 is still specifications under development. Clearly, with the timelines we started developing Visual Studio (way back in 2008), HTML5 specs were almost non-existent. Even today, the HTML5 body recommends not to fully depend on the entire mark up set as they are still under development specs and might change in the future.
However, with Visual Studio 2010 SP1 beta, there is quite a bit of support for HTML5 based web development. In fact, one of my colleagues pointed out that SP1 beta’s major enhancement is its ability to support HTML5 tags and even add server mode to them.
Lets look at the existing validation schema available in Visual Studio (Tools – Options – Validation)
This is before installing Visual Studio 2010 SP1 Beta. Clearly, the validation options are restricted to HTML 4.01 and XHTML 1.1 transitional and below.
Also, lets consider using some of the new HTML5 input type elements. (I found out this, just today from my friend, also an, ASP.NET team member)
<input type=”email”> is one of the new input type elements according to the HTML5 specification. Now, this works well if you type it as is in Visual Studio and the page renders without any issue (since the default behaviour is, if there is an “undefined” type specified to input tag, it would fall back on the default mode, which is text.
The moment you add <input type=”email” runat=”server” >, you get an error
Naturally you don’t get intellisense support as well for these new tags.
Once you install Visual Studio 2010 Service Pack 1 Beta from here (it takes a while so you need to be patient for the installation to complete), you will start getting additional Validation templates for HTML5, as below:-
Once you set this, you can start using HTML5 elements in your web page without getting errors/warnings. Look at the screen shot below, for the new “video” tag which is showing up in intellisense (video is a part of the new HTML5 specifications)
note that, you still need to hook up the <!DOCTYPE html /> on the top manually as it doesn’t change automatically (from the default XHTML 1.0 strict) when you create a new page.
Also, the new input type tags in HTML5 are also supported
One, can also use the <asp:TextBox type=”email” which would in turn generate the <input type=”email”> markup when the page is rendered. In fact, as of SP1 beta, this is the only way to put the new input type tags with the runat=”server” attribute (otherwise you will get the parser error mentioned above. This issue would be fixed by the final release of SP1 beta)
Going further, there may be more support for having server tags for some of the common HTML5 elements, but this is work in progress currently.
So, other than not having runat=”server” support for the new HTML5 input tags, you can pretty much build and target HTML5 websites with Visual Studio 2010 SP1 Beta, today.
For those who are running Visual Studio 2008, you also have the “HTML5 intellisense for Visual Studio 2010 and 2008” available for download, from http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d/
Note that, if you are running Visual Studio 2010, the recommended approach is to install the SP1 beta which would be the way forward for HTML5 support in Visual Studio.
Of course, you need to test these on a browser supporting HTML5 such as IE9 Beta or Chrome or FireFox 4. You can download IE9 Beta from here
You can also follow the Visual Web Developer Team Blog for more updates on the stuff they are building.
Cheers !!!
