Take a look at the https://tailwindcss.com/ page and search for "div". Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way?

You need divs all the time for layout (e.g. to group parents/children in the right way for flexbox), to target content for styling (e.g. putting a div around the name of the author to make it blue when you otherwise wouldn't tag it) and to get around CSS quirks (search for "wrapper div" for examples).

The discussion is not about the semantic expressiveness of HTML. There are certainly limitations, but these are limitations of HTML. The discussion is about whether or not "tag soup" (excessive HTML elements) is necessary for styling with modern CSS. I cannot think of an example of where it is.

> Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way?

I looked at on the first four examples, but my responses are yes and yes.

Take the figure example. The first div, which groups blockquote and figcaption, is extraneous and unnecessary for the end styling result. The second div is not extraneous because it exists for a purpose. The purpose of the second div is to place emphasis on the name or make it stand out. Thus, it should be changed to em. The third div is extraneous. With the HTML in place, grid it up.

You have the container (figure) with two columns and two rows. The image sits in the first column spanning both rows. The blockquote sits in the second column on the first row. The figcaption sits in the bottom right-hand corner. Then tweak to get your img and other parts as desired (e.g., width, spacing, font-size, etc.).

> You need divs all the time for layout (e.g. to group parents/children in the right way for flexbox) ... to get around CSS quirks (search for "wrapper div" for examples).

Sometimes flexbox is the wrong tool. Sometimes floats are better. Sometimes grid is better. If you find yourself reaching for extra HTML elements first, you should stop and re-evaluate whether your approach to achieving that layout is appropriate.

On quirks, my experience is that "quirks" are rarely actual quirks. They are usually a limited understanding of HTML and CSS.

Can you link to any complex designs you've worked on that only use semantic HTML elements and minimal divs/spans? Are you saying that any modern website that uses wrapper divs is from lack of expertise?

> Are you saying that any modern website that uses wrapper divs is from lack of expertise?

That's a loaded question. CSS frameworks (or tables, or div based designs) are also used because they save time when iterating, not because of a lack of expertise.

This is a quick and dirty example.

https://jsfiddle.net/gx4hk358/

You've never put a number of elements together in a div, and added a class and styles to that div rather than each individual element? You should try it out.

nice, now your aesthetic is coupled to your information hierarchy

style is orthogonal to semantics

I do so for semantics. I don't do it for style.

Just open up the inspector on any major website like Facebook, Twitter, Github, etc. How complex is the UI you typically work with? Once you get to a certain level of complexity, it's literally not possible to not end up with the div soup.

It's definitely possible, but it's not done.

And it's hard to take Facebook serious as an example. They're known to engage in HTML obfuscation on purpose.

https://dev.to/ganderzz/how-facebook-avoids-ad-blockers-4mdc