10 New Features of HTML 5.1

HTML 5.1

The HTML specification got a major overhaul a couple of weeks ago when W3C published its new HTML 5.1 recommendation in November 2016. In its recent blog post, W3C called the new major release the gold standard, as HTML 5.1 provide us with new ways of how we can use HTML to create more flexible web experiences.

Note: that currently not all browsers support all of these features, so don’t forget to check browser support before you use them in production.

1. Define multiple image resources for responsive design

Code:

<picture>
  <source srcset="mobile.jpg, mobile-hd.jpg 2x" media="(max-width: 360px)">
  <source srcset="large.jpg, large-hd.jpg 2x" media="(min-width: 1920px)">
  <img src="default.jpg" srcset="default-hd.jpg 2x" alt="your image">
</picture>

In HTML 5.1, you can use <picture> tag together with the srcset attribute to make responsive image selection possible. The <picture> tag represents an image container that allows developers to declare different image resources in order to adapt to the UA’s viewport size, screen pixel density, screen type, and other parameters used in responsive design.

2. Show or hide extra information

Code:

<section>
  <h2>Error Message</h2>
  <details>
    <summary>We couldn't finish downloading this video.</summary>
    <dl>
      <dt>File name:</dt><dd>yourfile.mp4</dd>
      <dt>File size:</dt><dd>100 MB</dd>
      <dt>Duration:</dt><dd>00:05:27</dd>
    </dl>
  </details>
</section>

With the <details> and <summary> tags, you can add extended information to a content piece. The extra information isn’t shown by default, but if users are interested, they have the option to take a look. In your code, you are supposed to place the <summary> tag inside <details>. After the <summary> tag you can add the extra information you want to hide.

3. Add functionality to the browser’s context menu

<button contextmenu="rightclickmenu">Right click me</button>
  <menu type="context" id="rightclickmenu">
  <menuitem type="checkbox" label="I ♥ HTML5.1.">
</menu>

With the <menuitem> element and its type="context" attribute, you can add custom functionality to the context menu of the browser. You need to assign <menuitem> as the child element of the <menu> tag. The id of the <menu> element needs to carry the same value as the contextmenu attribute of the element to which we want to add the context menu to (which is the <button> element in the example above).

NOTE:

However the browser support for this feature is not very good yet. Chrome 54 doesn’t support it, and Firefox 50 only allows the presence of one extra context menu.

4. Nest headers and footers

Code:

<article>
  <header>
    <h1>Article Title</h1>
    <aside>
      <header>
        <h2>About the author</h2>
        <p><a href="#">Email</a><a href="#">Twitter</a></p>
      </header>
      <img src="photo.jpg" alt="Author photo">
      <p>Author bio ... </p>
    </aside>
  </header>
  <p>Article intro</p>
  <p>Other paragraphs ...</p>
</article>

HTML 5.1 allows you to nest headers and footers if each level is contained within sectioning content.

This feature can be useful if you want to add elaborated headers to semantic sectioning elements, such as <article> and <section>. The code example below creates a sidebar inside the header, the <aside> tag is also a sectioning element, and adds extra information about the author inside it. The sidebar inside the header has its own header as well, with a subtitle and the author’s contact info.

5. Use cryptographic nonces for styles & scripts

Code:

<script nonce='adfjaf8eda64U7'>
  // some JavaScript
</script>

With HTML 5.1, you can add cryptographic nonces to styles and scripts. You can use the nonce attribute within the <script> and the <style> elements. A cryptographic nonce is a randomly generated number that can be used only once, and has to be regenerated for every page request. A nonce can be used by the Content Security Policy of a website to decide if the certain script or style should be applied on the page. In Google Developers’ Web Fundamentals you can read more on the proper usage of nonces and CSP.

6. Create reverse link relationships

Code:

<!-- Current document is the parent of the linked category.html document -->
<link rev="parent" href="category.html">

You can add the rev attribute to your links again. It was previously defined in HTML 4, however it wasn’t supported by HTML5. HTML 5.1 allows developers to use this attribute again for the <link> and <a> elements. The rev attribute is the opposite of rel, it specifies the relationship of the current and the linked document in the reverse direction (how the current document is related to the linked one).

The rev attribute has been included in the HTML 5.1 specs primarily to support RDFa which is a widely-used structured data markup format, and extends the HTML language.

7. Use zero-width images

Code:

<img src="yourimage.jpg" width="0" height="0" alt="">

HTML 5.1 makes it possible to create zero-width images by permitting developers to use the width attribute with 0 as value. This feature can be useful if you want to include images that you don’t want to show to users, such as tracking image files. Zero-width images are recommended to be used together with empty alt attributes.

8. Separate browser contexts to prevent phishing attacks

Code:

<a href="#" target="_blank" rel="noopener">
  Your link that won't make troubles
</a>

Using same origin links on your website can eventually get you into some trouble. The vulnerability is called the target=”_blank” exploit, and it’s a nasty phishing attack. You can (safely) test how this attack works on this clever Github demo page, and its background code you can find here on Github.

HTML 5.1 has standardized the usage of the rel="noopener" attribute which separates browser contexts therefore eliminates this issue. You can use rel="noopener" within the <a> and <area> elements.

9. Create an empty option

HTML 5.1 allows developers to create an empty <option> element. The <option> tag can be the child element of the <select>, <optgroup>, or <datalist>elements. The possibility of having an empty <option> can be useful if you don’t want to suggest which option users should select, and which can be useful when you want to design user-friendly forms.

10. Handle figure captions more flexibly

The <figcaption> tag represents a caption or a legend belonging to the <figure> element which is a container for visuals, such as illustrations, photos, and diagrams. Previously, the <figcaption> tag could be used only as the first or last child of the <figure> element. HTML 5.1 has loosened this rule, and now <figcaption> can appear anywhere within its <figure> container.

That’s the end of this blog! Thanks for reading! If you like it, please hit 👏👏👏