DEV Community

Cover image for Using HTML to its full extend
Danny Engelman
Danny Engelman

Posted on

Using HTML to its full extend

#html #webdev #career #productivity

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

Top comments (4)

Collapse
 
xwero profile image
david duymelinck •

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.

Collapse
 
dannyengelman profile image
Danny Engelman •

:not(:defined) { display:block }

And my favorite Tailwind like usage

Collapse
 
xwero profile image
david duymelinck •

: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.