14 January 2017,
 Off
Organic Traffic

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.

A Look Into Proper HTML5 Semantics

A Look Into Proper HTML5 Semantics

If you carefully plan the structure of your HTML documents, you can help computers make sense of the…Read more

In this article, we’re going to have a look at its new features you can make use of without touching JavaScript, however the improvements of the JavaScript background are also remarkable, as you can see it in the official change log.

HTML 5.1 RecommendationHTML 5.1 Recommendation

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. If you are interested in the further development of the HTML standard, you can check out the working draft of HTML 5.2 as well.

Recommended Reading: A Look Into: ARIA Web Standards & HTML Apps Accessibility

1. Define multiple image resources for responsive design

In HTML 5.1, you can use tag together with the srcset attribute to make responsive image selection possible. The 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.

The tag itself doesn’t display anything, it functions merely as context for the multiple image resources. You need to declare the default image resource as the value of the src attribute of the tag, and the alternative image resources go within the srcset attributes of the and elements.

Code example:


	
	
  your image

2. Show or hide extra information

With the

and

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

tag inside

. After the

tag you can add the extra information you want to hide.

Code example:

Error Message

We couldn't finish downloading this video.
File name:
yourfile.mp4
File size:
100 MB
Duration:
00:05:27

This is how this code example looks like in Firefox 50.0.2:

Details and summary tags in practiceDetails and summary tags in practice

3. Add functionality to the browser’s context menu

With the element and its type="context" attribute, you can add custom functionality to the context menu of the browser. You need to assign as the child element of the

tag.
The id of the

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

The tag can have three different types, "checkbox", "command" (to which you need to add an action with JavaScript), and radio. It’s possible to add more than one menu item to a context menu, 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. Below you can see how the code example works in Firefox 50.

Contextmenu attributeContextmenu attribute

4. Nest headers and footers

HTML 5.1 allows you to nest headers and footers if each level is contained within sectioning content. The note below is a screenshot from the W3C docs, and advises developers about the right way of header and footer nesting.

W3C note about header nestingW3C note about header nesting

This feature can be useful if you want to add elaborated headers to semantic sectioning elements, such as

and

. The code example below creates a sidebar inside the header, the