What’s the Story for HTML5 with SharePoint 2010?

Despite the draft status, HTML5 is indeed a hot topic this year. Audio/Video tag and codec war, Canvas, Local Storage… So now the question comes: Does/Will SharePoint 2010 support HTML5?

Depending on what you want, the answer may be quite different. I always ask some questions before I answer the supportability question: What do you mean by support? What do you want to achieve?

So here’s why I’m asking:

  1. Most of the time it’s up to browsers to support HTML5 content rendering, not SharePoint. If you implemented new features in HTML5 on your site, it may means people with legacy browsers cannot use it. So either you need to provide a workaround, or you should make sure every visitor of your content is using IE9/Firefox/Safari/Chrome/Opera, etc. In some scenarios this make sense, for example you want to build a SharePoint video site dedicated to iPad users, but most of the time you will have mixed browsers.
  2. Although browsers gradually started to support *some* of the new features in HTML5, it is still in draft. Which means a lot of things can still change, or be implemented, for example the codec for <video> tag. Microsoft and Apple have chosen H.264 for native support, while Mozilla, Google and Opera is more on the WebM/VP8 side (although a VP8 codec installation can help IE9 to support it). The editor of HTML5 specification estimated it will reach W3C Candidate Recommendation stage during 2012, and W3C Recommendation stage in the year 2022 or later.
  3. Many scenarios are also easy to achieve by using Silverlight and even Flash. HTML5 is technically good, but that does not directly turn it into a wonderful experience for web designers all the time. If you know who your audience will be, what browser/OS they mainly use, and consider the experience/efficiency of your implementation team, HTML5 may or may not be the best choice.

If you answered the questions and considered the above points, you will have a general idea whether you want to use HTML5 or not in your project. Now the question turns into another way: Are you trying to get HTML5 tags into SharePoint 2010 pages, or are you trying to make SharePoint 2010 to output HTML5 pages that can be validated?

 

  • If you want to use HTML5 tags in SharePoint 2010 pages, it is certainly fine – it’s up to the browsers to render those tags. Here’s an example for <video> tag. Please use IE9 Platform Preview 3, Safari or Chrome to visit it since they support H.264 codec. (A mp4 file loaded into Shared Documents, and a Content Editor Webpart is used to put in <video> tag)
    https://www.sharepointisawesome.com

    snap0163
    The implementation is done by using Content Editor Webpart. You may also notice there’s another HTML5 Canvas demo here. This is just one of the ways of adding HTML5 tags into the page. As long as the browsers can render it, it works. And this is also supported just like to add generic HTML content into SharePoint pages. Since you are adding HTML5 tags inside a XHTML 1.0 page, a complex HTML5 application may or may not have issues, you are responsible for testing of the code you added.

  • If you want make SharePoint to output native HTML5 pages and get validated, then the answer will be no. There’s not much I can say regarding the future versions of SharePoint, but this will not be supported in the SharePoint 2010 timeframe. SharePoint 2010 is designed to output content in XHTML 1.0 natively. It is impossible to get all the components completely rewritten to produce validated HTML5 pages, and not to mention HTML5 is still in draft, and will still be in draft for several years.

 

Hope this helps to clarify the questions of HTML5 and SharePoint 2010. Smile

#Update: IE9 Platform Preview 3 is released for public: https://ie.microsoft.com/testdrive/ 
It supports audio and video tags, plus canvas. My demo is working in the preview, but you have to select "Force IE9 Document mode" in the menu since we are not outputing native HTML5 pages. The test result shows a lot of progress has been made in IE9 development.

 

Jie.