Getting Started with HTML5 (things you need to know)

by Shubham on September 13, 2011

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, geolocation 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 feature.

Understanding the Doctype-

HTML5 comes with two serializations- XML and HTML. The XML serialization is served as application/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:

    <!DOCTYPE html>

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 <header>, <footer>, <article>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.

Understanding the 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 <div> entries from the code.

<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 <div> element.

<header> – It represents the group of navigation aids and is used to build the document skeleton. There is no restriction of using <header> 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 <header>, <footer> or <section>.

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

  • Similar Articles

    { 2 comments… read them below or add one }

    avatar Raj @ Blogger Tips & Tricks September 15, 2011 at 12:18 pm

    welcome back, your new design is good and I love it, could you tell me the way how managed the popular posts in sidebar??? Would love to add that to my blog..


    avatar Jojo Mathews @Around Social September 15, 2011 at 2:19 pm

    Thanks Shubham.. It is really helpful.. I am also thinking to switch to html 5 🙂


    Leave a Comment

    CommentLuv badge

    Previous post:

    Next post: