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 #1

  1. Problem and Solution
  2. Experiment #1
    1. Results
    2. Analysis
  3. Experiment #2
    1. Results
    2. Analysis
  4. Experiment #3
    1. Results
    2. Analysis
  5. Experiment #4
    1. Results
    2. Analysis
  6. Experiment #5
    1. Results
    2. Analysis
  7. Success

Problem and Solution

The HTML5 section element will not display properly on all browsers, particularly Internet Explorer, until css styles and a shiv are used.

What is a shiv?

A shiv is the term used for a piece of javascript which causes Internet Explorer to properly render HTML5 elements, like the HTML5 section element.

Why is it called shiv?

The term shiv originates from John Resig, the creator of jQuery, who used the word as a metaphor to describe shiving support for HTML5 elements into Internet Explorer via javascript, where shiving is a slang term for a sharp object used as a knife-like weapon. There's also a chance that John had a moment of false etymology and meant to use the word shim, which in computing means an application compatibility workaround.

How does a shiv work?

A shiv works by running before the body of a page and is as simple as document.createElement('section');, which would shiv support for the HTML5 section element in Internet Explorer. The shiv can be run from a remote javascript file. There are a variety of HTML5 shiv scripts on the web which all use the document.createElement method. An important aspect of shiving that the HTML5 shiv must be executed without any errors to work. If the HTML5 shiv contains any errors, or if the shiv script is bundled with any other javascript which contains any errors, then the shiving will not work at all, and Internet Explorer will fail to display HTML5 elements correctly.

Experiment #1

Create a blank page containing the HTML5 section element. 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>
</head>
<body>
	<section>I am inside an HTML5 element!</section>
</body>
<script type="text/javascript">
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>I am inside an HTML5 element!</section>
<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Google Chrome 4.x
 
<section>I am inside an HTML5 element!</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Apple Safari 4.x
 
<section>I am inside an HTML5 element!</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Opera 10.x
 
	<section>I am inside an HTML5 element!</section>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 8
 
<SECTION>I am inside an HTML5 element!</SECTION>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 7
 
<SECTION>I am inside an HTML5 element!</SECTION>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 6
 
<SECTION>I am inside an HTML5 element!</SECTION>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>

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. 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 also capitalized the section element. These differences would not affect the display of the section element.

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

Experiment #2

Create a blank page containing the HTML5 section element and it to have red text. 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>
</head>
<body>
	<section style="color: red;">I am inside an HTML5 element!</section>
</body>
<script type="text/javascript">
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>
<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Google Chrome 4.x
 
<section style="color: red;">I am inside an HTML5 element!</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Apple Safari 4.x
 
<section style="color: red;">I am inside an HTML5 element!</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Opera 10.x
 
	<section style="color: red;">I am inside an HTML5 element!</section>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 8
 
<SECTION style="COLOR: red;">I am inside an HTML5 element!</SECTION>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 7
 
<SECTION style="COLOR: red;">I am inside an HTML5 element!</SECTION>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 6
 
<SECTION style="COLOR: red;">I am inside an HTML5 element!</SECTION>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>

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 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 also capitalized the section element as well as the inline style attribute's color property, but these differences would not affect the display of the section elements.

Experiment #3

Create a blank page containing HTML5 section element, but run document.createElement('section'); before the body. 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');
	</script>
</head>
<body>
	<section style="color: red;">I am inside an HTML5 element!</section>
</body>
<script type="text/javascript">
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>
<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Google Chrome 4.x
 
<section style="color: red;">I am inside an HTML5 element!</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Apple Safari 4.x
 
<section style="color: red;">I am inside an HTML5 element!</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Opera 10.x
 
	<section style="color: red;">I am inside an HTML5 element!</section>
<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 8
 
<section style="COLOR: red;">I am inside an HTML5 element!</section>

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

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

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>

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.

Experiment #4

Create a blank page containing the HTML5 section element and two child section elements, but run document.createElement('section'); before the body. 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');
	</script>
</head>
<body>
	<section>
		<section>I am inside an HTML5 element!</section>
		<section>So am I!</section>
	</section>
</body>
<script type="text/javascript">
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>
		<section>I am inside an HTML5 element!</section>
		<section>So am I</section>
	</section>
<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Google Chrome 4.x
 
<section>
<section>I am inside an HTML5 element!</section>
<section>So am I</section>
</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Apple Safari 4.x
 
<section>
<section>I am inside an HTML5 element!</section>
<section>So am I</section>
</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Opera 10.x
 
	<section>
		<section>I am inside an HTML5 element!</section>
		<section>So am I</section>
	</section>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 8
 
<section><section>I am inside an HTML5 element!</section>
<section>I am too!</section> </section>
<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 7
 
<section><section>I am inside an HTML5 element!</section>
<section>I am too!</section> </section>
<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 6
 
<section><section>I am inside an HTML5 element!</section>
<section>I am too!</section> </section>
<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>

Analysis

All browsers fail to display this example correctly, and all browsers appear the same. The section is a block-level element, so there should be a vertical break between the two sentences. 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 add a space after the last child section as well as capitalize the inline style attribute's color property, but these differences would not affect the display of the section elements.

Where does it say section is a block-level element?

A section element is regarded as a block-level element by the W3C and WHATWG, and is specifically instructed, by default, to appear as a block box.

References:

Experiment #5

Create a blank page containing the HTML5 section element and two child section elements, but style the section element as display: block; and run document.createElement('section'); before the body. 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>
	<style type="text/css">
	section { display: block; }
	</style>
	<script type="text/javascript">
	document.createElement('section');
	</script>
</head>
<body>
	<section>
		<section>I am inside an HTML5 element!</section>
		<section>So am I!</section>
	</section>
</body>
<script type="text/javascript">
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>
		<section>I am inside an HTML5 element!</section>
		<section>So am I</section>
	</section>
<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Google Chrome 4.x
 
<section>
<section>I am inside an HTML5 element!</section>
<section>So am I</section>
</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Apple Safari 4.x
 
<section>
<section>I am inside an HTML5 element!</section>
<section>So am I</section>
</section>

<script type="text/javascript">
alert(document.body.innerHTML);
</script>
Opera 10.x
 
	<section>
		<section>I am inside an HTML5 element!</section>
		<section>So am I</section>
	</section>

<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 8
 
<section><section>I am inside an HTML5 element!</section>
<section>I am too!</section> </section>
<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 7
 
<section><section>I am inside an HTML5 element!</section>
<section>I am too!</section> </section>
<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>
Internet Explorer 6
 
<section><section>I am inside an HTML5 element!</section>
<section>I am too!</section> </section>
<SCRIPT type="text/javascript">
alert(document.body.innerHTML);
</SCRIPT>

Analysis

All browsers display this example correctly, and all browsers appear the same. 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 add a space after the last child section as well as capitalize the inline style attribute's color property, but these differences would not affect the display of the section elements.

Success

The HTML5 section element is now displayed properly on all browsers by using only one css style and one javascript shiv.

Now it is time to move forward onto Phase #2 and solve the next HTML5 problem, which has to do with innerHTML.

Written by Jonathan Neal March 12, 2010.

Last modified March 12, 2010.