Get creative with HTML5 and build animations. Watch our screencast Creating Animations with HTML5 Canvas.
A glimpse of HTML 5.1
The release of the HTML5 standard about two years ago was a big deal in the web development community. Not only because it came packing an impressive list of new features, but also because it was the first major update to HTML since HTML 4.01 was released in 1999. You can still see some websites bragging about the use of the “modern” HTML5 standard today.
Fortunately, we didn’t have to wait quite that long for the next iteration of HTML. In October 2015, the W3C started working on the draft of HTML 5.1 with the goal of fixing some of the issues that were left open in HTML5. After many iterations, it reached the state of “Candidate Recommendation” in June 2016, “Proposed Recommendation” in September 2016 and finally a W3C Recommendation in November 2016. Those who followed this development probably noticed that it was a bumpy ride. A lot of initial HTML 5.1 features were dropped due to poor design or a lack of browser vendor support.
While HTML 5.1 was still in development, the W3C has already started working on a draft of HTML 5.2 which is expected to be released in late 2017. In the meantime, here’s an overview of some of the interesting new features and improvements introduced in 5.1. Browser support is still lacking for these features but we’ll refer you to at least some browsers which can be used to test each example.
Context Menus Using the
The draft version of 5.1 introduced two different kinds of
toolbar. The former is used to extend the native context menus, usually displayed by right-clicking on the page, and the latter was intended to define plain menu components. In the process of development,
toolbar was dropped, but the
context menu still remains.
<menuitem> can have one of the three types:
checkbox– allows you to select or deselect an option;
command– allows you to execute an action on click;
radio– allows you to select one option from a group.
Here’s a basic usage example which works in Firefox 49, but doesn’t seem to work in Chrome 54.
In a supported browser, that context menu should look like so:
Details and Summary Elements
<details> element with a
<summary> element inside it. Clicking on the summary toggles the visibility of the rest of the content from the
The following example has been tested in Firefox and Chrome.
That demo in a supported browser should look like so:
More input types —
"2016-W43" for the
week input and
"2016-10" for the
Initially, the drafts of 5.1 introduced two date-time inputs —
datetime-local. The difference was that
datetime-local always selected the time in the user’s timezone, while the
datetime input would also allow you to select a different timezone. During development,
datetime type was dropped and now only
datetime-local remains. The
datetime-local input consists of two parts — the date, which can be selected in a similar way to the
month input, and the time part, which can be typed in separately.
You can find some living examples of all of these new input types in the CodePen below. It works in Chrome but does not yet work in Firefox:
That demo in a supported browser should look like so:
HTML 5.1 includes several new features for implementing responsive images without the use of CSS. Each of these features covers their individual use case.
srcset Image Attribute
srcset image attribute allows you to list multiple alternative image sources which vary in pixel density. This allows the browser to pick an image of the appropriate quality for the user’s device (determined by its own pixel density, zoom level or network speed). For example, you might want to provide a lower resolution image for users with small phones on slower mobile networks.
srcset attribute accepts a comma-separated list of image URLs each with its own
x modifier, which describes the pixel ratio (amount of physical pixels in a CSS pixel) most appropriate for each image. A simple example looks like so:
<img src="images/low-res.jpg" srcset=" images/low-res.jpg 1x, images/high-res.jpg 2x, images/ultra-high-res.jpg 3x" >
In this case, if the users’s pixel ratio is equal to 1, the
low-res image will be displayed, for 2,
high-res will be shown and for 3 and above,
ultra-high-res will be chosen.
Alternatively, you can choose to display images of different sizes instead of different pixel ratios. This can be done using the
<img src="images/low-res.jpg" srcset=" images/low-res.jpg 600w, images/high-res.jpg 1000w, images/ultra-high-res.jpg 1400w" >
In this case, the
low-res image is defined to be 600px wide,
high-res to be 1000px and
ultra-high-res to be 1400px.
sizes Image Attribute
You might want to display images differently depending on the user’s screen size. For example, you could show a series of images laid out in two columns for wide screens and laid out in just one for more narrow screens. This can be achieved using the
sizes attribute. It allows you to translate the width of the screen into the space allocated for an image and then pick the appropriate image using the
srcset attribute. Here’s an example:
<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" srcset="images/low-res.jpg 600w, images/high-res.jpg 1000w, images/ultra-high-res.jpg 1400w" >
The sizes attribute defines the width of the image as 50% of the width of the viewport when the width of the viewport is greater than 40em, or 100% of the width when its lower or equal to 40em.
If it’s not enough for you to change the size of the images for each screen and you need the ability to show completely different images, then you can use the
picture element. It allows you to define images with various sources for different screen sizes by wrapping your
<img> with a
<picture> element and specifying multiple child
<source> elements. The
<source> element then acts as the source of URLs to load the images.
<picture> <source media="(max-width: 20em)" srcset=" images/small/low-res.jpg 1x, images/small/high-res.jpg 2x, images/small/ultra-high-res.jpg 3x "> <source media="(max-width: 40em)" srcset=" images/large/low-res.jpg 1x, images/large/high-res.jpg 2x, images/large/ultra-high-res.jpg 3x "> <img src="images/large/low-res.jpg"> </picture>
If you’re curious to find more about responsive images, I suggest the SitePoint article on How to Build Responsive Images with
Validating Forms with
HTML5 defines the
form.checkValidity() method which allows you to check the inputs of a form against the defined validators and returns a boolean value as a result. The new
reportValidity() is very similar — it also allows you to validate a form and retrieve the result, but additionally reports the errors to the user right in the browser. Here’s a CodePen to demonstrate the result (tested in Firefox and Chrome):
The “First name” input should be marked with an error since it’s required but empty. When working as expected, it looks like so:
Allowfullscreen for Frames
element.forceSpellCheck() method allows you to trigger spell check on text elements. This is also the first feature in this list that is not available in any of the browsers yet. Potentially, this could be used to perform spell checking on elements that haven’t been directly edited by the user.
Features That Never Made It
Some of the features defined in the first drafts of the specification were eventually removed, mostly due to lack of browser vendor interest. Here are some of the interesting mentions:
inert attribute was meant to disable user interaction for all child elements. Kind of like adding the disabled attribute to each of them.
<dialog> element provided a native implementation for popup windows. There was even a convenient form integration in mind — setting the
method attribute on
<dialog> would prevent the form from submitting itself to the server, but rather close the dialog and return the value to the creator of the dialog.
This feature seems to be still supported in Firefox, so here’s an example of how it looks:
This is by no means a complete list of the changes in HTML 5.1. There are many minor new features, changes that have been adopted from the Living Standard and other unused features that have been removed. If you would like to check out a complete list of changes, have a read of the Changes section of the specification. In the meantime, let’s hope that the browser vendors will pick up the new features quickly!
What aspects of HTML 5.1 are you most excited about? Let us know in the comments!
Get creative and start using HTML5 to build animations. Check out our screencast Creating Animations with HTML5 Canvas for more.