The standards that define how the most important web technologies should work keep growing, and a few months ago HTML version 5.2 became the official W3C recommendation.
Let’s take a look at the main changes.
The
Something very common in the interfaces we build are dialog boxes, modals, etc. Until now, we had different ways to implement them, none of which were very straightforward and didn’t meet accessibility standards.
This specification added the <dialog> tag, which lets us solve this in a simple way.
<dialog open>
<h2>Primer modal</h2>
<p>Este es un modal chingon</p>
</dialog>dialog has an open attribute that indicates whether it’s visible or not. To interact with it from JS, it has a couple of methods to show it .open() and hide it .close().
Using Payment Request API from an iframe
Payment Request is an API with a lot of potential that lets us delegate the work of building payment forms (among other things) to the browser, allowing payment data to be saved across sites and reused.
The problem was that before this specification, it couldn’t be used through an embedded iframe, limiting some payment gateway solutions (Stripe, PayPal, etc.). So this specification introduces the ability to use the API from an iframe.
To use it, you just need to add the allowpaymentrequest attribute to the iframe that will use the API.
<iframe allowpaymentrequest>Apple Icon Sizes
To define our application’s icons (especially if you’re building a PWA), we need to define the app icons and their sizes. The browser will decide which one to use based on the device.
The problem was that Apple didn’t support the size attribute on link tags. To work around this, Apple introduced the apple-touch-icon attribute, but this standard establishes that it should support size.
Now we just need to wait for Apple to decide to implement it.
Multiple main Elements per Page
The <main> element represents the main and unique content of the page. Until now, only one could exist per page, but when building SPAs, it can be hard to meet this requirement. That’s why now we can have multiple main elements on a page.
With the condition that only one is visible, and we must use the hidden attribute to hide the others.
Styles Not Only in the head
Now we can place style tags not only in the <head> — we can add them in the body too if we want.
<body>
<h1> titulo </h1>
<style>
h1 {
color: red;
}
</style>
</body>For performance reasons, it’s still recommended to keep them in the head.
Headings in the legend Tag
In forms, the legend tag represents a subtitle of a form field. Until now, its content could only be text, but from now on it can include h tags.
<form action="">
<fieldset>
<legend>
<h3>Subtitulo</h3>
</legend>
</fieldset>
</form>Text-Only Content in p Tags
From now on, it’s only valid for a <p> to contain text content. It’s no longer valid to add inline-block elements, inline-tables, or floated elements inside it.
Removed Elements
The keygen, menu, and menuitem elements have been removed.
Security
The nonce attribute (“number used once”) on link tags determines whether the content of the tag will be loaded and used.
Accessibility
Updated to version wai-aria-1.1, which has several accessibility improvements.
Final Thoughts
If you want to read the full list of changes, you can find it here.
Every year the web keeps growing, and with it the standards that support it. Many of these changes are already available in browsers like Chrome. Remember that you can visit caniuse to check specific support for any of them.
Lastly, what’s your favorite change?