HTML 5

HTML 4 has been in existence for nearly a decade and given the pace at which things move in the web design world it’s long overdue an update.

When HTML 4 was first created the web was a different place to what it is now.  The majority of web pages just presented information and the web was yet to emerge into the software platform it has today.  HTML has struggled to cope with this unrelenting march forward where web applications like Google Maps and AJAX driven websites have pushed HTML into areas it simply wasn’t designed for.

HTML 5 introduces and enhances a wide range of features including form controls, APIs, multimedia, structure and semantics.  HTML 5 introduces several new elements for marking up the structure of a page.

Most web pages include elements such as a header, navigation bar, articles, sections and a footer.  These would normally be marked up in HTML using div elements with ids or classes of “header”, “footer”, “nav”, etc.  In HTML 5 these structural div tags can be replaced with the new HTML 5 elements.

At the moment HTML 5 is not ready for production sites but browser support is progressing very well.  In preparation we have adopted the semantics from HTML 5 in terms of structuring our pages using divs with the new HTML 5 element names as class names or IDs.

What has changed from HTML 4 to HTML 5?

• New parsing rules oriented towards flexible parsing and compatibility; not based on SGML
• Ability to use inline SVG and MathML in text/html
• New elements - section, article, footer, audio, video, progress, nav, meter, time, aside, canvas
• New types of form controls - dates and times, email, url, search
• New attributes - ping (on a and area), charset (on meta), async (on script)
• Global attributes (that can be applied for every element) - id, tabindex, hidden, data-* (custom data attributes)
• Deprecated elements dropped - center, font, strike, frameset