{"id":228,"date":"2009-07-19T17:21:19","date_gmt":"2009-07-19T16:21:19","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?p=228"},"modified":"2010-10-29T13:18:55","modified_gmt":"2010-10-29T12:18:55","slug":"html5","status":"publish","type":"post","link":"https:\/\/www.simonbattersby.com\/blog\/2009\/07\/html5\/","title":{"rendered":"New HTML5 elements and IE8"},"content":{"rendered":"<p>I was reading a discussion on a forum last week about HTML5, and thought I&#8217;d have a quick mess around with it to see what happened with various browsers. I created a <a title=\"HTML5 test page\" href=\"\/test\/five_noblock.htm\">test page<\/a> using the new tags provided by HTML5 (&lt;header&gt;, &lt;footer&gt; etc.). <\/p>\r\n\r\n<p>This page doesn&#8217;t display correctly in any browser that I tested (FF3, IE6\/7\/8, Chrome2, Safari 4, Opera 9.63 or even Opera 10 beta2), although FF, Chrome, Safari and Opera all display the <code>&lt;aside&gt;<\/code> element correctly for some reason.<\/p>\r\n\r\n<p>I then applied <code>display:block<\/code> to the css for all the new elements and tried again <a title=\"HTML5 test page with display:block\" href=\"\/test\/five.htm\">here<\/a>.<\/p>\r\n\r\n<p>Slightly to my surprise the page looks fine in FF, Opera , Chrome and Safari. Slightly less surprisingly, it fails horribly in IE6 and IE7. The biggest surprise for me was that it looks just as bad in IE8. I suspect, on reflection, that the browsers that worked did so because of their treatment of unrecognised html elements, rather than their support for the new HTML5 elements.<\/p>\r\n\r\n<div id=\"web_2col\">\r\n<img loading=\"lazy\" decoding=\"async\" src=\"\/images\/blog\/HTML5_IE8.jpg\" alt=\"HTML5_IE8\" title=\"HTML5_IE8\" width=\"256\" height=\"146\" \/><img loading=\"lazy\" decoding=\"async\" src=\"\/images\/blog\/HTML5_Opera.jpg\" alt=\"HTML5_Opera\" title=\"HTML5_Opera\" width=\"256\" height=\"155\" \/>\r\n<\/div>\r\n\r\n<p>Here&#8217;s what it looks like in IE8 on the left (pretty much the same as in IE7 and IE6) and here&#8217;s how it should look in Opera 9 on the right. I have to say I expected it to be OK in IE8, given that&#8217;s the pretty much the newest browser I tested with. So much for HTML5 support in IE8&#8230;<\/p>\r\n\r\n<p>Conclusion: being able to use even the simpler features of HTML5 looks a long way off&#8230;<\/p>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>I was reading a discussion on a forum last week about HTML5, and thought I&#8217;d have a quick mess around with it to see what happened with various browsers. I created a test page using the new tags provided by HTML5 (&lt;header&gt;, &lt;footer&gt; etc.). This page doesn&#8217;t display correctly in any browser that I tested [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[9],"class_list":["post-228","post","type-post","status-publish","format-standard","hentry","category-web-design-and-build","tag-browsers"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":0,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/posts\/228\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/categories?post=228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/tags?post=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}