One day HTML5 will be released as a complete and recommended spec, and when it does several revisions will probably be needed to consider all the new technologies being released. Let all just hope Microsoft and their IE team get their act together. In any event, today’s modern browsers are including support for many of the features HTML5 and CSS3 have to offer, so now’s is the time to start learning!
First impressions of HTML5 is that it will prove to improve the readability of code to both programmers and search engines, by adding several new elements, and dropping a few others. Before getting into any code, it is important to note that not all browsers support HTML5, and the ones that do support it don’t support all the features. A quick rundown of features and browser compatibility can be found here:
With these compatibility issues, we need to make sure that we provide a fallback plan for anything unsupported. An excellent JavaScript for testing for browser compatibility against the HTML5 spec is Modernizr.js. One of the features of Modernizr.js is that it provides a Global object for each feature, if it is supported the value is true, else it is false. This will allow you to set CSS classes accordingly.
HTML DOCTYPE
How many times have you had to copy and paste the doctype from one of your old projects to a new one? It has been said that there has been a lot of collaboration with the Web Hypertext Application Technology Working Group (WHATWG), who are the people responsible for the new standard, and the web community. Well they certainly listened, the new doctype declaration are as follows:
<!DOCTYPE html>
<html lang=”en”>
That’s it! Fantastic! It will basically allow you to code in XHTML or in HTML strict modes, gone is the transitional mode.
HEAD SECTION
Everything in the head section is basically the same. Only thing I could find was that the charset is a bit shorter
<head>
<meta charset=”utf-8″ >
<title></title>
…
</head>
BODY SECTION
Here is the real bulk and shine to the basic changes to the HTML spec. First, the basics of many site layouts contain a header, navigation, content and a footer, each of which are generally jammed into a div with an ID.
<body>
<div id=”header”>
<div id=”nav”></div>
</div>
<div id=”content”>
<div class=”entry”></div>
</div>
<div id=”footer”></div>
</body>
The new spec provides some new elements to identify these standard site sections: header, nav, article and footer.
<body>
<header>
<nav>
<ul>
<li>…</li>
</ul>
</nav>
</header>
<article>
…
</article>
<footer>
</footer>
</body>
These new elements act as standard div’s, but provide a semantic meaning for the element, this can prove useful for search engines (they can locate the bulk of your content easier), as well as for programmers. These elements can also be nested within each other, for example a blog will have a header and footer for the entire page, but will also have a header and footer for each blog entry, where the blog entry would be encapsulated in an article tag.
There are quite a few new elements which are being introduced with the new HTML5 spec, and I think that it is important that developers embrace this new standard now rather than later.
Resources:
HTML5 Quick Reference Guide (printable)
