Hello all, welcome again.

In previous article I had explained Bootstrap: A tool for Web Designers and Developers.  Now let’s discuss on next point for Web Designing and Development. Today we are going to discuss on major improvements of HTML5. There are much more advantages of HTML5 and it’s far better than all old versions of HTML. Today, web development and web designing growing in speed of bullet train. We can measure speed of bullet train – but we cannot measure and imagine speed of web technologies.

Here I would like to explain features of HTML 5 which proves that why HTML 5 is better than all HTML old versions.

There are some key features of HTML5 which we can use in our regular coding which can give better performance. Let’s start on those…

Storage:

Storage in HTML5, we can use local storage feature of HTML5 in our web applications to store data. Before HTML5 – we had to store data of our web application in server requests and cookies of user’s browser. But now, there is storage feature in HTML5 so we can store data using local storage and we can use that with all pages of that domain.

In cookies, there is limit (5 m.b.) of storage but we can store unlimited data using local storage of HTML5 without affecting performance of website. All pages of one domain can store and access that data which stored in local storage using HTML5.

Scalable Vector Graphics (SVG):

A Vector Graphics is really amazing feature of HTML5 to get best performance of web application. SVG – A Scalable Vector Graphics, it contains methods to draw Line, Path, Circle, Text, Graphic Images and Boxes. SVG is used to describe 2D graphics in XML Language. It’s structured in XML language that means every elements are available within DOM. We can use JavaScript handler to handle elements of SVG.

If we are going to change attributes of SVG then browser will re-render that shape automatically. Uses of SVG can give us best user performance for websites. It takes very less time to render and load during website loading. So we can manage loading time of our website through using SVG as a 2D graphic.

New Input Types:

Form Attributes in HTML5, there are some new features and enhancement in input type which are introduced with HTML5. Some new input types are listed below with their purpose..

There are some new input types are introduced in HTML5, that all are listed below with basic details.

• Date: Offers a date picker.
• DateTime: An element to choose both date and time.
• Email: A field to enter e-mail address.
• Month: Choose a full month.
• Number: Picking a number.
• Range: Offers a slider to set to a certain value/position.
• Search: A field for search queries.
• Tel: Choosing a telephone number.
• URL: Entering a URL.
• Week: Picking a specific week.
• Color: Gives the end user a native color picker to choose a color.

Form Validation:

This is really great feature of HTML5. Till now, we have been using JavaScript validation for FORM. But in HTML5 – we can implement validations directly.

For example: we can add validation without using JavaScript with help of “required” attribute. With “required”, that field will be mandatory and validation will apply as per type of input field. If you are going to use “type=email” than it will automatically check validation as per email characters.

There are different input types have different type of validation which are listed below.

• <input type=“text” required >: this will check simple text.
• <input type=“email” required >: this will check email address.
• <input type=“date” required >: this will check date format.
• <input type=“datetime” required >: this will check format of date & time.
• <input type=“number” required >: number will validate only.

That are examples for HTML5 validations, how we can use in simple form.

New Elements:

Now, we got new elements in HTML5 to define part or area of web page. We can identify part of web page using name of that elements. All elements are for particular use, purpose.

Below is a list of the new HTML5 elements, and use of that element.

• <article> Use to define an article in the web page
• <aside> Use to define aside of main content from the page content
• <details> Use to define additional details that the user can view on web page
• <dialog> Use to define a dialog box or window on web page
• <figure> Use to define self-contained content, diagrams, photos, illustrator, etc.
• <footer> Use to define footer part for the document or a section of web page
• <header> Use to define header for the document or a section on web page
• <main> Use to define the main content of a web page
• <mark> Use to define marked or highlighted text on web page
• <nav> Use to define navigation links in the web page
• <progress> Use to define the progress of a task in web page
• <section> Use to define a section in the web page
• <summary> Use to define a visible heading for a <details> element of web page
• <time> Use to define date/time on web page

so, there are lot’s of enhancement in HTML5, today i explained 5 most important enhancement from that. i will explain more enhancement of HTML5 in next article. you will learn more interesting things from that. see you soon in next article “HTML5 Enhancements [Part-2]: Why HTML5 is far better than HTML4.0?“.