2.IDEA

JP | EN

You Needn't Use html5shiv.js on HTML5 coding for IE

Html5shiv.js is the script that enable HTML parsers to read HTML5 tags, even IE8 and older. Desktop browser market share of IE8 is over 20%, so we still cannot ignore IE8 and style HTML5 tags without html5shiv. Looking at the trend of web design, it's not too much to say that using html5shiv is de facto standard of HTML5 coding. Actually, html5shiv is used on famous websites(e.g.: Bootstrap).
However, some experts dislike it because of its effects on web performance.
For such web performance geeks, I'll talk about HTML5 coding without html5shiv.js.

How html5shiv.js works

The main script of html5shiv.js is the following.

document.createElement("HTML5-tag");

HTML parsers of IE8- cannot convert HTML5 tags' elements to DOM nodes. So, when you use HTML5 tags on IE8-, you have to create the HTML5 tag's element using javascript, so that parsers can recognize HTML5 tags. (If you write a script such as document.createElement("mytag"), you can use <mytag> on html.)

Although html5shiv also includes scripts for print, I will skip the details to make this article shorter.

How to use HTML5 tags without html5shiv.js

The way to use HTML5 tags without html5shiv is "Do not apply CSS styles to HTML5 tags". You may think it is cheap idea, but it doesn't mean "Directly replace HTML5 tags with <span> or <div>".

I'll show you steps of how to markup and style it.

  1. Create a document structure with minimal HTML4 tags(e.g.: <h1>〜<h6>, <p>, <ul>, <ol>).
  2. Apply CSS styles. As nesessary, wrap content using <div>.(At this step, be careful to use <div> as little as possible).
  3. Add HTML5 tags to wrap semantic unit.

1. Create a document structure

Have a look at the following demo.

demo1

Screen shot: demo of create document structure

You can create it using markdown editors such as dillinger, except <small>.

2. Apply CSS styles

Style it.

demo2

Screen shot: demo of Apply CSS styles

I did my best to use <div> as little as possible...maybe (for example, I didn't wrap "logo" and "header-nav" using <div class="header">).

3. Add HTML5 tags to wrap semantic unit

Wrap semantic unit using HTML5 tags, for example, "header of this page" = <header>, "navigation of this site" = <nav>, "main article of this page" = <article>, "complementary information separated from main article" = <aside>, and so on. Of course, looks don't change at all.

demo3

It is better to add semantic attributes(e.g.: WAI-ARIA, microdata) to HTML5 tags.
Note: When you use <figure>, reset styles of it (default style of <figure> is "margin: 1em 40px;").

Coding like it, even though HTML parsers cannot recognize HTML5 tags, the page keep styles.

The Goals of HTML5 is "Semantic Web"

I heard that "Semantic" is one of the most important feature of HTML5.
In the world various User-Agents(from legacy to modern) are used, I think it is the best way of HTML5 coding to use HTML4 tags for "looks(style)" and HTML5 tags for "meaning". Anyway, I really hope I can see the day I don't care about IE8- at all...

References

For web performance geeks...

You might not need jquery, too