Supporters of End User

HTML5 and SharePoint 2010 - Part 2: An Overview (Continued)

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Branding; HTML5; CSS; Site Manager/Power User; MOSS; WSS; 2010

You may also be interested in: ViewPoint for SharePoint


Editor's note: Contributor Eric Overfield, a leading expert in SharePoint Branding and User Interface design, is President and co-founder of PixelMill. Follow him @ericoverfield

Get Started Now

So you want to get started and would like to start using HTML5 tags now? What to do? Don’t fret, it’s easy.

  1. Open you custom Master Page in SPD and near the top, normally just before your <html> tag, look for <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
  2. 2013-06-14-SharePoint2010HTML5-Part02-01.png

  3. Replace this with: <!DOCTYPE html>
  4. 2013-06-14-SharePoint2010HTML5-Part02-02.png

This is all you “have” to do, but you should do a little more. This would include modifying the meta X-UA-Compatible tag so that IE 9 can properly render HTML5, but instead of listing these suggestions here I would rather refer you to an excellent, recent blog post by Heather Solomon, Converting SharePoint master page to HTML5 (

If you want to just jump into HTML5 now, besides Heather’s post another great resource is Kyle Schaeffer’s HTML5 Master Page which you can learn about from his blog at or check out Dan Kline’s SharePoint 2010 HTML5 Master Page at codeplex:

Why move to HTML 5

Sure, HTML5 is the future, but it’s just an extension right, and your company is stuck with IE7. Why worry about it? Well first, the average Intranet, Extranet or Internet site seems to last about four to five years in my experience. I can pretty much guarantee that your company will not be using IE7 or IE8 for that long. May not seem like it, but they will have to upgrade. Microsoft will make sure of that. If you have an existing SharePoint site, it likely will not be worth moving to HTML5 just yet, but if you are going to build something new, or are upgrading the branding of your existing SharePoint site, you might as well build towards the future, not the past. HTML5 and CSS3 can provide cross device and browser compatibility that would be difficult to do otherwise. HTML5 allows you to eliminate the need for most if not all plugins including flash. Flash is a whole another issue which I will leave for later. HTML5 can help you target modern devices including mobile devices, tablets, smart phones etc that will likely start accessing your SharePoint implementation.  Also there are some really cool APIs baked into HTML5. For a quick overview of HTML5 API’s, please refer to an excellent .net Magazine article

Buyer Beware, Reasons not to move HTML5


Any time anyone has told me they want to move their site to HTML5 I first ask them what is the primary browser that will be loading their site. In many corporate Intranets, the answer is more often than not IE7 or IE8. As I have stated this isn’t a deal killer, nor should it stop you, but you must be aware that IE7 and IE8 do not recognize HTML5 or CSS3 so considerations must be made. In general, only modern browsers support HTML5, and then only portions of it. This is because the HTML5 standards have not been fully written, and the running joke is they won’t be until 2022 (although that year has been truly proposed as a reasonable guess). This doesn’t mean that HTML5 is half-baked in modern browsers; there is still a lot that you can use that isn’t going anywhere.

Next, and this can be a huge stumbling block for many, SharePoint Designer cannot yet understand HTML5 or CSS3. In fact SPD thinks that you are coding to IE6 standards when you set the HTML5 doctype.

  1. OOTB v4.master is recognized by SPD as XHTML 1.0 S (S for Strict) using CSS 2.1
  2. 2013-06-14-SharePoint2010HTML5-Part02-04.png

  3. Customized Master Page set to use HTML5 is recognized by SPD as for IE6 using CSS 2.1
  4. 2013-06-14-SharePoint2010HTML5-Part02-05.png

As we all know SPD likes to remove code that it does not understand, so at this point my suggestion is that if you want to work with HTML5 in SharePoint 2010 then you will only want to use the code view in SPD. Many people still use the Design View and that will cause many unexpected problems, but possibly it’s time to stop using Design View anyhow. Why? Well it looks like Design View is not coming back into SPD 2013. There is a thread on this at Technet started by Marc Anderson if you would like to learn more about this and the community’s reaction.

Now if you are building a new Intranet that will likely last for three-plus years, but your current user-base is 100% IE7, I can see why an argument in favor of staying away from HTML5 is prudent, but I would counter-argue that with Windows 8 launching soon, and the fact that IE7 is quite old now, companies will be hard pressed to upgrade to IE9 or IE10. Again, build towards the future, not the past.

Next Steps


Well I hope this has provided you a good overview of HTML5 with flavors of what is to come.  I just glanced over many tantalizing features and promises of HTML5 with almost no how-to’s. The next sieries of articles will contain many more concrete examples of how to use HTML5 and CSS3 within SharePoint, along with fun things to do with HTML5. We will review HTML5 Master Pages for SharePoint, how to deal with IE7/IE8, Media queries in CSS3 to help target mobile devices as well as HTML5 coding theory and tips and tricks. Until then, happy coding.


Notify me of comments to this article


Add Comment