Merging from HTML4 to HTML5

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.

The new HTML5 structural elements.

<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 )

Further HTML5 integration

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:

  • hidden
  • text
  • search
  • tel
  • url
  • email
  • password
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color
  • checkbox
  • radio
  • file
  • submit
  • image
  • reset
  • button

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.

HTML5 Progressive Enhancement.

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

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

3 thoughts on “Merging from HTML4 to HTML5

  1. First as the name suggests, is the successor to HTML 4. In addition, HTML 5 is the combination of HTML, CSS and JavaScript. All these technologies can create rich, interactive applications without necessarily needing the support of technology such as Flash, Flex or Silverlight. All the new functions added in HTML 5 are helpful for embedding video files, audio files, graphics, data storage and documents directly to web. Many of the branded companies put it into practice like Apple iPad . It is compatible with HTML5 and does not support Adobe Flash. That is the cause why developers are further paying attention in this and are learning about all the new tags.

  2. great update with the advancement in technology html 5 will be a great option for the new era……thanks for the update……

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">