HTML, short for hypertext markup language, is the lifeblood of the internet; without it, websites would look very different. The markup language struc­tures text, images, and links, thus forming the basis of all content on the World Wide Web. But of course, the web has changed sub­stan­tially over time, and mul­ti­me­dia elements are now a crucial aspect of any web design. As tech­no­logy develops year on year, video content, dynamic elements, and re­spons­ive design are becoming central features of any website, and the demand for diverse, in­ter­act­ive elements is on the up. To keep up with the ever-in­creas­ing demands of web design, the World Wide Web Con­sor­ti­um (W3C) and the Web Hypertext Ap­plic­a­tion Tech­no­logy Working Group (WHATWG) began to develop an updated markup language. The new version of HTML, HTML5, launched in the autumn of 2014, made im­ple­ment­ing mul­ti­me­dia elements a far easier process, although many long-es­tab­lished detours and plugins became obsolete with the HTML5 updates. For a com­pre­hens­ive in­tro­duc­tion to HTML5, check out our article in the IONOS Digital Guide. With HTML 5.1, the next in­stall­ment 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?

The most important HTML 5.1 features at a glance

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 sub­stan­tially faster. Barely two years after HTML5 was in­tro­duced, the first update has arrived in the form of HTML5.1. This demon­strates the im­port­ance that W3C and WHATWG now place on de­creas­ing the intervals between updates. This response is entirely ap­pro­pri­ate, given the ac­cel­er­ated de­vel­op­ment of the internet. For the update, working drafts are es­tab­lished in working groups and HTML features are nominated in the form of a candidate re­com­mend­a­tion. The feas­ib­il­ity of im­ple­ment­ing the elements is then assessed during a com­pre­hens­ive test phase. When the test phase is complete, an official re­com­mend­a­tion of the standard is issued. With HTML 5.1, this also occurred in a close dialog with the community; the W3C sub­sequently published the de­vel­op­ment process of the new HTML on GitHub. With this de­vel­op­ment, the community now has the op­por­tun­ity to fa­mil­i­ar­ise itself with the new standard be­fore­hand and give feedback. GitHub is a version man­age­ment service for software projects that provides a platform for a wide range of open source projects. Using GitHub, the work of several different de­velopers can be auto­mat­ic­ally syn­chron­ised, as in the case of HTML 5.1.

and now official with HTML 5.1

One of the most sig­ni­fic­ant new features of HTML5.1 is that it is supported by all common browsers. However, the central de­vel­op­ment of this version is the ad­apt­a­tion of mul­ti­me­dia content for re­spons­ive web design. Until now, different images were presented with varying res­ol­u­tion. Despite the fact that the <picture> container was not of­fi­cially stand­ard­ized for the in­tro­duc­tion of HTML5, web de­velopers were still able to use this element. With the new update, all common browsers now un­der­stand the <picture> element: the stand­ard­iz­a­tion 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 res­ol­u­tion are loaded. In addition, broadband-friendly, high-res­ol­u­tion displays can also be used to provide al­tern­at­ive content. However, the new <srcset> attribute in­tro­duced 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 demon­strates how the finished in­teg­ra­tion including fallback with <img> can look in the end:

<picture>
<source media="(min-width: 1024px)" srcset="feuerwehr-1600.jpg">
<source media="(min-width: 480px)" srcset="feuerwehr-480.jpg">
<!---Fallback---> <img src="feuerwehr-480.jpg" srcset="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 re­quire­ments for screen prop­er­ties such as width and pixel density are defined within the source elements.

‘Month’ and ‘week’: the new HTML’s advanced form options

The launch of HTML5 saw new cat­egor­ies in­tro­duced for the <input> element, including ‘email’, ‘url’, and ‘date’. The type of input field was always defined with type at­trib­utes. 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 stand­ard­isa­tion with HTML 5.1 can be con­sidered a logical con­sequence.

‘At risk’: the HTML updates still in dispute

For a W3C re­com­mend­a­tion, a new HTML feature must be im­ple­men­ted on at least two in­de­pend­ent browsers during the test phase, as some re­com­mend­a­tion can­did­ates hang in the balance. At the time of their nom­in­a­tion, they are marked as ‘at risk’ if they have not yet been accepted by the browsers and/or de­velopers involved in the stand­ard­iz­a­tion.

The tag debate

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 dis­agree­ment: while some articles claimed it had become stand­ard­ised, the <dialog> element had been removed again on the official W3C site. This tag should make in­teg­rat­ing pop-up windows or dialog windows easier, as a rather more cum­ber­some JavaS­cript code is usually required for this. However, problems were con­tinu­ally 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 im­ple­men­ted within the <dialog> element - from pure text to forms to videos and images.

and to remain unchanged for the time being

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 ‘con­text­menu’ attribute. These elements and at­trib­utes can be used to create toolbars and context menus as they appear on desktop ap­plic­a­tions. As a matter of fact, the toolbar type for the <menu> element has been deleted. 

The <keygen> element shares an equally uncertain fate. Ori­gin­ally developed by Mozilla, the generator for cryp­to­graph­ic 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 re­com­mend­a­tion proposed by the W3C for HTML 5.1 in September 2016 pro­vi­sion­ally 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 re­com­mend­able.

What does the new HTML mean for website operators?

Website owners can auto­mat­ic­ally use the HTML 5.1 and its re­com­men­ded elements and at­trib­utes. As demon­strated at the outset of this feature, many have already begun to implement the new HTML. However, in addition to the official stand­ard­isa­tions, the ‘at risk’ list and deleted elements are worthy of special attention. Should any elements and at­trib­utes 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 com­pat­ib­il­ity with as many browsers and devices as possible.

It will also be worth­while for web­mas­ters to keep an eye on the W3C official website in the future; as HTML 5.1 was being completed, de­velopers were already underway with version 5.2, with a first draft of the changes already having been published. We can see from these de­vel­op­ments that the updates have been ac­cel­er­ated sig­ni­fic­antly. For website operators, this means that bugs can be fixed faster and changing re­quire­ments can be met more ef­fi­ciently. Thanks to the use of GitHub for de­vel­op­ing HTML 5.1, there is also now a chance for de­velopers to par­ti­cip­ate in the im­prove­ment process.

Go to Main Menu