Using HTML to its full extend
#html#webdev#career#productivity
Danny Engelman

Danny Engelman @dannyengelman

About: Online since 1990 Yes! I started with Gopher. I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)

Location:
Amsterdam, the Netherlands
Joined:
Oct 20, 2018

Using HTML to its full extend

Publish Date: Aug 6 '25
1 3

After writing HTML for 31 years

I switched from writing DIV-soup:

<div class="article-header">Hello, sad man</div>
Enter fullscreen mode Exit fullscreen mode

to writing Semanctic HTML:

<article-header>Hello, happy man</article-header>
Enter fullscreen mode Exit fullscreen mode

No JavaScript required!

Only CSS required, to replicate DIV block behaviour

article-header {
  display:block;
}
Enter fullscreen mode Exit fullscreen mode

This works,
because modern browsers treat a <tag-name> (with a dash) as a valid HTMLElement

Also read: https://dev.to/dannyengelman/not-a-div-insidein-sightsite-18lj

Comments 3 total

  • david duymelinck
    david duymelinckAug 6, 2025

    I would not use custom tags to remove every div. Custom tags are not semantic because they are seen an a generic html element.
    As you mention you need a style for each custom tag to behave as a div, so that styles' selector list is going be as long as there are div like custom tags.

    As for the example the semantic tags already exist.

    <article>
<h1>Hello, happy man</h1>
</article>
    Enter fullscreen mode Exit fullscreen mode

    This is much better because browsers and crawlers understand those tags and they can do faster rendering and parsing respectively.

    This is Tailwind mentality. utility classes are great, lets make every class a utility class.

    • Danny Engelman
      Danny EngelmanAug 8, 2025

      :not(:defined) { display:block }

      And my favorite Tailwind like usage

      • david duymelinck
        david duymelinckAug 8, 2025

        :not(:defined) { display:block }

        Nice! I didn't know you could target custom elements like that.

        On the other hand it seems like a footgun selector. If you have a web-component that is used inline you have to override the display style.

Add comment