new html tags

While reading this article, I learned about some HTML tags I wasn’t aware before, feeling ashamed to admit that. What a good read, now I lowkey would get into Svelte…

dialog

web.dev link

The dialog element looks like this:

<dialog id="dialog">
  <h2>some content</h2>
</dialog>

It can be controlled in JavaScript via these methods:

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

It has support for the Esc key to hide it, focus on the first element of the modal, all elements in the page are behaving as if pointers-behaviour: none was set.

summary and details

web.dev link

This is the accordion of HTML. It provides native support for the toggle interaction as well.

<details>
  <summary>Trigger</summary>
  <p>content you need to click the trigger for to read.</p>
</details>

They have only been fully supported in modern browsers since January 2020.

output

From an article I read thanks to hackernews here, I’ve discovered about this as it offers great accessibility support. It’s been around since 2008.

has a for="" attribute.

Here you list the ids of any elements the result depends on, separated by spaces:

+ =

For most users, nothing changes visually. But in the accessibility tree it creates a semantic link, letting assistive technology users connect the inputs with their calculated result.

template