Source Code Philippines

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.
, , , , and 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 – and.. you’ve gone HTML5!
- Use the simpler new meta character encoding element: , 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:
- 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 and div.CLASS styles and apply the necessary changes by replacing DIV with the new used element. (i.e. div -> nav )

Further HTML5 integration
HTML5 has also saved us from the numerous 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.

By: devingredients