What’s new in HTML5.1?

HTML5 buttresses interactive and responsive technologies that would have been very difficult to achieve when using either XHTML or earlier versions of HTML. With HTML5 specifications now considered “feature-complete,” the World Wide Web Consortium (W3C)—a body that standardized HTML5 and previous versions of HTML—has been pondering additions of new features to make the development of web applications even better.

The web development industry is evolving very fast. Really fast! Therefore, a new version of HTML5—commonly known as HTML5.1—has been proposed to make the development of responsive and interactive websites faster. The development of HTML5.1 heralds the emergence of new frontiers for web developers to improve on video captioning, better forms, and spell checking.

New features introduced in HTML5.1

Here are the new features that have been introduced in HTML5.1:

#1: Improved video experience

The <video> element has been enhanced to capture all the required video and audio-related data. The src, preload, mediagroup, autoplay, loop and controls attributes have been incorporated in the element to capture all the characteristics of the video file being played on a browser. However, a new attribute: the “poster” has been added to HTML5.1.

The primary function of the poster attribute will be to provide the address of the image file which the user agent can show if no video data is displayed. If the attribute is available, then it must contain a valid non-empty URL which gives the address of the image file for the video file. Also, the video element in HTML5.1 can represent the text track cues where the text track cue can be set active while the track is being played.

#2: Improved capabilities of web forms

One thing’s for sure with the coming up of HTML5.1—improved capabilities and user experiences when working with web forms. New and fancier form attributes have been introduced in HTML5.1. Some of these attributes include:

• URL. It specifies a URL input.
• Tel. It specifies the telephone number input type.
• Search. It specifies the search box on a web page.
• Disabled. When used on a form, the content is grayed out and the browser prevents web users from focusing on the disabled form control.
• Multiple. This attribute has been included to allow multiple controls such as email and file be used concurrently on a form.

#3: Spell checking

If you want a language specification that has improved capabilities for spelling and grammatical mistakes checking, then HTML5.1 is one of them. The spellcheck attribute has been enhanced in HTML5.1 to specify whether the HTML element should be checked for spelling and grammatical mistakes or not.

#4: Improved image accessibility features

With HTML5.1, you’ll no longer need CSS or even JavaScript code to handle images in responsive websites. As a result of this feature, you’ll benefit from the natively-optimized image loading if the internet bandwidth is low. HTML5.1 has introduced the following concerning image accessibility:

• Art direction-based selection. This feature allows you to specify how you’d like your image to be viewed. You can load an image that’s optimized for specified screen dimensions in HTML5.1.
• Device-pixel-ratio-based selection. The device-pixel-ratio based selection will allow you to specify whether you want to view the image on a high DPI display or not.
• Image format-based selection. If the browser can’t support additional image file types that, then the image format-based selection will provide better and improved performances for smaller file sizes.