Nearly 2 years ago, HTML, the markup language used for structuring and presenting content on the web released version 5. Intended as a substitute for HTML 4 and XHTML 1 and DOM Level 2 HTML, HTML5 improved the language with support for cutting-edge multimedia such as <video>, <audio> and <canvas>, while keeping HTML readable by humans and consistently understood by computers and devices. In addition to improving and rationalizing the markup for existing documents, HTML supplied markup and APIs for complex web applications. Frequently compared to Adobe’s Flash, HTML5 is now the main content delivery standard. In the next few months, HTML 5 will upgrade to HTML 5.1.
The HTML 5.1 standard has been promoted, in unanimity, from a “Release Candidate” to a “Proposed Recommendation,” the final step before it becomes a “W3C Recommendation” and replaces HTML 5 as the current HTML standard. It’s safe to implement new features as all major browser vendors should implement the standard into upcoming versions.
While HTML 5 was a groundbreaking release, HTML 5.1 further enhances HTML with a set of additions while deprecating some obsolete or old assets. There is a lot to get excited about. The features added between HTML 5.0 and HTML 5.1 can be seen here.
The crown gem is the <picture> element.
Implemented in Chrome, Opera, Firefox, Safari and Edge, the introduction of the <picture> tag is an acknowledgement of the importance of this element. Technically <picture> is a container used to specify multiple <source> elements for a definite <img> contained therein. The browser will select the appropriate source according to the current layout of the page (ex. the box the image will appear in) and the device it will be displayed on (ex. a normal or retina display device.). A handy attribute to <picture> is the srcset attribute, which selects images to be used in different scenarios.
<picture> <source srcset="designmodo-logo-wide.png" media="(min-width: 900px)"> <img src="designmodo-fallback.png" alt="DMD"> </picture>
Obviously, HTML 5.1 will remove some elements. Unlike some news resources citing as <dialogue> as an addition to HTML 5.1, according to the official W3C Proposed Recommendation, the element is in fact removed. Other removed items include:
- The registerContentHandler(), isContentHandlerRegistered() and isProtocolHandlerRegistered() methods
- The datetime value for the type attribute of the input element
- Unimplemented parts of the autofill mechanism
- The label element is no longer Reassociatable
- The toolbar type for the menu element
- The inputmode attribute
And while <dialog> was removed, some tags, proposed for removal, are still available in the new specification, however, are labelled as “at risk.” The elements will be removed in HTML 5.2 if browser makers won’t support them properly. So it’s a good idea to avoid, for the time being, to use interpretation of elements such as <menu> and <menuitem> (specifically contextmenu), or the <keygen> tag. If you really like them … start a petition.
HTML 5.1 is set to become standard in the following month. In the meantime, W3C is already working on HTML 5.2.
A nice addition is the <meta name=”theme-color”> definition. If you are familiar with Vivaldi, the browser developed by Opera’s former CEO Jon Stephenson von Tetzchner, you’ve enjoyed the way it adapts UI toolbar colors according to the page you are on. The feature will allow developers to pick the dominant color of a web page, and implement it in different UI scenarios.
In the long run, HTML will evolve in a predictable, but intriguing, way. The core vocabulary and features will extend in four main directions:
- As upcoming specifications such as HTML 5.2
- As distinct specifications adapted as HTML5 extensions or features (see SVG)
- Modules removed from the original HTML5 specifications and standardized separately (see Canvas, the draw-by-scripting element)
- Modules as HTML5 extensions
