Let’s look at the latest proposed additions to HTML, specifically HTML 5.2 and HTML 5.3. In recent years, frontend frameworks have grabbed most of the attention, reshaping how we think about development and pushing languages like JavaScript and TypeScript forward.

But we shouldn’t forget the markup language that sits beneath all of it. HTML goes through its own evolution, and it’s worth paying attention.

New Features in HTML 5.2

Here’s what landed in HTML 5.2.

`<dialog>` element

Most CSS frameworks already support building dialogues. Now HTML has a native <dialog> element. By default it’s closed and invisible until you add the open attribute: <dialog open>. You can toggle it by calling show() or close() on 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>`

You can now place <style> elements inside the <body>. You’re probably thinking “I could already do that,” and you’re right. But now it’s actually valid according to the W3C spec.

For obvious performance reasons, it’s still good practice to keep <style> in the <head>, especially when pulling in external CSS files.

Multiple `<main>` elements

Having multiple <main> elements wasn’t valid before. Now it is, with one rule: only a single <main> can be visible at a time:

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

Note that you can’t hide <main> with CSS techniques. You’ve got to use the hidden attribute.

Adding child elements to `<legend>`

In HTML 5.1, the <legend> element could only hold text. In HTML 5.2, you can drop heading elements inside it:

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

Removed items from the specification

Along with the additions, several things have been dropped from the spec.

No more `<menu>` element

The <menu> element (and <menuitem>) is out. Browsers will gradually stop supporting them. Stick to <nav> for navigation components.

Strict Doctypes

Remember these?

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

Officially gone. You can stick to the HTML5 Doctype that (hopefully) everyone’s been using for years:

<!DOCTYPE html>

Child property modification for the `<p>` element

Before HTML 5.2, you could nest inline blocks, inline tables, and floated or positioned blocks inside a <p> element. That’s no longer allowed. The <p> element now only accepts phrasing content.

HTML 5.3

At the time of writing, HTML 5.3 sits in a working draft state. Since it’s still a draft, we’ll only touch on a few interesting proposals. These could be dropped before the spec goes final.

Auto-capitalize

The autocapitalize attribute will help when working with forms, especially <input> and <textarea> elements. It accepts three values: characters (capitalise every letter), words (capitalise the first letter of each word), or sentences (capitalise the first letter of each sentence). A welcome addition if it survives.

Note that this candidate is marked as “at risk,” meaning it could be dropped from the spec entirely.

Additional Changes

More changes can be tracked by consulting the specification page.

Conclusion

It’s good to see these changes landing in HTML. They’re pushing things forward for both users and developers.

New Features in HTML 5.2

<dialog> element

Valid style in <body>

Multiple <main> elements

Adding child elements to <legend>