An Introduction to HTML5

Saturday 16th

April 2011

There is buzz among web developers now a days and its all about HTML5. Although full specifications of HTML5 is not yet available, its still been touted as the future of web technology. Today we will be understanding the basics of HTML5 and its improvements over HTML 4.01

Internet has transformed a lot since 1999, when HTML 4.01 became a standard. With the arrival of HTML5 and CSS3, battle for new markups has also begun. Even though both HTML5 and CSS3 are a work in progress, there is no reason to not start using it right now. It is time developers start adapting to the new ideologies and modify their coding habits to keep up with all the changes taking place in the web world.

html5

HTML5 Logo

With the introduction of HTML5, all HTML 4.01 elements that were obsolete have been either re-written or deleted. New rules for better error handling, device independence, development process visible to publics, etc have been introduced. New and improved form controls, content specific elements, canvas element for 2D drawing API, video and audio API, API to support offline storage, cross-document messaging, drag and drop are some of the interesting features of HTML 5.

What is new in HTML5?

  • <DOCTYPE>

The first thing noticed about HTML5 was the doctype, written like this: <!DOCTYPE html> This new DOCTYPE is short, small, meaningful and easier to remember.

NEW ELEMENTS INTRODUCED IN HTML5

  • <header>

The header tag contains the header information for the whole page or section of the page.

  • <nav>

The nav tag is used to define navigation. One can use nav tag for a section of page that contains links.

  • <article>

The article element defines an article i.e. defines subsection of the main document or page. It specifies self-contained and independent content. It may content header, images, texts etc.

  • <section>

The section tag work as similar as <div> tag that defines particular sections in the related page or document.

  • <aside>

The aside element is used to define content as aside from main content of the page. For example, one can use it in sidebars, posts, footers etc.

  • <figure>

The figure element is usually used to define or group the media content like pictures along with their caption.

  • <footer>

The footer element, not only used to define the footer for the page but also for any section of the page. One can use <footer> tag multiple times in the page.

Html5 basics explained.

As these elements are much better defined, they are not only easier to use but also provides a systematically well structured document. Now how can we forget ‘Browser Compatibility’? Currently none of the browsers fully support HTML5 But in the near future all major browsers i.e. Chrome, Firefox, Safari, Internet Explorer are gearing up to be compatible to as much HTML5 markups as possible..

A word of caution – HTML5 is not for everyone. If you think you are ready then wisely choose where and how to use HTML5 since you might as well get stuck between HTML5 and the browser because your browser might not understand a word of HTML5.

Further Reading

  1. Yes, You Can Use HTML 5 Today! – A great beginning overview of HTML 5
  2. Wikipedia: HTML 5 – A basic overview from Wikipedia
  3. HTML 5 Cheat Sheet – A great quick guide to HTML 5 as a printable PDF
  4. HTML 5 Demos – A great set of demos. Just view the source to see how they work.
  5. HTML 5 Drag and Drop + Microformats = a whole world of possibilities – An example of how to use Drag-n-Drop in HTML 5
  6. HTML 5 Gallery – See what’s possible with HTML 5
  7. HTML 5 Forms Demo – A powerful demo of how forms work in HTML 5
  8. HTML 5 Doctor – A great general resource on HTML 5
  9. Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element
  10. Video elements – A useful article from HTML 5 Doctor on the Video element
  11. Designing a blog with html5 – A tutorial on how to build a blog in HTML 5
  12. How to get HTML5 working in IE and Firefox 2 – Another great article from HTML 5 Doctor
  13. HTML 5 – Draft Standard – The whole spec, in all it’s scary technical detail
  14. Semantics in HTML 5 – An opinion piece from A List Apart
  15. Thinking About HTML 5 canvas Accessibility – Some quick thoughts on accessibility problems with the Canvas element
  16. HTML 5: nav ambiguity resolved – A post by Zeldman on the HTML 5 Nav element
  17. A Selection of Supported Features in HTML5 – A great list from Molly about which HTML 5 features are supported by which browsers
  18. The WHATWG Blog – The Web Hypertext Application Technology Working Group – the folks working on the HTML 5 spec
  19. HTML 5 canvas – A great in-depth tutorial on how the HTML 5 Canvas element works
  20. Native Drag and Drop – A demo of how the Drag-n-Drop functionality works.
  21. Bespin – A Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.
  22. When can I use… – Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
  23. Comparison of layout engines (HTML 5) – A good resource from Wikipedia
  24. Thats’ not end of it. Please suggest in comments.

People to follow

These are the folks that are at the center of HTML 5 …

  1. Ian Hickson (@hixie) – Editor of HTML 5 Spec. Currently working at Google.
  2. Dave Hyatt – Co-creator of Firefox. Worked with Ian Hixie on HTML 5 spec. Working at Apple on the Safari and WebKit team.
  3. Bruce Lawson (@brucel) – Works for Opera, evangelising open web standards as part of their Developer Relations team. Also a member of the Web Standards Project’s Accessibility Task Force.
  4. Folks behind HTML 5 Doctor: @Rich_Clark, @Rem, @jackosborne, @akamike and @leads.
  5. Molly Holzschlag – Group Lead for the Web Standards Project (WaSP) and an invited expert to the HTML and GEO working groups at the World Wide Web Consortium (W3C)
  6. We’re probably forgetting others … please make suggestions in the comments.

 

 

Written by: avadhoot on April 16, 2011.
Last revised by: Sarath Unnithan

Tags: , , ,

The entry 'An Introduction to HTML5' was posted on April 16th, 2011 at 5:55 pm and is filed under HTML 5, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “An Introduction to HTML5”

  1. fages writes:
    No. 1 — October 3rd, 2011 at 2:35 pm

    Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! However, how could we communicate?

  2. Johnnie Greenhaw writes:
    No. 2 — December 17th, 2011 at 10:23 am

    I needed to draft you that tiny word just to thank you as before just for the pleasing things you’ve contributed in this article. It was really pretty generous of people like you to deliver without restraint just what a number of people could have offered for sale for an e book to get some bucks for their own end, especially now that you could have done it if you ever wanted. These thoughts in addition worked as the good way to understand that other individuals have a similar interest the same as my very own to grasp way more with regard to this condition. I believe there are millions of more enjoyable sessions up front for people who read your site.

  3. Genna writes:
    No. 3 — October 16th, 2012 at 6:23 am

    Nice a post. Normal trouble is actually G. change their own mind too repeatedly.

Leave a Reply

»