New Features in HTML 5.1 with JavaScript & JQuery

With the recent standardization of HTML5 specification, the core vocabulary and features are extended in four ways.
As modules that have been removed from the original HTML5 specifications to be standardized separately (HTML5 APIs such as Microdata or the Canvas).
As modules introduced as HTML5 extensions like Polyglot Markup.
As originally separate specifications that have been adapted as HTML5 extensions or features such as SVG.
As for upcoming specifications such as HTML 5.1, HTML 5.2, and so forth.

HTML 5.1 introduced new elements, attributes, and features, extending HTML5.0 with the following:

The srcset image attribute allows you to list multiple alternative image sources based on pixel density.

Sizes Attribute

Display images differently depending on the user’s screen size
Note: size gets changed by the help of viewport width and viewport height.

with srcset attribute

look like a container used to specify multiple elements. the browser detecting used the picture based on media type and make it as responsive.
you should use basic for works with lower browsers.
New Meta tag
New Input Elements

<input type="week">
<input type="month">

reportValidity() One of the New Features in HTML 5.1

In HTML5, the form validation was done using a method form.checkValidity(), which allowed users to check the inputs of a form against the defined validations. reportValidity() is one of the new features in HTML 5.1. This is very similar to checkValidity(), but it additionally reports the error to the user in the browser itself.

Now, let’s look into a code example for form validation without using reportValidity() and using reportValidity().

What is a Tablesorter?

When developing a website that needs to show data in a tabular manner, for instance, flights flying out next from Bangalore to Mumbai, the hotels available in a selected data range, etc., HTML provides an element for tabular data: The Tables.

But the problem with it is that, the Table element doesn’t have an API that allows to sort its rows based on a certain criterion, such as a tariff list from the lowest to the highest price.

Tablesorter is a jQuery Plugin

Now, let’s look into some of its uses and benefits:

It provides dynamic row sorting based on the values of one or more given columns.

Offers the possibility to paginate tables created using HTML <table> element.

Being a client-side library, one of its main advantages is that users don’t need to reload the page that they visit in order to sort the data.

How to use the Tablesoter?

Tablesorter is a plugin and to use it, you need to:

Download and include the tablesorter library (plugin)

Call a method tablesorter() to sort the data

For better understanding of how to use Tablesorter, go through this Step-by-Step guide to use the Tablesorter.

1. Download the Tablesorter, and include it in the pages where you intend to use it.

We hope you have understood the new features in HTML 5.1. and will start implementing it in your code. If you have any queries, please write to us at [email protected] and keep visiting www.acadgild.com for more updates on the courses.