On HTML5 2020

bogotobogo.com site search:

1. Why HTML5?

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. We 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 us 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 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, we 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 our work, it is recommended that we use semantic elements where relevant. On the other side of the coin, it is also suggested that we 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:
1. <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.
2. <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.
3. <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 we have a <footer> element that contains navigation links, we do not need to wrap these links in a <nav> element, since the <footer> element will suffice on its own.
4. <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 we 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 we are reading now would contain the text "Semantic elements," for example.
5. <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.
6. <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.
7. <hgroup>
  In some cases, a page, article, or section may require more than one heading, such as where we have a title and a subtitle.