An Introduction into HTML5

Posted On by Leach Creative

HTML 5 is currently the latest version of HTML, and introduces a large number of new features including a new doctype, new elements, changes to existing elements and the removal of others.

A Simplified Doctype

I’m sure you all remember the long doctype from XHTML, like most of you I didn’t even bother to memorize it and simply copied and pasted it into new documents. Below you will see two examples of doctypes, the first is an example of XHTML Strict, and the second is the new and improved version found in HTML 5

XHTML Strict

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

HTML 5

<!doctype html>

New Elements

HTML 5 incorporates many new tags to help make building a site easier, and we are only going to go into a few of the more important ones.  In XHTML the developer would have to make a <div> with an id or class like header, footer, section or sidebar, now there are tags specifically for this. Ex <section></section>, <header></header>, <nav></nav><articles></articles> etc.

Simplifying Older Elements

When HTML transitioned to XHTML, there were a few changes to tags.  Elements like <hr> <img> and <br> were now <hr /> <img /> and <br /> where the forward slash indicates the closing of a tag.  HTML5 in an effort to simplify things has now reverted these back to how they were in HTML.

Deleted Elements

There have also been some deleted elements, for the most part, these were elements like, <big>, <center> and <u> which now belong in a CSS file.  However there were other elements such as <frame> which not many people used anyways because of the difficulties with usability and SEO penalties.

Problems With HTML5

There is one major problem with HTML5, and browser compatibility.  IE doesn’t recognize some of the new elements added, big shocker there, so the developer must go in and manually add them.  Fortunately there is a javascript file that does this for us.  Just copy and paste the code below into any document you wish to encode with HTML5.

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

Learn More

We have only covered a few of the many new features of HTML5, if you wish to learn more please visit http://www.w3.org/TR/html5-diff/#new-elements.