WHAT IS AND WHY USE HTML5 ?

OK. So, superficially this article looks just another tutorial about HTML and all that web stuff that almost everyone thinks they know. Still, there's bound to be something new in here for almost everyone, so read on.

Lets start with, WHAT IS HTML5?
To go by the wikipedia definition hereHTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard is a W3C Candidate Recommendation.

Not really interesting, is it? Let me explain.

W3C recommendation.

W3C= world wide web consortium.
In the simplest of terms it is a standard-setting organization which consists of guys who put their heads together and set some protocols and standards for different web technologies which almost every major browser follows. Why? Because as nobody owns the internet, there are no set standards and rules. There would be a total chaos if not standard was set and browser manufacturer followed their own standards.
Worst nightmare of a developer !

So, coming back to HTML5, it is a undergoing "operation" and will take a long time to be anything near a complete recommendation. But the good news is that almost all the major browsers have already started to implemented it.

SO, why switch to it when we are already comfortable with the previous versions.

Because, the web is not comfortable! HTML5 adds semantics to a web page. By semantics we mean that it has an inherent meaning attached to it. Presently, we use the all-purpose <div> for structuring data on a web page. For differentiating between blocks we use id or class. But HTML5 provides an entire set of new tags which help resolve this orthodox method. This lets a browser know what it is displaying as well as crawlers to know what they are reading, without much issue.

Some of the newly introduced tags are the

  • <nav>    for naigation menus, etc. or simply navigation
  • <article> well, for an article!
  • <section> to group together similar stuff on a page
  • <aside> adds some information which is not directly related to the page but might be useful for the reader.
  • <header> This somes as no surprise as any pro wouldn't have a page wid a header and footer (almost always)
  • <footer>

The list goes on and on...

These do not have any extra attribute added to them but are meant to be tools to be kept handy. But of course, its very simple to mess it all up like the old <div>s.

Next,
We have the multimedia.

The code for this is just


<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

</body>
</html> 

	

This part is so much interesting for those who have been struggling to embed multimedia in a web page for which there was no standard before. Flash, though is unarguably the most widely used solution but being propriatory, we wouldn't depend on it forever, would we? So along came the <video> and the <audio> tags.

These help incorporate videos, audio in your page in seconds. Though far from finish, but they are supported almost uniformly everywhere. They are simple, seamles, and a boon for the developers as they can be manipulated with javascript.


Then we have the <DOCTYPE>
In my personal opinion, the most apt example of necessary evil. Evil because i never really got the hang of it. Its just too bloody confusing. On the other hand necessary because it tells the browser how to parse the page. There are popularly three types of DTD (Document Type Declaration) :

  • Strict
  • Transitional
  • Frameset

though these can be created on our own.

Previously a sample DTD declaration looked something like

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

The new one is this
 

 
<!DOCTYPE HTML>

Thats it!

The best part is that it is fully backward compatible i.e. to say that old browsers don't have a problem with it. Another developer nightmare!

So now then, what next?

Oh yes!
Web Forms.
Forms are almost part of every site developed and developers try to create as interactive, seamless and intriguing forms as possible. This leads to extensive client-side coding which has to be reused or rather overused. HTML5 comes with a solution for many, many input types which are commonly used such as

  • email
  • tel
  • url
  • search
  • color
  • number
  • range
  • date

There are also some pretty nice attributes to forms like

  • placeholder
  • autocomplete
  • maxlength
  • required
  • spellcheck

There are many more, though cross-browser compatibility is still an issue.

  • Progress  is a long awaited input field added which is a representation of the progress of any work. It can be manipulated with javascript easily.

The next one is CANVAS!

Though i have mentioned this late here, its value and application is almost matchless. The things that can be done with this. WOW!
Check this out.
This is just the beginning. Chrome experiments are also awe-inspiring. Wait for the home page to complete loading.

 

The closing point,

As the world is moving towards mobile devices and apps, HTML5 becomes an inseperable part of the picture. Seeing how apple is embracing HTML5 and CSS3. A developer HAS to know about this stuff.

Thus you see, none can outrun the tantecles of HTML5. Its better to accept it, learn it, and mould our coding likewiseand the possibilities will be endless !

Comments

comments

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Hit Counter provided by orange county property management