If HTML5 is here now, it does not mean that the previously HTML4 built web pages cannot benefit the new technology. In the next few years, HTML5 will change web communication greatly, we’re looking at new indexing methods, more accurate search engine results, richer APIs and web applications, greater accessibility and the list goes on.
With over 250 million websites all over the web, there is unimaginable and priceless information, content that deserves the exposure and attention that HTML5 is focusing on. It’s pretty much our job to make all that content more accessible by updating older HTML4 structures with more semantic mark-up.
So far, we’ve been forced to “abuse” the DIV tag to structure our pages since we had no other element to do so. It really did come in handy to reference sections from our pages through CSS, but after all, it’s only purpose was for styling.
<header>, <section>, <aside>, <article>, <nav> and <footer> are the new elements which we can use to semantically structure our documents.
Phase 1 of updating an HTML4 structure to HTML5 is more simple than you think:
- Update the old DOCTYPE declaration which no one ever bothered remembering with <!DOCTYPE html> – and.. you’ve gone HTML5!
- Use the simpler new meta character encoding element: <meta charset=”utf-8”>, however, be advised that older browsers do not support the new meta charset element and if you use a special character set, consider using the old element as it’s equally acceptable in the HTML5 standards: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
- Start traversing through your document and replace the endless DIVs with the appropriate structural elements. Depending on how the CSS styling has been applied, it may take just a few simple div->section, div->nav replacements. Have a look at the css file and watch out for div#ID and div.CLASS styles and apply the necessary changes by replacing DIV with the new used element. (i.e. div#mainMenu -> nav#mainMenu )
HTML5 has also saved us from the numerous <input type=”text”> fields that we’ve used for countless different purposes. We now have the following attributes available:
We can be more specific with our fields and have our forms more ready for APIs and future web applications. The good news about these input types, is that if the browser does not support a certain attribute, it will simply read it as a text type input.
I hope this title sounds familiar, as I’ve recently posted about HTML5 and CSS3 Progressive Enhancement using Modernizr and now, we’re looking at the same solution.
Go ahead and read more on Modernizr and find out how you can detect HTML5 support for individual elements and modules: Smart HTML5 and CSS3 with Modernizr