Free Shipping

Secure Payment

easy returns

24/7 support

  • Home
  • Blog
  • New Features in HTML 5.1 with JavaScript & JQuery

New Features in HTML 5.1 with JavaScript & JQuery

 July 14  | 0 Comments
Share 0
Tweet 0
Share 0

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:

  1. CanvasProxy, transferControlToProxy()
  2. probablySupportsContext()
  3. setContext()
  4. orceSpellCheck()
  5. inert attribute
  6. table sorting
  7. menu, menuitem, contextmenu
  8. allowFullScreen
  9. fastSeek()
  10. toDataURLHD(), toBlobHD()
  11. Autocomplete limited to on|off, inputmode
  12. ImageBitmap
  13. details and summary element
  14. dialog element
  15. :dir() pseudoclass
  16. seamless iframes
  17. isContentHandlerRegistered() and isProtocolHandlerRegistered() methods
  18. datetime, datetime-local, week, month input types
  19. reportValidity() method
  20. scoped style
  21. XMLDocument interface
  22. picture element and srcset attribute

HTML5.1 is enchanched version of HTML5. Many browser still haven’t supported the 5.1 version and it’s under research.
So let’s have a discussion on few of the useful tags available for html5.1
Creating reverse link relationships
With HTML 5.1 you will able to use rev attribute for the and elements to specify how your current document is related to the linked document i.e. it defines the relationship in the reverse direction.

Get Skilled in Full Stack Web Development
<ol type="A">
	<li>HOME</li>
	 <li>ABOUT</li>
	 <li>CONTACT</li>
	</ol>

it will start with A and suppose you want to start with E, not A then you can use one more attribute as below

<ol start="E">
	<li>HOME</li>
	 <li>ABOUT</li>
	 <li>CONTACT</li>
	</ol>

And if you want to reverse the type list then you use one more new attribute called “reversed”

<ol reversed type="i">
	<li>HOME</li>
	 <li>ABOUT</li>
	 <li>CONTACT</li>
	</ol>

Responsive Images

srcset Attribute

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. example 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().

Example 1:

<html>
<h2>Form validation without reportValidity()</h2>
<p>A validation error occurs only when clicking the submit button.</p>
<form>
<label>
Mandatory input <input type="text" name="first-name" required />
</label>
<button type="submit">Submit</button>
</form>
</html>

Output:

Without Using reportValidity(): Before clicking the submit button

output1

Without Using reportValidity(): After clicking the submit button

submit2

Example 2:

<html>
<h2>Form validation without reportValidity()</h2>
<p>A validation error occurs only when clicking the submit button.</p>
<form>
<label>
Mandatory input <input type="text" name="first-name" required />
</label>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').reportValidity()
</script>
</html>

Output:

Using reportValidity(): Before clicking the submit button
report validation

Now, let us look into some more feature of HTML 5.1 Tablesorter.

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.

*Note: For downloading, use the following Bower command:

bower install jquery.tablesorter

2. Include the jQuery and tablesorter plugin:

Include jQuery and tablesorter plugin Javascript file inside <head> tag of your HTML page

<script type=”text/javascript” src=”jquery.min.js”></script>

<script type=”text/javascript” src=”jquery.tablesorter.min.js”></script>

3. Prepare a dummy HTML table: Prepare a dummy HTML table for testing purpose. This sortable table must have the THEAD and TBODY tag.

<table id="myDummyTable" class="tablesorter">
<tr>
<td>Name</td>
<td>Age</td>
<td>City</td>
</tr>
<tr>
<td>abc</td>
<td>25</td>
<td>Bangalore</td>
</tr>
</table>
  • Make the table sortable: Add the following script to make your dummy table sortable by using the tablesorter plugin after a document is loaded on the browser:
$(function(){
$("#myDummyTable").tablesorter();
});

 

*Note: ‘myDummyTable’ is the ID of the HTML table.

  • Full HTML code
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.9.1/jquery.tablesorter.min.js"></script>
<script>
$(function(){
$("#myDummyTable").tablesorter();
});
</script>
</head>
<body>
<table id="myDummyTable" class="tablesorter">
<tr>
<td>Name</td>
<td>Age</td>
<td>City</td>
</tr>
<tr>
<td>abc</td>
<td>25</td>
<td>Bangalore</td>
</tr>
<tr>
<td>bcd</td>
<td>24</td>
<td>Mumbai</td>
</tr>
</table>
</body>
</html>
  • Output

The output of the code is as shown below:

new input types

Now, we will look into what are the new input types introduced in HTML 5.1.

In HTML 5.1, the input types have been extended with three more input types: month, week, and datetime-local.

  • <month> : Will allow us to select a month. In Google Chrome, rendered as a dropdown calendar which allows to select a particular month of the year.

When we access the values from JavaScript, we will receive a string looking like: “2017-01” for month input.

  • <week> : Will allow us to select a week. In Google Chrome, rendered as a dropdown calendar which allows one to select a particular week of a year.

When we access the values from JavaScript, we will receive a string looking like: “2017-W02” for week input.

  • <datetime-local> : This input consists of two parts: the date, which can be selected in a similar way to the week or month input, and the time, which can be typed separately.

*Note: These tags don’t work in Mozilla Firefox yet till the time of content generation, but works in Chrome.

Let’s see an example:

For the <week> element:

<label>Week</label>

<input type=”week” onchange=”showValue(‘week’, event.target.value)”>

For the <month> element:

<label>Month</label>

<input type=”month” onchange=”showValue(‘month’, event.target.value)”>

For the <datetime-local> element:

<label>Datetime local</label>

<input type=”datetime-local” onchange=”showValue(‘datetime-local’, event.target.value)”>

For the <Script> element:

<script>
function showValue(id, value) {
document.getElementById(id).innerHTML = value;
}
</script>

Sample output of input datatypes is shown below:

datatypes

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 support@acadgild.com and keep visiting www.acadgild.com for more updates on the courses.
Previous article
Next article
>