Not a DIV inside/in sight/site

use: <tag-name></tag-name>

---

ANY tagname with a dash is a valid HTMLElement

Let me repeat that for clarity:

👉 ANY 🤯 tagname with a dash is a valid HTMLElement

NOT HTMLUnknownElement as some claim

---

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

Then this DIV-soup:

Becomes Semantic HTML:

---

🧠 Good to know

✅ Absolutely NO JavaScript required, its only HTML and CSS

✅ This is standard behaviour in all browsers since 2020
(When Microsoft Edge switched to the Chromium Engine)
and already in Chrome, Safari, Firefox many moons before 2020

✅ The 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 default stylesheet
You have to set 𝙙𝙞𝙨𝙥𝙡𝙖𝙮: 𝙗𝙡𝙤𝙘𝙠 / 𝙞𝙣𝙡𝙞𝙣𝙚-𝙗𝙡𝙤𝙘𝙠; on these elements yourself
(You will forget this 20 times, then you never make the mistake again)

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

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

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

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

---

🎉🎉🎉

No more hunting for that closing </div> tag

</tag-name> is just there!

---

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!

---

---

---