The new HTML5.1 updates

HTML, short for hypertext markup language, is the lifeblood of the internet; without it, websites would look very different. The markup language structures text, images, and links, thus forming the basis of all content on the World Wide Web. But of course, the web has changed substantially over time, and multimedia elements are now a crucial aspect of any web design. As technology develops year on year, video content, dynamic elements, and responsive design are becoming central features of any website, and the demand for diverse, interactive elements is on the up. To keep up with the ever-increasing demands of web design, the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) began to develop an updated markup language. The new version of HTML, HTML5, launched in the fall of 2014, made implementing multimedia elements a far easier process, although many long-established detours and plugins became obsolete with the HTML5 updates. For a comprehensive introduction to HTML5, check out our article in the IONOS Digital Guide. With HTML 5.1, the next installment of HTML is finally available. But how should the procedure be executed before a new HTML is launched? What are the most important aspects of the most recent update? Which features are expected to be ditched and what will this mean for website operators?

After the release of version 4.01, it took around 15 years for a new HTML to be developed. This time, however, the updates are coming substantially faster. Barely two years after HTML5 was introduced, the first update has arrived in the form of HTML5.1. This demonstrates the importance that W3C and WHATWG now place on decreasing the intervals between updates. This response is entirely appropriate, given the accelerated development of the internet. For the update, working drafts are established in working groups and HTML features are nominated in the form of a candidate recommendation. The feasibility of implementing the elements is then assessed during a comprehensive test phase. When the test phase is complete, an official recommendation of the standard is issued. With HTML 5.1, this also occurred in a close dialog with the community; the W3C subsequently published the development process of the new HTML on GitHub. With this development, the community now has the opportunity to familiarize itself with the new standard beforehand and give feedback. GitHub is a version management service for software projects that provides a platform for a wide range of open source projects. Using GitHub, the work of several different developers can be automatically synchronized, as in the case of HTML 5.1.

One of the most significant new features of HTML5.1 is that it is supported by all common browsers. However, the central development of this version is the adaptation of multimedia content for responsive web design. Until now, different images were presented with varying resolution. Despite the fact that the <picture> container was not officially standardized for the introduction of HTML5, web developers were still able to use this element. With the new update, all common browsers now understand the <picture> element: the standardization with the new HTML now makes it official.

The <picture> element is a container that allows users to integrate image files via different source elements. Transfer time is saved and the mobile display of a website is improved as only image sources suitable for the screen size and resolution are loaded. In addition, broadband-friendly, high-resolution displays can also be used to provide alternative content. However, the new <srcset> attribute introduced with HTML 5.1 is also necessary for this: it pairs the images and the different sizes in relation to one another. The following example demonstrates how the finished integration including fallback with <img> can look in the end:

<picture>

<source media="(min-width: 1024px)" srcset="https://www.ionos.com/digitalguide/feuerwehr-1600.jpg">

<source media="(min-width: 480px)" srcset="https://www.ionos.com/digitalguide/feuerwehr-480.jpg">

<!---Fallback---> <img src="https://www.ionos.com/digitalguide/feuerwehr-480.jpg" srcset="https://www.ionos.com/digitalguide/feuerwehr-320.jpg" alt="Feuerwehrfest 2014">

</picture>

To a certain extent, the <picture> element and <srcset> go hand in hand. Even when the newest and most common browsers support both, the fallback element ensures that graphics are also displayed correctly for older browsers. The requirements for screen properties such as width and pixel density are defined within the source elements.

The launch of HTML5 saw new categories introduced for the <input> element, including ‘email’, ‘url’, and ‘date’. The type of input field was always defined with type attributes. But with type = month and type = week, users can now select days, times, months, and calendar weeks. The feature is also supported by most browsers, so the standardization with HTML 5.1 can be considered a logical consequence.

For a W3C recommendation, a new HTML feature must be implemented on at least two independent browsers during the test phase, as some recommendation candidates hang in the balance. At the time of their nomination, they are marked as ‘at risk’ if they have not yet been accepted by the browsers and/or developers involved in the standardization.

The <dialog> tag is less common than other elements, such as <picture>, as it is currently only supported by chromium-based browsers, such as Chrome and Opera. Shortly before the launch of HTML 5.1, reports of the element’s status were in disagreement: while some articles claimed it had become standardized, the <dialog> element had been removed again on the official W3C site. This tag should make integrating pop-up windows or dialog windows easier, as a rather more cumbersome JavaScript code is usually required for this. However, problems were continually arising with opening and closing the windows. Browsers that do not (yet) support the <dialog> tag can display the window, but are unable to collapse it. Almost every kind of content can be implemented within the <dialog> element - from pure text to forms to videos and images.

In addition to the <dialog> element, <keygen> and <menu> are also on the new HTML’s ‘at risk’ list. The latter elements, however, are to remain unchanged, according to the W3C. This will also extend to <menuitem> and the ‘contextmenu’ attribute. These elements and attributes can be used to create toolbars and context menus as they appear on desktop applications. As a matter of fact, the toolbar type for the <menu> element has been deleted. 

The <keygen> element shares an equally uncertain fate. Originally developed by Mozilla, the generator for cryptographic key pairs was rejected by Microsoft and even the subject of a request for removal by Google in 2015. Its ‘at risk’ status therefore came as no surprise. However, the recommendation proposed by the W3C for HTML 5.1 in September 2016 provisionally retained the <keygen> element. It now has note that it is still in the process of being removed, which will take many years. However, it will get the push at some point, meaning that the use of this element is not really recommendable.

Website owners can automatically use the HTML 5.1 and its recommended elements and attributes. As demonstrated at the outset of this feature, many have already begun to implement the new HTML. However, in addition to the official standardizations, the ‘at risk’ list and deleted elements are worthy of special attention. Should any elements and attributes mentioned on the at-risk list have been used in the current HTML, the programer should consider altering their web project. Now more than ever, the primary concern of any website owner should be compatibility with as many browsers and devices as possible.

It will also be worthwhile for webmasters to keep an eye on the W3C official website in the future; as HTML 5.1 was being completed, developers were already underway with version 5.2, with a first draft of the changes already having been published. We can see from these developments that the updates have been accelerated significantly. For website operators, this means that bugs can be fixed faster and changing requirements can be met more efficiently. Thanks to the use of GitHub for developing HTML 5.1, there is also now a chance for developers to participate in the improvement process.