HTML5 Web Storage

Storing Data on the Client

 HTML5 offers two new methods for storing data on the client:

• localStorage - stores data with no time limit
• sessionStorage - stores data for one session

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.
In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.
The data is stored in different areas for different websites, and a website can only access data stored by itself.
HTML5 uses JavaScript to store and access the data.

 



Source:http://www.w3schools.com/

HTML5 New Form Attributes

New form attributes:

• autocomplete
• novalidate
  
  

New input attributes:

• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height and width
• list
• min, max and step
• multiple
• pattern (regexp)
• placeholder
• required
 

Form Override Attributes
• The form override attributes allow you to override some of the attributes set for the form element.
  The form override attributes are:
• formaction - Overrides the form action attribute
• formenctype - Overrides the form enctype attribute
• formmethod - Overrides the form method attribute
• formnovalidate - Overrides the form novalidate attribute
• formtarget - Overrides the form target attribute
Source:http://www.w3schools.com/

HTML 5 and SEO....Shyam

At this point in 2010, web browsers are capable of supporting most HTML 5 code functions. 

The

tag

is how you can compartmentalize different segments of your HTML 5 page.  Each section should identify micro data vocabulary that you are using within the segment.


The new

tags

are where you will put the majority of the textual content on your page.  Again, a single page can contain multiple articles  and a single article can contain multiple

areas.  This nesting structure helps to further organize the content within a page.  If you are a blogger, you will want to use the

tabs to segment multiple articles on your pages.

The new tags when you convert your code from HTML 4 to HTML 5.At the end of a section, you can add a

tag. 

This tag contains any footer style text about the section such as the Author of the article and any links the article referenced.
The tag is where you place all of your internal navigation links.  Again, search engines will much more accurately be able to understand the structure of your site if you use this section.  In addition, you should place your "previous" and "next" internal links in this section if your site or blog contains them.
If you are familiar with HTML 4, you'll notice that the new HTML 5 tags I've discussed so far were previously handled by various tags in HTML 4.  The tags are add-on elements within HTML 4 that fail on many levels to properly describe the different sections of a web page. Finally, the new tag is very similar to the tag and will likely be used frequently on your site to make certain keywords stand out.

Source : http://technorati.com/

New Structural Elements in HTML 5.....ShYaM..

In HTML 5 the new structural elements has a header denoted by

 div id="header"  a footer

 div id="footer"  some articles wrapped by an area called “content”.

 div id="content" and some navigation wrapped up in an area called “sidebar” .

 div id="sidebar". 

It’s a simple matter to change the HTML divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and site information as well as site-wide navigation.
Source : http://html5doctor.com/

API's In HTML 5.......ShYaM

HTML5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:

• API for playing of video and audio which can be used with the new video and audio elements.
• An API that enables offline Web applications.
• An API that allows a Web application to register itself for certain protocols or media types.
• Editing API in combination with a new global contenteditable attribute.
• Drag & drop API in combination with a draggable attribute.
• API that exposes the history and allows pages to add to it to prevent breaking the back button. 

  Extensions to HTMLDocument

  HTML5 has extended the HTMLDocument interface from DOM Level 2 HTML in a number of ways. The interface is now implemented on all objects implementing the Document interface so it stays meaningful in a compound document context. It also has several noteworthy new members:
• getElementsByClassName() to select elements by their class name. The way this method is defined will allow it to work for any content with class attributes and a Document object such as SVG and MathML.
• innerHTML as an easy way to parse and serialize an HTML or XML document. This attribute was previously only available on HTMLElement in Web browsers and not part of any standard.
• activeElement and hasFocus to determine which element is currently focused and whether the Document has focus respectively.
• getSelection() which returns an object that represents the current selection(s).
  

  Extensions to HTMLElement

  The HTMLElement interface has also gained several extensions in HTML5:
• getElementsByClassName() which is basically a scoped version of the one found on HTMLDocument.
• innerHTML as found in Web browsers today. It is also defined to work in XML context (when it is used in an XML document).
• classList is a convenient accessor for className. The object it returns, exposes methods (contains(), add(), remove(), and toggle()) for manipulating the element's classes. The a, area and link elements have a similar attribute called relList that provides the same functionality for the rel attribute.
   Source : http://www.w3.org/
  

New Elements in HTML 5 -ShYaM..

The following HTML 5 elements have been introduced for better structure:

• section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
• article represents an independent piece of content of a document, such as a blog entry or newspaper article.
• aside represents a piece of content that is only slightly related to the rest of the page.
• hgroup represents the header of a section.
• header represents a group of introductory or navigational aids.
• footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
• nav represents a section of the document intended for navigation.
  
  
• figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
  

  
   
   
  Example

  figcaption can be used as caption (it is optional).

Then there are several other new elements:

• video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
• embed is used for plugin content.
• mark represents represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
• progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
• meter represents a measurement, such as disk usage.
• time represents a date and/or time.
• ruby, rt and rp allow for marking up ruby annotations.
• wbr represents a line break opportunity.
• canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
• command represents a command the user can invoke.
• details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.
• datalist together with the a new list attribute for input can be used to make comboboxes:
  

• keygen represents control for key pair generation.
• output represents some type of output, such as from a calculation done through scripting.

The input element's type attribute now has the following new values:

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color

The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user's address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.
Source : http://www.w3.org/

HTML5 Input Types

HTML5 has several new input types for forms. These new features allow for better input control and validation.
This chapter covers the new input types:

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color