Introduction to HTML5

Now we are going to see what is HTML5, what is the need of expanding HTML, what are the new features in HTML5 and  etc. concepts.

What is HTML5?

HTML5 will be new standard

HTML5 is a cooperation between the W3C (world wide web consortium) and (web hypertext application technology working group (WHATWG)

HTML5 Offers some great features that I will make the web more dynamic.

New Features:

·         New sets of tags such as <header> and <section>

·         <canvas> element for 2d drawing

·         Local storage ex cookies and small amount of data

·         New form control like calendar,date and time

·         New media functionality

·         Geolocation

Expanding HTML

One of the biggest reasons for HTML5 is to prevent users from needing to download and install multiple plugins such as Flash and Silverlight.

HTML5 Stack:

·         HTML5

·         CSS3

·         Javascript

New Form Elements

New Input types 

Ex: color, rage, seach, datatime, tel, datetime-local, time, email, url, month, week, number etc

·         Email:  input type allows the form to validate the email address format without using javascript

<input type=”email” name=”email”>

·         Color : Allows to you color from the picker

<input type=”color” name”favcolor”>

·         Date: Allows user to select a date

<input type=”date” name=”bDate”>

·         Range: Gives us a control for entering a number whose exact value is not important  (like  slider control)

<input type=”range” name “points” min=”1” ma=”10”>

·         Tel: Used to define a field for entering telephone number

<input type=”tel” name=”usrtel”>

·         Time: Used to define a field for entering a time

<input type=”time” name=”usr_time”>

·         URL: Used to define a field for entering a url/link

<input type=”url” name=”homepage”>

Datalist:

Specifies a list of predefined options for an <input> element.

Provides an “autocomplete” feature on <input> elements. Users will see drop-down list of pre-defined options as they input data.

Use the <input> element’s list attribute to bind it together with a <datalist> element.

<input list="browsers">

<datalist id="browsers">

                   <option value="Internet Explorer">

                   <option value="Firefox">

                   <option value="Chrome">

                   <option value="Opera">

                   <option value="Safari">

          </datalist>

<keygen>

·         Provides a secure way to communicate users.

·         The <keygen> tag specifies a key-pay generator field in a form.

·         When the form is submitted, two keys are generated, one private and another one public.

·         The private key is stored locally, and the public key is sent to server. The public key could be used to generate a client certificate to authenticate the user in the future.

<output>

Perform calculation and show the result in an <output> element:

Tip

What happens if you view a new HTML5 form input type in an older browser?

It reverts to a standard text input