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.
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.
- Create a document structure with minimal HTML4 tags(e.g.: <h1>〜<h6>, <p>, <ul>, <ol>).
- Apply CSS styles. As nesessary, wrap content using <div>.(At this step, be careful to use <div> as little as possible).
- Add HTML5 tags to wrap semantic unit.
1. Create a document structure
Have a look at the following demo.
You can create it using markdown editors such as dillinger, except <small>.
2. 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.
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...