HTML5 is owned by the World Wide Web Consortium (W3C), which provides standards across the web so that the protocols from all over the world are inter accessible. In November 2016, W3C updated the long running HTML 5, which is the first minor update in 2 years. Many initial HTML 5.1 features were dropped due to faulty design and lack of browser vendor support.
Although, there are few elements and improvements brought over to HTML 5.1, it is still a minor update. Some of the new elements contain combo tags, which now include <dialog>, <details>, <summary> and <picture>, providing developers even more room for expression.
W3C has already started working on a draft of HTML 5.2 which is expected to be released near the end of 2017. In the meantime, we are presenting some interesting new features and improvements introduced in version 5.1. You can make use of these features without touching JavaScript. Not all browsers support these features, so it’s better you check browser support before you use them in production.
Table of Contents
14. Prevent Phishing Attack
Most of the people using target=’_blank’ have no idea about a curious fact – the newly opened tab can alter the window.opener.location to some phishing page. It will execute some malicious JavaScript code on the opener-page on your behalf. Because users trust the page that is already opened, they won’t get suspicious.
In order to completely eliminate this issue, HTML 5.1 has standardized the usage of the rel=”noopener” attribute which separates browser contexts. The rel=”noopener” can be used within <a> and <area> tags.
<a href="#" target="_blank" rel="noopener"> The link won't make trouble anymore </a>
Read: 24 CSS3 and HTML5 Animation Tools for Designers
13. Handle Figure Caption Flexibly
The <figcaption> tag represents a caption or legend associated with <figure> element, which act as a container for visuals like pictures, diagrams, illustration etc. In early HTML versions, <figcaption> could be used only as the first or last child tag of the <figure> element.
HTML5.1 has loosened this restriction, and now you can use <figcaption> anywhere within its <figure> container.
<article>
<h1>The Headline of todays news </h1>
<figure>
<img src="petrolimage.jpeg" alt="Petrol price drops">
<figcaption>A man fueling up his car at petrol station</figcaption>
</figure>
<p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>
12. Spell Checking
The spellcheck is an enumerated attribute whose keywords are the empty string, true and false. The true state indicates that the element is to have its spelling and grammar checked.
The element.forceSpellCheck() forces the user agent to report spelling and grammar error on the text element, even if the user have never focused the element.
<p spellcheck="true"> <label>Name: <input spellcheck=" false" id="textbox"></label> </p>
11. The Empty Option
The new version of HTML allows you to create an empty <option> element. It can be a child element of <optgroup>, <datalist> or <select> elements. You will find this feature helpful while designing user-friendly form.
10. Allow Full Screen for Frames
The boolean allowfullscreen attribute, developed for frames, lets you control whether the content can present itself on full screen by using requestFullscreen() method. For example, lets take an iframe that embeds a player from YouTube. The allowfullscreen attribute is required to enable the player to show its video fullscreen.
<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p> </header> <main> <p>Check out my new video!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>
9. Nested Header and Footer
HTML 5.1 allows you to nest header and footer within another header. You can add a header or footer to the header element if they are themselves contained within sectioning content.
The feature can be pretty useful if you want to add elaborated headers to semantic sectioning elements, like <section> and <article>.
In the code given below, the <article> contains a <header> which has an <aside> tag which itself contains a <header> tag.
<article>
<header>
<h2>Lesson: How to cook chicken</h2>
<aside>
<header>
<h2>About the author: Tom Hank</h2>
<p><a href="./tomhank/">Contact him!</a></p>
</header>
<p>Expert in nothing but Cooking. The cookbook sideshow.</p>
</aside>
</header>
<p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
Remove as much air as possible from the bag and seal it. </ins></p>
</article>
8. Zero Width Images
The new HTML version allows you to add image of zero size. This feature is used when image is not intended for user. If an img element is being used for purposes other than displaying an image, example, as part of a service to count number of page views, use width and height attribute with 0 value. For zero width images, it is recommended to use empty attributes.
<img src="theimagefile.jpg" width="0" height="0" alt="">
7. Validating Form
The new reportValidity() method allows you to validate a form and retrieve the results, and reports the errors to the users right in the browser. User agents may report more than one constraint violation, if the element suffers from multiple problems at the same time. As in this case, the “password” input should be marked with error since it is mandatory but empty.
<h2>Form validation</h2>
<p>Enter details</p>
<form>
<label>
Mandatory input <input type="password" name="password" required />
</label>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').reportValidity()
</script>
6. The Browser’s Context Menu
In HTML 5.1, you can use the <menu> tag to define menu consisting of one or more than one <menuitem> elements, and then bind it to any element using the contextmenu attribute. The id of the <menu> element should have the same value as the contextmenu attribute of the element to which we want to add the context menu to.
Each <menuitem> can have one of the three forms:
- radio – Select option from a group
- checkbox – Select or deselect an option
- command – Execute an action on click
<h2 contextmenu="popup-menu">
Right click to get the context menu demo.
</h2>
<menu type="context" id="popup-menu">
<menuitem type="checkbox" checked="true">Checkbox 1 </menuitem>
<menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem>
<menuitem type="radio" name="group1">Radio button a</menuitem>
<menuitem type="radio" name="group1" checked="true">Radio button b</menuitem>
<menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu>
5. Use Cryptographic Nonces with scripts and styles
A cryptographic nonce is a randomly generated number which can be used only one, and it has to be regenerated for every page request. This nonce attribute can be used within the <script> and the <style> elements.
It is generally used by the Content Security Policy of a website to decide if a certain style or script should be implemented on the page. In the given code, the value is hard-coded, but in real world scenario, its value is generated randomly.
<script nonce='d3ne7uWP43Bhr0e'> The JavaScript Code </script>
4. Reverse Link Relationship
The rev attribute was defined in HTML 4, however it wasn’t included in HTML5. The W3C decided to include rev attribute again for the <a> and <link> elements. The rev attribute specifies the relationship of the current and the linked document in the reverse direction. It has been included to support widely used structured data markup format, RDFa.
Let’s take an example of two documents, each containing a lesson, the link between them can be defined with rel and rev attributes as shown…
//Document with URL "chapter1.html" <link href="Lesson2.html" rel="next" rev="prev"> //Document with URL "chapter2.html" <link href="Lesson1.html" rel="prev" rev="next"> <link href="Lesson3.html" rel="next" rev="prev">
3. Show/Hide Information
The new <details> and <summary> elements allows you to add extended information to a piece of content. You can show or hide a block of additional information by clicking on the element. The additional information is hidden by default.
In your code, you are supposed to put the <summary> tag inside <details> tag as shown. After <summary> tag you can add the rest of the content that you want to hide.
<section>
<h3>Error Message</h3>
<details>
<summary>This file hasn't been download due to network error.</summary>
<dl>
<dt>File name:</dt><dd>Passcode.txt</dd>
<dt>File size:</dt><dd>8 KB</dd>
<dt>Error code:</dt><dd>342a</dd>
</dl>
</details>
</section>
2. More Input Types
The HTML input elements has been extended with three more input types – week, month and datetime-local.
As the name suggests, the first two allows the users to select a week or a month. Depending on the browser support, both of them are rendered as a dropdown calendar that lets you select either a particular week or month of a year.
The datatime-local specifies a date and time input field, with no time zone. The data can be selected in a similar way to the month or week input, and the time can be typed in separately.
<section>
<h2>
Week, Month and Datetime-local
</h2>
<form action="action_page.php">
Choose a week:
<input type="week" name="year_week">
<input type="submit">
</form>
<form action="action_page.php">
Birthday (month and year):
<input type="month" name="bdaymonth">
<input type="submit">
</form>
<form action="action_page.php">
Joining (date and time):
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
</section>
1. Responsive Images
W3C has introduced some new features for implementing responsive images without the use of CSS. These are…
The srcset Image Attribute
The srcset attribute allows you to define multiple alternative image sources which vary in pixel density. It will allow the browser to select an image of suitable quality according to user’s device. For example, it would be nice to display a lower resolution image for users with mobile devices on slower network.
You can use srcset attribute with its own x modifier that describes the pixel ratio for each image. As the example shown, if the user’s pixel is equal to 3, high-res image will be displayed.
<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 1x, clicks/medium-res.jpg 2x, clicks/high-res.jpg 3x" >
Instead of different pixel ratio, you can select to display images of different size using the w modifier. In this case high-res image is defined to be 1600px.
<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >
The sizes Image Attribute
Most of the time authors like to display different images for different screen size. This can be done using sizes attribute. It lets you transform the width of the screen into space assigned for an image, and then pick the suitable image using the scrset attribute. For example…
<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" srcset="clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w" >
In this case, the sizes attribute defines the width of the image as 100% of the width of the viewport when the width of the viewport is greater than 25em, or 60% of the width when it’s lower or equal to 25em.
The picture Element
The picture element allows you to declare images with several sources for different screen size. This is can be done by wrapping <img> with <picture> element and describing multiple child <source> elements.
Read: 35+ Useful HTML and CSS Frameworks For Web Designers
The <picture> tag alone won’t display anything. You are supposed to declare the default image source as the value of src attribute, and the alternative image source go within scrset attribute as shown…
<picture>
<source media="(max-width: 25em)" srcset="
clicks/small/low-res.jpg 1x,
clicks/small/medium-res.jpg 2x,
clicks/small/high-res.jpg 3x
">
<source media="(max-width: 60em)" srcset="
clicks/large/low-res.jpg 1x,
clicks/large/medium-res.jpg 2x,
clicks/large/high-res.jpg 3x
">
<img src="clicks/default/medium-res.jpg">
</picture>
