TL;DR;

• You can replace all <div></div> with <tag-name></tag-name>

Later written blogposts:

• (Nov 2025) https://matthewjamestaylor.com/div-custom-elements

ANY <tag-name> with a dash is a valid HTMLElement

Let me repeat that for clarity:

👉 ANY 🤯 <tag-name> with a dash is a valid HTMLElement

NOT HTMLUnknownElement as some claim

That means you can replace EVERY <div> with valid HTML

Then this DIV-soup:

Becomes valid HTML:

🧠 Good to know

✅ Absolutely NO JavaScript required, it is only HTML and CSS

✅ This is standard behaviour in all browsers.
Chrome (2016) Safari (2017) FireFox (2018) Edge (2020)

✅ The W3C HTML Validator accepts all <tag-name> Custom Elements with a dash as HTMLElement.
It does not accept <tagname> (no dash), those are HTMLUnknownElement

✅ Custom Elements do not inherit the standard [hidden] behaviour;
so you have to add that behaviour yourself in your stylesheet.

✅ Same for <DIV> display:block. You have to set 𝙙𝙞𝙨𝙥𝙡𝙖𝙮: 𝙗𝙡𝙤𝙘𝙠 / 𝙞𝙣𝙡𝙞𝙣𝙚-𝙗𝙡𝙤𝙘𝙠; on these Custom Elements yourself
(You will forget this 20 times, then you never make the mistake again)

✅ The CSS :𝙙𝙚𝙛𝙞𝙣𝙚𝙙 pseudo selector targets standard HTML tags and JavaScript defined Custom Elements

✅ Thus the CSS :𝙣𝙤𝙩(:𝙙𝙚𝙛𝙞𝙣𝙚𝙙) pseudo selector targets the 𝙪𝙣𝙙𝙚𝙛𝙞𝙣𝙚𝙙 Custom Elements; they are still valid HTMLElement, CSS applies like any element

✅ <you-are-not-bound-to-one-dash>

✅ Declarative ShadowDOM:
<template shadowrootmode="open"> creates the same undefined Custom Elements with a shadowDOM

✅ The Custom Elements API (MDN) requires JavaScript to convert undefined Custom Elements (but valid HTMLElements!) into defined Custom Elements.

🎉🎉🎉

No more hunting for that closing </div> tag

</tag-name> is just there!

Repetition is always great

✅ Absolutely NO JavaScript required, its only HTML and CSS

Are they Web Components?

Technologies NOT used:

• <template>
• shadowDOM
• Custom Elements API (create defined elements with JavaScript)

🛠 Prove ANY tagname with a dash IS a HTMLElement

for:

        <div></div>
        <tagname></tagname>
        <tag-name></tag-name>
        <tag-name-foo></tag-name-foo>
        <tag-name-bar></tag-name-bar>

NO MORE DIV-SOUP!

✅ If you believe AI over a random Dev.to post:

Note: every evergreen browser knows what a Custom Element is, just ask yourself:

(after reading: https://web.dev/articles/declarative-shadow-dom)

• What happens with <tag-name>, and CSS applied, when you omit the <template>?

<tag-name>
  <template shadowrootmode="open">
  </template>
</tag-name>