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:
- CanvasProxy, transferControlToProxy()
- probablySupportsContext()
- setContext()
- orceSpellCheck()
- inert attribute
- table sorting
- menu, menuitem, contextmenu
- allowFullScreen
- fastSeek()
- toDataURLHD(), toBlobHD()
- Autocomplete limited to on|off, inputmode
- ImageBitmap
- details and summary element
- dialog element
- :dir() pseudoclass
- seamless iframes
- isContentHandlerRegistered() and isProtocolHandlerRegistered() methods
- datetime, datetime-local, week, month input types
- reportValidity() method
- scoped style
- XMLDocument interface
- 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.
<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

New Meta tag
New Input Elements
<input type="week"> <input type="month">
-
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:
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:
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.