HTML5: Essential things you should know

If I am not wrong HTML 5 has put a broad smile on the faces of
Developers, they feel more relaxed and want to touch new boundaries. As a
successor to HTML4, it has its own features along with new one. Check
it out.


It’s been a while since we switched from the table elements to the
div semantics and standards. Now we are using div to group block
elements to format them with CSS. You may ask: “Now what’s innovative
with HTML5? Should it be early for me to start coding with HTML5 if the
older browsers don’t support it?” But the question itself is ambiguous.
HTML5 is a collection of individual features. So detecting the overall
HTML5 compatibility over browsers would not make any sense. However, you
can detect support for individual features like canvas, geo-location
API, or cache manifest.

HTML5 has some exciting new additions: though it’s not in final
stages, but pieces of it can be used to develop web applications.

We can’t deny the fact that HTML4 is the most successful markup
language in the history of Internet ever. HTML5 builds on that
revolutionary success. To start coding with HTML5, you don’t need to
change the way you used to code in HTML4. With HTML5 you have new
semantic elements, direct support for audio, video and a cool new canvas


HTML5 comes with two serializations- XML and HTML. The XML serialization is served asapplication/xhtml+xml, while the HTML is served as text/html. Starting
with HTML5 is as simple as changing the Doctype. In previous versions
there where variety of Doctypes, but in HTML5 there is only one Doctype:


Changing the Doctype won’t break any of your existing markup, as all
the HTML4 syntax are supported in HTML5. Now, you can start using the
new HTML5 tags such as , ,
etc. Now that’s pretty simple. In case if any browser
doesn’t support HTML5 Doctype it will automatically switch it to the
standard Doctype. So you don’t need to worry about the compatibility
with various browsers.

Block Structure-

The HTML5 specification has added few interesting and useful tags to
divide the page elements. The new block structure changes many of
the typical 

entries from the code.

Block Structure

<section> – It is sectional grouping of content,
typically preceded by header, probably with footer after. The section
elements represent the generic section of a document. However, this
doesn’t replace


<header> – It represents the group of navigation aids
and is used to build the document skeleton. There is no restriction of
using element only once in the document, it can be used
to markup the author’s name and time of comment placed on the blog post.

<footer> – Footer element represents the information
about the section such as who wrote it, useful links and copyright data.
There is no compulsion of using it only at the bottom of the page, you
can use the footer to mark the footer of the blog post in addition to
the entire document.

<nav> – It typically defines the navigation area of the
document, a list of links to route to other pages of the website. It
should be a child element of the , or

<article> – Article represents the component of a page
that consist of a self-contained composition in a document. It can be a
forum post, a magazine or newspaper article, a blog entry, user
submitted comment, an interactive widget or gadget, or any other
independent item of content.

So we can begin with HTML5 to structure our websites with the new
tags. So next time you start a new project, consider using HTML5, and
give your markup detailed structure.

I hope this has been informative for you. Please leave your reviews.