HTML5 – What is it?

HTML5 and CSS3

This post is the first post in a series of two, discussing what HTML5 and CSS3 are, as well as how to make them compatible with as many browsers as possible. This first post will be about HTML5, the second about CSS3.

HTML5 – What is it?

HTML5 is the next proposed publication to the HTML family. HTML5 is not terribly removed from XHTML1 or HTML4. The WHATWG decided in 2007 that HTML5 should be the specification and starting point of the next HTML version. The code isn’t very different, but it adds some new really nice tags. Many tags are good semantic replacements for older, less-semantic tags. WHATWG wanted HTML5 to be more structural, focusing on keeping content separate from style. Following this, they deprecated purely presentational tags such as <font> and <center>. These tags, as most of us know, have been completely replaced by CSS.

Many of the tags introduced in HTML5 will not change the way you code your sites. Instead they allow naming sections of sites without using an id or class attribute. All of the tags proposed as the HTML5 standards can be found the W3Schools website. I have fully adopted six of the new tags. The easiest of the many new tags to use, in no particular order:

<header>
Defines a header for a section or page

<nav>
Defines navigation links

<section>
Defines a section

<aside>
Defines an article

<aside>
Defines content aside from the page content

<footer>
Defines a footer for a section or page

All of these tags are structural. These allow me to have <nav> instead of <ul id="nav">. These provide not only faster coding, but also cleaner, easier-to-read code.

Can I use these technologies in all browsers?

HTML5

One would assume that HTML5 is not supported by all browsers, and one would be right. Basic tags are easily made available, however. These tags are supported naturally in all browsers except Internet Explorer. The solution in this case is to add new elements to the browser via JavaScript:

  1. In the <head> portion of your site add:
    <!--[if IE]>
        <script src="ie.js" type="text/javascript" charset="utf-8"></script>
    <![endif]-->
  2. Create a file at the root of your site called, ie.js.
  3. Paste the following code into this file and save it.
    document.createElement('header');
    document.createElement('footer');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('nav');
    document.createElement('article');
  4. Your site now supports basic HTML5 tags in all browsers.

There are many more tags in the HTML5 specification, which can be found at the W3schools website. Have fun working with HTML5 and feel free to post a comment on neat ways you are using HTML5. Don’t forget to stay tuned for the next post in this series, “CSS3 – What is it?“