On HTML5 2010

Unlike HTML 4, HTML 5 is more than just a markup syntax for documents.
It's a major revision to how the web is put together and it's an important step toward creating a more semantic web.
What was the original goal for HTML 5?
The goal was to make it easier to develop Web applications.
It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, and Sun JavaFX.

It has new features:

• Offline storage
  
  This is super cookies with much more space to store.
  Web developers have traditionally used cookies to store information on a visitor's local machine, allowing a Web page to read this information back at a later point. While cookies are very useful for storing basic data, they are limited by the fact that Web browsers are not required to keep more than 20 cookies per Web server or more than 4KB of data per cookie (including both name and value). In addition, they are sent to the Web server with every HTTP request, which is a waste of resources.
  HTML5 provides a solution for these problems with the Local Storage APIs, which are covered in a separate specification to the main HTML5 document. This set of APIs allows developers to store information on the visitor's computer while remaining reasonably confident that they will still be there at a later date. In addition, the information is accessible at any point (even after the page has rendered) and is not loaded automatically with each HTTP request. The specification includes same-origin restrictions, which prevent Web sites from reading or changing data stored by other Web sites.
  Most browsers store Web pages in local cache, allowing them to be viewed even if the user is offline. This works fine for static pages, but it is not available for dynamic content that is typically database-driven, such as Gmail, Facebook, or Twitter. HTML5 provides support for offline applications, where the browser downloads all the files necessary to use the application offline, and when the user uses the application offline, the browser can allow any changes made in the process to be uploaded to the server when they reconnect to the Internet.
  


• <canvas> drawing
  
  Sites can mark off a space on a page where interactive pictures, charts and graphs, and animations can be drawn directly by programming code and user interaction no Flash or other plug-ins required.
  The <canvas> element was originally developed by Apple for use in Mac OS X Dashboard widgets and in Safari, but was later adopted by Mozilla and Opera in their Web browsers. The element has been standardized and included in the HTML5 specification, along with a series of 2D drawing APIs that can be used to create shapes, text, transitions, and animations inside the element.
  Many believe that the <canvas> element is one of the most important aspects of HTML5 as it facilitates the production of graphs, interactive games, paint applications, and other graphics on the fly without requiring external plug-ins such as Adobe Flash.
  The <canvas> element itself is quite basic, defining the width, height, and unique ID for the object. The developer must then use a series of JavaScript APIs to actually draw objects on the canvas, typically when the Web page has finished rendering. These APIs allow the developer to draw shapes and lines; apply color, opacity, and gradients; create text; transform canvas objects; and perform animation. The APIs also allow the <canvas> to be interactive and respond to user input such as mouse events and key events, facilitating the production of games and Web applications on the canvas. You will see an example of the <canvas> element in action in the sample HTML5/CSS3 Web site later in this tutorial.
  


• Native <video> and <audio> streaming support
  
  Video sharing sites such as YouTube has seen a huge explosion in the use of the web for multimedia streaming but the web was not built with such content in mind, and as a result, proprietary Flash Video (.flv) file format and the Adobe Flash platform have been dominating the web.
  HTML5, however, includes support for two new elements, <video> and <audio>, which allow Web developers to include multimedia content without relying on the user to have additional browser plug-ins installed. It's still in the very early stages and subject to format disruption, but sites like YouTube, Hulu, and Pandora could one day throw Flash away to bring you streaming audio and video. The majority of the API works in Firefox, Opera (experimental build), and Safari although Safari only uses Apple's proprietary .mov format, rather than the open-source Ogg formats supported by Firefox and Opera.
  


• Web application
  
  Without breaking down the hundreds of nuts and bolts, it's fair to say that HTML5 is aimed at making it easier to build wikis, drag-and-drop tools, discussion boards, real-time chat, search front-ends, and other modern web elements into any site, and have them work the same across browsers.
  


• Smarter forms but may be not that sexy
  
  Search boxes, text inputs, and other you-type-here fields get better controls for focusing, validating data, interacting with other page elements, sending through email, and more.
  Web application developers find themselves continually in need of some more sophisticated form controls, such as spinners, sliders, date/time pickers, color pickers, and so on.
  In order to tap into these types of controls, developers needed to use an external JavaScript library that provided UI components, or else use an alternative development framework such as Adobe Flex, Microsoft Silverlight, or JavaFX. HTML5 aims to fill some of the gaps left by its predecessor in this space by providing a whole range of new form input types.
  In addition to these new input types, HTML5 also supports two major new features for form fields. The first of these is autofocus, which tells a browser to automatically give focus to a particular form field when the page has rendered, without requiring JavaScript code to do so. The second enhancement is the placeholder attribute, which allows the developer to define the text that will appear in a textbox-based control when its contents are empty. An example of this would be a search box where the developer would prefer not to use a label outside the box itself. The placeholder attribute allows the developer to specify text that will show when the value of the control is empty and the control does not have focus.
  


• Semantic web
  
  The HTML5 specification includes a series of new semantic elements that is used to give some meaning to the various sections or parts of a Web page, such as a header, footer, navigation, and so on. In previous versions of HTML, you would typically use <div> elements to create these parts, using ID or class attributes to differentiate them from each other. The problem with this is that this has no semantic meaning, as there are no strict rules defined that specify what class names or IDs are to be used, making it extremely difficult for software to determine what the particular area is doing. HTML5 should help alleviate these issues, making it easier for Web browsers to parse the semantic structure of a document.
  It is worth pointing out that continuing to use <div> elements in HTML5 is perfectly valid, but in order to future-proof your work, it is recommended that you use semantic elements where relevant. On the other side of the coin, it is also suggested that you avoid using these new elements for purposes other than their intended. For example, the <nav> element should not be used for just any group of links; it is intended to surround the main navigation block on the page.
  
  The main semantic elements that HTML5 introduces are:
  
  
  • <header>
    This element is used to define a header for some part of a Web page, be it the entire page, an <article> element, or a <section> element.
  • <footer>
    Like the <header> element, this new element defines a footer for some part of a page. A footer does not have to be included at the end of a page, article, or section, but it typically does.
  • <nav>
    This is a container for the primary navigation links on a Web page. This element is not intended for use with all groups of links and should be used for major navigation blocks only. If you have a <footer> element that contains navigation links, you do not need to wrap these links in a <nav> element, since the <footer> element will suffice on its own.
  • <section>
    This element represents a section of a document or application, such as a chapter or a section of an article or tutorial. For example, the section you are reading now could be surrounded by a <section> element in HTML5. <section>; elements typically have a header, although it is not strictly required. The header for the section you are reading now would contain the text "Semantic elements," for example.
  • <article>
    The <article> element is used to define an independent item on the page that can be distributed on its own, such as a news item, blog post, or comment. Such items are typically syndicated using RSS feeds.
  • <aside>
    This new element can be used to mark up a sidebar or some other content that is considered somewhat separate to the content around it. An example of this might be advertising blocks.
  • <hgroup>
    In some cases, a page, article, or section may require more than one heading, such as where you have a title and a subtitle.
  
  


• Geolocation:
  
  HTML5 can find your location and use it to tailor things like search results, tag your Twitter updates, and so on.