## Demo/About/Documentation HTML5 shiv

IE8- isn't capable of rendering HTML5 elements. Webshims lib in combination with Modernizr automatically fixes this issue and adds WAI-ARIA landmarks to enable accessibility of HTML5.

### Dynamically adding HTML5 markup

Additionally it implements the following manipulation methods `.updatePolyfill()`, `.htmlPolyfill()`, `.appendPolyfill()`, `.prependPolyfill()`, `.afterPolyfill()`, `.beforePolyfill()` `.replaceWithPolyfill()`, `.appendPolyfillTo()`, `.prependPolyfillTo()`, `.insertPolyfillAfter()`, `.insertPolyfillBefore()` and `.replacePolyfillAll()` to also allow dynamic creation of HTML5 elements.

`$('#my-id').appendPolyfill('<section><form action="#"><input type="text" placeholder="hello this is required" required="required" name="test" /><input type="date" required="required" name="test2" /><input type="submit" /></form></section>');`

### Using webshims' `updatePolyfill` method with Backbone/jQuery mobile/Knockout

If a plugin, script or framework is used, which uses a "normal" JS/jQuery manipulation method instead of the corresponding webshims enhanced manipulation method to generate new HTML5 content (i.e.: `.html()` instead of `.htmlPolyfill()`), the method `.updatePolyfill()` can be used to polyfill the dynamic content:

`$('#my-dynamic-container').load('ajax/test.html', function(){ $(this).updatePolyfill(); });`

#### jQuery mobile example

`//call webshims.polyfill() before domready $.webshims.polyfill(); $(function(){ //bind to the pageinit event after domready... $(document).on('pagebeforecreate', function(e){ //...and call updatePolyfill on the changed element container $(e.target).updatePolyfill(); }); });`

For jQuery Mobile see also webshims and jQ mobile

### html5.shivMethods config

The html5shiv also fixes dynamically creating HTML5 elements in IE6/7/8. In case you do not create HTML5 elements dynamically using JavaScript or you are using jQuery 1.7+ manipulation methods for creating HTML5 elements, you should set html5.shivMethods to false:

`<script> // set options for html5shiv *before* embeding html5shiv window.html5 = { shivMethods: false }; </script> <script src="modernizr-with-shiv.js"></script>` `<script src="modernizr-with-shiv.js"></script> <script> // set options for html5shiv *after* embeding html5shiv window.html5.shivMethods = false; </script>` `<script> // set options for html5shiv if(!window.html5){ window.html5 = {}; } window.html5.shivMethods = false; </script>`

### Links about shiv

- Using HTML5 semantic elements today by Nicholas C. Zakas
- HTML5 enabling script by Remy Sharp
- HTML5 Shiv by John Resig
- innerShiv by Joe Bartlett