Not a DIV inside / in sight / in site

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 that support the Custom Elements API. Since 2020 in all browsers when Microsoft Edge switched to the Chromium Engine. And already in Chrome, Safari, Firefox many moons before 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

✅ The UA - UserAgent StyleSheet (Browsers default stylesheet)
defines CSS [hidden] { display:none }.
But Custom Elements do not inherit the default stylesheet;
so you have to add that behaviour yourself in your stylesheet.

✅ <DIV> is display:block only in the UA StyleSheet
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>

---

---

---