HTML5 Experiments

The goal of these experiments is to demonstrate all new HTML5 elements behaving properly on all major browsers .

What constitutes behaving properly?

Proper behavior for new HTML5 elements would be rendering on the page as all markup had intended; in structure, style, and functionality. This would also include advanced scenarios where markup is created or modified with javascript.

Phase #2

Experiment #1

Create a blank page with a shiv and add the HTML5 section element with document.body.innerHTML. Observe the page and report the results of the rendered HTML by alerting document.body.innerHTML. 

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8" />
	<title>HTML5 Phase 2 Experiment</title>
	<script type="text/javascript">
	document.createElement('section');
	</script>
</head>
<body></body>
<script type="text/javascript">
document.body.innerHTML = '<section style="color: red;">I am inside an HTML5 element!<section>';
alert(document.body.innerHTML);
</script>
</html>

A copy of this test is available here.

Results

Browser Screenshot Alerted document.body.innerHTML
Firefox 3.x
 
<section style="color: red;">I am inside an HTML5 element!<section>
Google Chrome 4.x
 
<section style="color: red;">I am inside an HTML5 element!<section>
Apple Safari 4.x
 
<section style="color: red;">I am inside an HTML5 element!<section>
Opera 10.x
 
<section style="color: red;">I am inside an HTML5 element!<section>
Internet Explorer 8
 
<section style="COLOR: red">I am inside an HTML5 element!<section>
Internet Explorer 7
 
<section style="COLOR: red">I am inside an HTML5 element!<section>
Internet Explorer 6
 
<section style="COLOR: red">I am inside an HTML5 element!<section>

Analysis

All browsers display this example correctly, and all browsers appear the same. Internet Explorer 6 and 7 have additional padding at the top. This difference would not affect the display of the section element. All browsers display the correct HTML on alert. Internet Explorer 6, 7, and 8 all capitalize the inline style attribute's color property, but this difference would not affect the display of the section element.

It appears the innerHTML is working because the document has already been shived.

Experiment #2

Create a blank page with a shiv, create a div with document.createElement, add the HTML5 section element with innerHTML, then append that div to the page with document.body.appendChild. Observe the page and report the results of the rendered HTML by alerting document.body.innerHTML. 

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8" />
	<title>HTML5 Phase 2 Experiment</title>
</head>
<body></body>
<script type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script>
</html>

A copy of this test is available here.

Results

Browser Screenshot Alerted document.body.innerHTML
Firefox 3.x
 
<script type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="color: red;">I am inside an HTML5 element!</section></div>
Google Chrome 4.x
 
<script type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="color: red;">I am inside an HTML5 element!</section></div>
Apple Safari 4.x
 
<script type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="color: red;">I am inside an HTML5 element!</section></div>
Opera 10.x
 
<script type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="color: red;">I am inside an HTML5 element!</section></div>
Internet Explorer 8
 
<SCRIPT type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</SCRIPT>

<DIV>I am inside an HTML5 element!</SECTION></DIV>
Internet Explorer 7
 
<SCRIPT type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</SCRIPT>

<DIV>I am inside an HTML5 element!</SECTION></DIV>
Internet Explorer 6
 
<SCRIPT type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</SCRIPT>

<DIV>I am inside an HTML5 element!</SECTION></DIV>

Analysis

Not all display this example correctly, and not all browsers appear the same. Internet Explorer 6, 7, and 8 are not showing red text. Internet Explorer 6 and 7 again have additional padding at the top, but this difference would not affect the display of the section element. All browsers include the the script element as part of the body. Not all browsers display the correct HTML on alert. Internet Explorer 6, 7, and 8 have dropped the opening section element, but have kept the closing. Internet Explorer 6, 7, and 8 also capitalize the script, div, and closing section elements, but these differences would not affect the display of the section elements.

It appears the innerHTML has failed because the div was not attached to a shived document when the innerHTML was set.

Experiment #3

Create a blank page with a shiv, create a div with document.createElement, append that div to the page with document.body.appendChild, then add the HTML5 section element with innerHTML (this test is very similar to the previous test, but with the last two steps reversed). Observe the page and report the results of the rendered HTML by alerting document.body.innerHTML. 

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8" />
	<title>HTML5 Phase 2 Experiment</title>
</head>
<body></body>
<script type="text/javascript">
var div = document.createElement('div');
document.body.appendChild(div);
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
alert(document.body.innerHTML);
</script>
</html>

A copy of this test is available here.

Results

Browser Screenshot Alerted document.body.innerHTML
Firefox 3.x
 
<script type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="color: red;">I am inside an HTML5 element!</section></div>
Google Chrome 4.x
 
<script type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="color: red;">I am inside an HTML5 element!</section></div>
Apple Safari 4.x
 
<script type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="color: red;">I am inside an HTML5 element!</section></div>
Opera 10.x
 
<script type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="color: red;">I am inside an HTML5 element!</section></div>
Internet Explorer 8
 
<SCRIPT type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</SCRIPT>

<DIV><section style="COLOR: red;">I am inside an HTML5 element!</section></DIV>
Internet Explorer 7
 
<SCRIPT type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</SCRIPT>

<DIV><section style="COLOR: red;">I am inside an HTML5 element!</section></DIV>
Internet Explorer 6
 
<SCRIPT type="text/javascript">
var div = document.createElement('div');
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</SCRIPT>

<DIV><section style="COLOR: red;">I am inside an HTML5 element!</section></DIV>

Analysis

All browsers display this example correctly, and all browsers appear the same. Internet Explorer 6, 7, and 8 are now showing red text. Internet Explorer 6 and 7 again have additional padding at the top, but this difference would not affect the display of the section element. All browsers display the correct HTML on alert. All browsers include the the script element as part of the body. Opera 10.x, Chrome 4.x, and Safari 3.x add a space where the body would have been closed. Chrome 4.x, Safari 3, Internet Explorer 6, 7, and 8 do not display the tabbing. Opera 10.x, Internet Explorer 6, 7, and 8 all capitalize the script element, and all IEs no longer capitalized the section element but still capitalized the inline style attribute's color property, but these differences would not affect the display of the section elements.

It appears the innerHTML is working because the div was attached to a shived document before the innerHTML was set.

Experiment #4

Create a blank page with a shiv, create a documentFragment with a shiv, then create a div with document.createElement, append that div to the documentFragment, then add the HTML5 section element with innerHTML. Observe the page and report the results of the rendered HTML by alerting document.body.innerHTML. 

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8" />
	<title>HTML5 Phase 1 Experiment</title>
	<script type="text/javascript">
	document.createElement('section');
	documentFragment = document.createDocumentFragment();
	if (documentFragment.createElement) documentFragment.createElement('section');
	</script>
</head>
<body></body>
<script type="text/javascript">
var div = document.createElement('div');
documentFragment.appendChild(div);
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script>
</html>

A copy of this test is available here.

Results

Browser Screenshot Alerted document.body.innerHTML
Firefox 3.x
 
<script type="text/javascript">
var div = document.createElement('div');
documentFragment.appendChild(div);
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="COLOR: red;">I am inside an HTML5 element!</section></div>
Google Chrome 4.x
 
<script type="text/javascript">
var div = document.createElement('div');
documentFragment.appendChild(div);
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="COLOR: red;">I am inside an HTML5 element!</section></div>
Apple Safari 4.x
 
<script type="text/javascript">
var div = document.createElement('div');
documentFragment.appendChild(div);
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="COLOR: red;">I am inside an HTML5 element!</section></div>
Opera 10.x
 
<script type="text/javascript">
var div = document.createElement('div');
documentFragment.appendChild(div);
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</script><div><section style="COLOR: red;">I am inside an HTML5 element!</section></div>
Internet Explorer 8
 
<SCRIPT type="text/javascript">
var div = document.createElement('div');
documentFragment.appendChild(div);
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</SCRIPT>

<DIV><section style="COLOR: red;">I am inside an HTML5 element!</section></DIV>
Internet Explorer 7
 
<SCRIPT type="text/javascript">
var div = document.createElement('div');
documentFragment.appendChild(div);
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</SCRIPT>

<DIV><section style="COLOR: red;">I am inside an HTML5 element!</section></DIV>
Internet Explorer 6
 
<SCRIPT type="text/javascript">
var div = document.createElement('div');
documentFragment.appendChild(div);
div.innerHTML = '<section style="color: red;">I am inside an HTML5 element!</section>';
document.body.appendChild(div);
alert(document.body.innerHTML);
</SCRIPT>

<DIV><section style="COLOR: red;">I am inside an HTML5 element!</section></DIV>

Analysis

All browsers display this example correctly, and all browsers appear the same. Internet Explorer 6, 7, and 8 are now showing red text. Internet Explorer 6 and 7 again have additional padding at the top, but this difference would not affect the display of the section element. All browsers display the correct HTML on alert. All browsers include the the script element as part of the body. Opera 10.x, Chrome 4.x, and Safari 3.x add a space where the body would have been closed. Chrome 4.x, Safari 3, Internet Explorer 6, 7, and 8 do not display the tabbing. Opera 10.x, Internet Explorer 6, 7, and 8 all capitalize the script element, and all IEs no longer capitalized the section element but still capitalized the inline style attribute's color property, but these differences would not affect the display of the section elements.

It appears the innerHTML is working because the div was attached to a shived document before the innerHTML was set.

Success

The HTML5 section element is now displayed properly on all browsers by using a documentFragment and two javascript shivs.

Written by Jonathan Neal March 15, 2010.

Last modified March 15, 2010.