[TonyAlicea10]

The HTML spec says divs are the element of last resort. This issue isn’t that they’re bad. The issue is they are reached for far too quickly.

Also if you think massive numbers of nested divs don’t have a performance impact in the DOM when reusable components are nested (because “styling”), you’re wrong.

[troupo]

> The HTML spec says divs are the element of last resort. This issue isn’t that they’re bad. The issue is they are reached for far too quickly.

The problem is that HTML gives us very few tools to do anything useful. And you can only push certain elements so far. Div and span are generic elements with no semantics attached. You want a layout? Div. You want a change to a part of text? Span.

The only reason they are called "elements of last reserve" because it's only true if you remember that HTML is, has been, and forever will be a tool to display static text, badly. That's why you have article, section, p, and other text-oriented elements. But the moment you want something beyond that? Welcome to divs.

[TonyAlicea10]

> You want a change to a part of text? Span.

You haven’t read the HTML spec. There are an incredible amount of elements, including for changing just a piece of text (b, i, strong, em, and many more). Plus elements for visual aspects like images.

You need divs and spans for extra structure that isn’t there for anything but visual purpose. For things you wouldn’t describe to someone who couldn’t see the page. That’s a lot less than you think.

HTML authoring and choosing the right elements can be fun. But you have to stop thinking visually and start thinking semantically.

[troupo]

> There are an incredible amount of elements

That is, a dearth of them. Most of them are still there defining basically just text content.

> Including for changing just a piece of text (b, i, strong, em, and many more)

Not as many as you'd think. If I need to layout text in a certain way and mark some of it in a certain way, there's nothing better than <span>.

> But you have to stop thinking visually and start thinking semantically.

This sentence carries less meaning than you think it does.

E.g. there's the <article> tag. It was literally originally proposed for text content only: https://www.w3.org/WAI/GL/wiki/Using_HTML5_article_element The spec twists this to become more generic and encompassing all other content, and still does not escape framing it as mostly text-ish elements: https://html.spec.whatwg.org/multipage/sections.html#the-art...

And here's MDN intro saying "oh, yes, if you want cards for your product catalog, or an interactive widget, use <article>" https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

Yup. "article" is "semantic" to represent cards in a product catalog.

You basically have to construct a parallel hierarchy of elements in your head with specific behaviours that doesn't match what element names mean, or used to mean.

There's nothing fun in figuring out 30 years of history of a largely outdated tech being twisted to conform to the new world of complex layouts and interactions.