[HTML5] Overview

HTML 5 is the next major revision of the HTML standard. The Web Hypertext Application Technology Working Group (WHATWG) began work on the new specification in June 2004 under the name Web Applications 1.0. At that time, the World Wide Web Consortium (W3C) was focusing on XHTML 2.0 as a next standard to HTML4 and XHTML1. In 2009, the W3C decided to drop XHTML 2.0 in favor of HTML5.  

 

1. What’s new?

HTML5  focuses on how Internet evolves from the static documents to multimedia interactive portals. It adds new elements for audio/video plays, drag-and-drop, and scriptable bitmap editing. But the most important additon to HTML5 is new structural elements.

Now HTML is for documents not for styles thanks to CSS. But mostly we depend on <div> to specify document structures. For this reason, a couple of new elements are added to HTML5 such as <header>, <footer>, <section>, and <article>.

 

2. XHTML1.x, HTML5, and XHTML5

XHTML 2 has been dumped by W3C, and the new standard will be HTML5. XHTML5 is simply HTML5 written using XML rules. XHTML5 requires closing tags (self closing tags too such as <br />) and should be well-formed. Even though well-formedness is not fatal for HTML5, it is always a good practice to follow xml rules. Also all tags are lowercase in XHTML5.

 

3. Using HTML5 for Old Browsers (IE 7 & 8)

If a browser does not recognize new HTML5 elements, it usually displays the content as it is. The basic problem is that these unrecognized tags are rendered as “in-line” elements in browsers. Therefore, the first step is to make them as “block-level” elements.

header, footer, nav, section, article, aside {
  display : block;
}

In IE7 and 8, it is not enough. You need to register new HTML 5 elements as valid  tags using JavaScript.

document.createElement('article');
document.createElement('aside');
...

The good news is you do not need to type all this. You can just include the “html5shiv for IE” javascipt file in your web page.

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s