What's new in HTML5.1

The following example can be tested in Firefox and Chrome.

Please see the SitePoint (@SitePoint) 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 firfox.

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

This demo should look like this on supported browsers:

　Responsive images

HTML5.1 includes several new features that enable 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:

<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 example, if the pixel ratio of the user 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.

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

<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 example, the image low-res is defined to be 600px wide, the image high-res is defined to be 1000px wide, and the ultra-high-res is 1400px wide.

　sizes property

You may want to display images in different ways 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. The following is 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"
>

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 50% of the viewport width. The width is defined 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.

<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 want to know more about responsive images, please click How to Build Responsive Images with srcset.

Use form.reportValidity() to validate the form

The form.checkValidity() method defined in HTML5 can check whether the form conforms to 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 is 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 works as expected, it will look like this:

Allowfullscreen property of frames Allowfullscreen property of frames

The new boolean property allowfullscreen of frames can control whether content can be accessed via requestFullscreen( ) method to display content in full screen.

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 included in HTML 5.1

Some features were defined in the first draft but were ultimately removed, mostly due to lack of interest from browser vendors. Here are some of the 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