<h1 id="html5">HTML5 Shim</h1>

<h2>Target HTML5 and CSS3 elements safely</h2>
<div class="intro">
    Want to start using HTML5 semantics but are put off by it because you still have a large audience of users using non compatible browsers ?               
</div>
<div class="code-example" data-title="HTML5 & CSS3">
    <p>DIV's are good, but HeadJS let's you be semantic and futuristic</p>

{% highlight html %}
/* Use CSS3 semantics */
<style>
    article { text-shadow:0 0 1px #ccc; }
</style>
 
<!-- works in IE too -->
<article>
    <header></header>
    <section></section>
    <footer></footer>
</article>
{% endhighlight %}

    <p>HeadJS will detect if IE < 9 is present, and inject the necessary HTML5 Shim for you.</p>
    <p>You will still need to use a HTML5 enabling stylesheet for it to work like <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>, or just <a href="/site/assets/css/html5.min.css" target="_blank">download our file</a> and reference it in your HEAD.</p>

{% highlight html %}
<html>
    <head>
        <link rel="stylesheet" href="html5.min.css" />
        <script src="head.min.js"></script>

        /* Use CSS3 semantics */
        <style>
            article { text-shadow:0 0 1px #ccc; }
        </style>
    </head>
    <body>
        <!-- works in IE too -->
        <article>
            <header></header>
            <section></section>
            <footer></footer>
        </article>
    </body>
</html>
{% endhighlight %}

    <p>You can also enable/disable the injection via the <a href="#configuration">configuration</a> section.</p>
    ---
    <p><em>But before you start believing all the hype around HTML5, be sure to give this a read ..you'll be surprised !</em></p>
    <figure>
      <a href="http://www.truthabouthtml5.com/#fivereasons" target="_blank"><img src="/site/assets/img/truth-about-html5.jpg" alt="The Truth About HTML5" width="51" height="81"></a>
      <figcaption><em>The Truth About HTML5</em></figcaption>
    </figure> 


    <div style="width:100%;">                            
        <div onclick="blog.loadComments(this, 'api/1.0.0/html5', 'Leave a comment')" style="cursor: pointer;">
            <h2>Show Comments</h2>
        </div>
    </div>
</div>