HTML5 and Visual Studio 2010

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

image

and it would render the entire markup required for XHTML or HTML 1.0/1.1 strict/transitional and the fully qualified W3C URL.

image

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)

image

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

image

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:-

image

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)

image

 

 

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

image

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 !!!

Print | posted on Monday, February 7, 2011 4:35 PM

Comments on this post

# re: HTML5 and Visual Studio 2010

Requesting Gravatar...
HTML5 was quite amazing because it help programmers easy do their task. Visual Studio 2010 is a good software. Thanks a lot
Left by Eye Webmaster on Feb 15, 2011 11:42 AM

# AS

Requesting Gravatar...
It is known that Visual Studio 2010 was originally released without HTML5 support. But now SP1 finally add support for it. This information was very useful and helpful! I looked through several other pages, but after reading your explanation, everything made sense. Thank you a lot for sharing.
Left by Dissertation on Mar 18, 2011 6:06 PM

# re: HTML5 and Visual Studio 2010

Requesting Gravatar...
Hope it supports most of the HTML5 elements. I just installed an addon for Expression Web to support HTML5.
Left by çeviri on Oct 14, 2012 3:26 PM

# re: HTML5 and Visual Studio 2010

Requesting Gravatar...
There are many updates about VS 2010 version. This one has helped me in working easily with the version. I would like to see updates on the latest visual studio version. If possible please share. Thank you.
magnets
Left by lama on Jun 10, 2014 4:09 PM

# re: HTML5 and Visual Studio 2010

Requesting Gravatar...
This generation people are always busy with their works and education. Because of those busy schedule they all mostly affected by stress. We can’t reduce our work and duties but, we are able to control our stress. Most of them asking by our self; how it will be possible? It will possible by taking their enough leisure time by indulge some indoor games like chess, kliky balls and etc…
Left by Marina joes on Jan 19, 2015 4:33 PM

# re: HTML5 and Visual Studio 2010

Requesting Gravatar...
There are lots of updates in HTML5 and Visual Studio 2010, but this is very easy to access. elite shower
Left by JackiePugh on Jul 27, 2015 4:45 PM

Your comment:

 (will show your gravatar)