What’s new in HTML 5.1 (Part 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.

1. Context Menus Using the menu and menuitems Elements

The draft version of 5.1 introduced two different kinds of menu elements: context and 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.

You can use the <menu> tag to define a menu consisting of one or several <menuitem> elements and then bind it to any element using the contextmenu attribute.

Each <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.

In a supported browser, that context menu should look like so:

2. Details and Summary Elements

The new <details> and <summary> elements implement the ability to show and hide a block of additional information by clicking on an element. This is something that’s often done using JavaScript which can now be done using the <details> element with a <summary> element inside it. Clicking on the summary toggles the visibility of the rest of the content from the <details> element.

That demo in a supported browser should look like so:

3. More input types — month, week and datetime-local

The arsenal of input types has been extended with three more input types: month, week and datetime-local.

The first two of these will allow you to select a week or a month. In Chrome, both of them are rendered as a dropdown calendar which either allows you to select a particular month of the year or a week. When you access the values from JavaScript you will receive a string looking approximately like these: “2016-W43” for the week input and “2016-10” for the month input.

Initially, the drafts of 5.1 introduced two date-time inputs — datetime and 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 week or month input, and the time part, which can be typed in separately.

That demo in a supported browser should look like so:

4. Responsive Images

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.

Source : https://www.sitepoint.com