HTML 5 Tutorial – Workarounds

Yesterday we took a look at the new HTML 5 Tags that are now in place and in preparation to get started on our HTML 5 template tutorial we will begin to get ready the document to get coding. This contains a download file with all contents describe in tutorial.

Unfortunately older and Internet Explorer browsers do not support HTML5 elements so there are a few workarounds we can put in place before we start to get stuck in to development. (If you wish to see HTML 5 Compatibility visit for all CSS3/HTML5 support.)
HTML5 HTML 5 Tutorial   Workarounds
At this moment in time there are a few elements that you can use without any workarounds at all on the older browsers for example:-

HTML5 DOCTYPE

We can now use <!DOCTYPE html> instead of the more lengthy <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

HTML5 Charset

Now use <meta  charset=”utf-8″ /> instead of <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

HTML5 Script and Style

Instead of stating the type of script of style or you are using eg: <style type=”text/css”></style> you can use the following <style></style> removing the type of file altogether.

HTML5 Workarounds

Now for the workarounds. As Internet Explorer will not support the rendering of some of the new structural HTML5 Tags we need to use a workaround to force IE to display these elements as blocks. This can be defined in your styles -

aside, article, figure, footer, header, nav, section { display: block; }

Now we need to gain access to a little script which will also help IE to acknowledge the new elements. To add this to your site simple add the code below.


<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

With the conditional elements wrapped around the link to the js file it will only run if IE is the browser that visits the site.

This will get you ready to start coding up in HTML 5. Below is a template to download outlining everything we have completed above with a couple of extras including a specific IE style sheet.

Download HTML5 Files

Tomorrow – The HTML 5 Structure.
Yesterday – The New HTML5 Tags

Related posts:

  1. HTML 5 Tutorial – Tags
  2. HTML 5 From Start to Finish
  3. HTML 5 Demos
  4. HTML5 Template – Tutorial
  5. A Simple HTML5 Template Tutorial

Tags: , , ,

Leave a Reply


Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482