What's new in HTML 5.2 and HTML 5.3?

This post is 4 years old. (Or older!) Code samples may not work, screenshots may be missing and links could be broken. Although some of the content may be relevant please take it with a pinch of salt.

In this article, we'll review the latest proposed additions to HTML - more precisely we'll discuss HTML 5.2 and HTML 5.3. In recent years there's been a lot of focus on the various frontend frameworks, how they change development best practices and how they spearhead the evolution of languages such as JavaScript and TypeScript.

We should not, however, forget about the most critical underlying markup language that web developers use day-in-day-out, which is HTML. Just like how JavaScript gets new syntax and additions, HTML goes through a somewhat similar iteration as well.

New Features in HTML 5.2

Let's first review the new features that make part of HTML 5.2

`<dialog>` element

Most CSS frameworks have support for creating dialogues and finally, this element has arrived natively to HTML as well. By default, the <dialog> element is closed and none of its content is visible until the open attribute is added to it: <dialog open>. The open attribute can be toggled by calling either the show() or close() methods that are exposed via the HTMLDialogElement:

<button id="toggle">Toggle dialog</button>
<dialog id="message">
  <h3>Hello</h3>
  <p>This is a dialogue.</p>
</dialog>

<script>
  const dialog = document.getElementById('message');

  document.getElementById('toggle').addEventListener('click', () => {
    console.log(dialog.open);
    dialog.open ? dialog.close() : dialog.show();
  });
</script>

Note that the DialogElement has limited browser support at the time of writing this article.

Valid style in `<body>`

It is now also possible to place <style> elements within the <body> element. Now you may be thinking, how is this a new addition - this was possible before as well, and yes, you are right; however this time it is now valid according to the W3C specification as well.

Please note that for obvious performance reasons it is good practice to use the <style> element within the <head> portion of the page, especially if there are external CSS files that we are bringing into our project.

Multiple `<main>` elements

Just like the previous point, having multiple <main> element was not valid in earlier versions of HTML, but it is now acceptable. But there's one rule that we need to remember, that is, only a single <main> element can be visible:

<main>Number 1</main>
<main hidden>Number 2</main>

Please also note that hiding the <main> element is not possible via CSS techniques, it has to be hidden using the hidden attribute.

Adding child elements to `<legend>`

In the HTML 5.1 spec the <legend> element could only contain text as its child. Now, in HTML 5.2 it is possible to add an HX element as well:

<legend><h1>Username</h1></legend>

Removed items from the specification

Along with the above mentioned additions, several things are now dropped from the spec as well.

No more `<menu>` element

The <menu> (as well as the <menuitem> element is now removed from the spec, and gradually browsers will also stop supporting it. Going forward please stick to using the <nav> element for creating navigation components within a web application.

Strict Doctypes

We all remember some of these Doctype definitions, right?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Well, we no longer need to worry about them as they have officially been removed from the spec. We can now stick to the HTML5 Doctype that, hopefully, everyone has been using in the past few years:

<!DOCTYPE html>

Child property modification for the `<p>` element

Before HTML 5.2 it was possible to add things like inline blocks, inline tables and floated and positioned blocks as a child to a <p> element. As of HTML 5.2, this will no longer be possible because this element will now only accept phrasing content.

HTML 5.3

At the time of writing this article, HTML 5.3 is also in a working draft state, and it will bring further changes to the HTML language. Since this proposal is in a draft state, we'll only focus on some of the interesting additions but these, of course, could be removed before the draft is changed to final.

Auto-capitalize

The autocapitalize attribute will help us working a lot with forms - especially with <input> and <textarea> elements. It will accept three values which will auto capitalise all the letters in the input fields, the first character of every word, or the first character of every sentence. In light of this, the values that autocapitalize can have will be characters, words or sentences. This is certainly would be a great addition to the language.

Note that this candidate is marked as "at risk" which means that it could potentially be dropped from the spec entirely.

Additional Changes

There are additional changes which can be tracked by consulting the specification page.

Conclusion

It's exciting to see some of these changes implemented in HTML, and we can see that all these changes are bringing a better experience both for the user and for the developer.