> there's a mismatch between how HTML is designed and what it actually has to do in the wild.
There is an entire HTML spec that explains what specific elements are for. And I agree that is not perfect, but this is what we have and if we at least don't follow it, we will be building even more shitty websites.
> Maybe using the "correct" element structure is going to be much more complex in a given situation due to the fact that you've got CSS rules that will be in scope that will style it for another purpose, and you'll have to undo and override all that work bit by bit to get it to match what the designer envisaged in this particular placement.
> So instead you just use some divs, stick a few generic classes on stuff and get on with your day.
Some "web developers" want to use `div`s instead of `button`s because it takes less CSS to style the former, but what they don't realize is that they are making theirs (the "developer") life easier, but are giving a bad UX to people that use assistive technologies and someone else, guess who? Search engines!
Search engines are basically blind entities that only use the keyboard. So, if you use a `div` they will see it as a `div`, they won't see the bunch of classes you added to make it look like a button.
So, it's a better good experience and search engine optimization to use semantic HTML. This means if you need a button use a `button`, if you need a link use an `a`, if you need an image that when you click on it it will take you to another page, surround the `img` with an `a` tag and use `aria-label` to announce what clicking on that link will do for the user, e.g.,
<a href="/learn-semantic-html" aria-title="Visit the learn semantic HTML page">
<img src="/img/surprised-pikachu.jpg" alt="Surprised Pikachu meme">
A good craftsman knows its tools and the best way to use them because each one of them has a purpose. You shouldn't use a screwdriver to hit a nail.
We have a situation where these "correct" elements have different sets of default styles in different browsers and require different sets of styling rules to make them look how the designer wishes in each.
If your starting point is that is it any wonder that sites are generally so shitty? A good starting point would be true separation between the semantic and the visual.