You may also be interested in: O'Reilly - SharePoint 2010 at Work
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
The benefits of html5shim include enabling the rendering of HTML5 elements such as <header>, <footer>, <article>, <section>, <nav> in IE8-. Without html5shim, IE8- will render the content in new HTML5 elements in a similar manner as it would to content in a div, but the unrecognized HTML5 elements cannot contain children, nor will CSS be applied. Big problem! Since this is not good, html5shim automagicially allows older versions of IE to at least render the page and apply the proper styling to the new HTML5 elements. Html5shim will also recognize any custom HTML5 elements you may use such as <customnav>, <myaside>, or most any element name you decide to create. Nifty.
Note: Html5shim does not add new multimedia capabilities such as the <canvas>, <audio> or <video> support to IE8-. Currently there is no simple workaround for this.
Additional Steps (Optional)
Now that we understand the first five steps, let’s move on. There are a few more general updates that could be made to the new HTML5 Master Page including removing the trailing forward slash (/) before closing an element when the element does not need a closing tag. As an example, consider our meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
In XHTML 1.0 Strict the trailing / before the end of the meta element was required, at least to be standards compliant. Sure, almost all browsers did not actually “require” it, but it was supposed to be there. Well in HTML5, that trailing / is not required, thus this element could be modified to:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
My opinion though, I suggest leaving the trailing forward slashes in but that is because as a coder, one of my passions lies in beautiful code and the trailing forward slash properly closes an otherwise open element.
HTML5 also allows for the shortening of a few additional elements. <script> and <link> elements no longer require a “type” value and the character encoding as specified in a meta tag has been greatly compacted. A resource on these additional modifications can be found at Heather Solomon’s blog post Convert SharePoint 2010 master page to HTML5.
As I mentioned in my previous article there are a few HTML5 ready Master Pages for SharePoint 2010 that have already been created that can provide you a boilderplate Master Page to speed your learning curve and deployment. Three that I recommend you consider include:
Kyle Schaeffer’s Responsive HTML5 Master Page
Dan Kline’s SharePoint 2010 HTML5 Master Page at Codeplex:
Heather Solomon recently updated her “Just The Essentials” Master Pages for SharePoint 2010 to include HTML5 ready Master Pages
My suggestion is that you download all three of these and install them on your development environment (Possibly on one of your CloudShare servers? Do you not yet know about CloudShare? It’s one the nicest developments tools I know of for SharePoint. Create a new SharePoint environment, including a SharePoint 2013 Preview environment in minutes. Then if you accidently break it you can start over in a few minutes more with a fresh rebuild. No, I am not a sales rep, I simply think it’s a great tool.) Review each Master Page and the included css and pick and chose from these different implementations. Each Master Page is slightly different and may or may not fit your own style. Using a pre-built Master Page is one of the quickest ways to get started with HTML5 and SharePoint. Leverage the experience of these experts!
I know that you are anxious to jump even deeper into HTML5 and CSS3 but there is still more foundation we want to build. There are more issues with IE7 and IE8 that we want to discuss as well as another great tool for HTML5, CSS3 and browser feature detection, that being Modernizr. We will touch on this next time before moving onto cool HTML5 feature and tricks. Until then, happy coding.