An Introduction to HTML5
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.
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?
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
The header tag contains the header information for the whole page or section of the page.
The nav tag is used to define navigation. One can use nav tag for a section of page that contains links.
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.
The section tag work as similar as <div> tag that defines particular sections in the related page or document.
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.
The figure element is usually used to define or group the media content like pictures along with their caption.
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.
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.
- Yes, You Can Use HTML 5 Today! – A great beginning overview of HTML 5
- Wikipedia: HTML 5 – A basic overview from Wikipedia
- HTML 5 Cheat Sheet – A great quick guide to HTML 5 as a printable PDF
- HTML 5 Demos – A great set of demos. Just view the source to see how they work.
- HTML 5 Drag and Drop + Microformats = a whole world of possibilities – An example of how to use Drag-n-Drop in HTML 5
- HTML 5 Gallery – See what’s possible with HTML 5
- HTML 5 Forms Demo – A powerful demo of how forms work in HTML 5
- HTML 5 Doctor – A great general resource on HTML 5
- Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element
- Video elements – A useful article from HTML 5 Doctor on the Video element
- Designing a blog with html5 – A tutorial on how to build a blog in HTML 5
- How to get HTML5 working in IE and Firefox 2 – Another great article from HTML 5 Doctor
- HTML 5 – Draft Standard – The whole spec, in all it’s scary technical detail
- Semantics in HTML 5 – An opinion piece from A List Apart
- Thinking About HTML 5 canvas Accessibility – Some quick thoughts on accessibility problems with the Canvas element
- HTML 5: nav ambiguity resolved – A post by Zeldman on the HTML 5 Nav element
- A Selection of Supported Features in HTML5 – A great list from Molly about which HTML 5 features are supported by which browsers
- The WHATWG Blog – The Web Hypertext Application Technology Working Group – the folks working on the HTML 5 spec
- HTML 5 canvas – A great in-depth tutorial on how the HTML 5 Canvas element works
- Native Drag and Drop – A demo of how the Drag-n-Drop functionality works.
- Bespin – A Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.
- When can I use… – Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
- Comparison of layout engines (HTML 5) – A good resource from Wikipedia
- Thats’ not end of it. Please suggest in comments.
People to follow
These are the folks that are at the center of HTML 5 …
- Ian Hickson (@hixie) – Editor of HTML 5 Spec. Currently working at Google.
- Dave Hyatt – Co-creator of Firefox. Worked with Ian Hixie on HTML 5 spec. Working at Apple on the Safari and WebKit team.
- 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.
- Folks behind HTML 5 Doctor: @Rich_Clark, @Rem, @jackosborne, @akamike and @leads.
- 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)
- We’re probably forgetting others … please make suggestions in the comments.