Introducing the new content in HTML5.1

The following example can be tested in Firefox and Chrome.

Please see SitePoint (@SitePoint)’s HTML5.1 demo on CodePen for details and summary.

This demo should look like this on supported browsers:

More input types - month, week and datetime-local

Input extends three types: month, week and datetime-local.

The first two types allow you to choose weeks or months. In Chrome, both are rendered as drop-down calendars, and you can select a certain week or month. When you get their values ​​using JavaScript, you will get a string roughly like this: "2016-W43" (week input); "2016-10" (month input).

Initially, the HTML5.1 draft introduced two date type inputs — datetime and datetime-local. The difference is that datetime-local uses the user's time zone, while datetime allows you to choose the time zone. During development, datetime was abandoned and now only datetime-local exists. The datetime-local input consists of two parts - the date, which can be selected like week and month; and the time, which can be entered separately.

The following is an example of all new types of input. It can be displayed normally in Chrome, but not in Firefox.

See SitePoint (@SitePoint) HTML 5.1 week, month and datetime inputs on CodePen.

This demo should look like this on supported browsers:

Responsive images

HTML 5.1 includes several new features for implementing responsive images without using CSS. Each feature has its own separate usage scenario.

srcset attribute

The srcset image attribute allows listing of multiple alternative image data sources with different pixel densities. This allows the browser to select an image of appropriate quality for the user's device (determined by the device's pixel density, scaling, or network speed). For example, in the case of low-speed mobile networks and small-screen phones, users should be provided with low-resolution images.

The srcset attribute accepts a comma-separated list of URLs, each with a modified x that represents the closest pixel ratio (the number of physical pixels represented by one CSS pixel) to the requested image. Here is a simple example:

In this example, if the pixel ratio of the user's device is 1, the image low-res will be displayed; if it is 2, the image high-res will be displayed; if it is 3 or greater, the image ultra-high-res will be displayed will be displayed.

​Alternatively, you can choose to display the image in different sizes. This requires using w:

In this example, the image low-res is defined as 600px wide, the image high-res is defined as 1000px wide, and the ultra-high-res is 1400px wide.

​ sizes attribute

You may want to display images differently depending on the user's screen size. For example, you might want to display an image in two columns on a wide screen and one column on a narrower screen. This can be achieved using the sizes attribute. It allows you to assign the width of the screen to an image and then select the appropriate image via the srcset attribute. Here is an example:

When the viewport width is greater than 40em, the sizes attribute defines the width of the image as 50% of the viewport width; when the viewport (viewport) width is less than or equal to 40em, the size attribute defines the image width as 100% of the viewport width.

​picture element

If changing the size of the picture according to different screens still cannot meet the needs, and you want to display different pictures according to different screens, you need to use the picture element. It allows you to define pictures with different resources for different screen sizes by specifying multiple different elements with . The element serves as the source of the image loaded by the URL.

If you want to know more about responsive images, please click How to Build Responsive Images with srcset.

Use form.reportValidity() to verify the form

The form.checkValidity() method defined in HTML5 can check whether the form complies with a predefined validator and return a Boolean value. The new reportValidity() method is similar — it also validates a form and returns the results, but it can also report errors to the user. Here's an example (please test in Firefox or Chrome):

Please see the SitePoint (@SitePoint) example HTML 5.1 report validity demo on CodePen.

The "First name" input box is required to be non-empty, if not filled in it will be marked with an error. If it goes as expected, it will look like this:

Allowfullscreen property of frames

The new Boolean attribute allowfullscreen of frames can control whether the content can be displayed in full screen through the requestFullscreen() method.

Use element.forceSpellCheck() for spell checking

The new element.forceSpellCheck() method allows you to trigger spell checking on text elements. This is also the first feature listed in this article that is not yet supported by any browser. Perhaps, this could be used to inspect elements that have not been directly edited by the user.

Features not written into HTML5.1

Some features were defined in the first draft but were eventually removed, mostly due to lack of interest from browser vendors. Here are some interesting methods:

inert attribute

The inert attribute can disable user interaction for all child elements, just like adding the disabled attribute to all child elements.

Dialog element

The