The biggest use case for semantic html is accessibility imo. Given Aria tags are the main workhorse there, I say semantic html has failed to provide value there.
Given all the html created via a component like pseudo element, it further questions the value added imo.
Potentially unpopular opinion, but semantic HTML failed to adequately solve any problems it has set out to solve. Even selectors are better done via something like css modules anyway.
Sure the end compiled HTML is a mess, but that’s like complaining your bytecode or binary is messy. Who cares?
Sure the end compiled HTML is a mess, but that’s like complaining your bytecode or binary is messy. Who cares?
Everyone who downloads more data than necessary cares, or whose browser has to spend more battery power to parse that HTML, or who has to wait because you made a page that can't being rendered as it streams in, or any developer who needs to debug that mess in 2 years time because you couldn't write something simple and understandable and you've moved on to a new role.
(Not that any of those things are about semantic HTML specifically; they're more about caring about the structural output of your code.)
More than necessary for what? How do they even define this criterion?
And come on, html parsing is the cheapest thing of all that happen there. The most of work goes into font rendering and jpeg decompression. Every paragraph adds CPU workload incomparable to any amount of divs, literally tens of thousands of calculations, if your system uses hinting, kerning, etc.
who has to wait because you made a page that can't being rendered as it streams in
This is just a personal preference. At the times of 14.4k and no-images button in the toolbar it was useful, but not today when you can download a megabyte per ping time. I like to see sites as they were intended to be seen and not jump around and change colors with every chunk of html or css. I actually hate sites like that.
I like to see sites as they were intended to be seen and not jump around and change colors with every chunk of html or css.
No one likes layout shifting. There's no reason why a site should be jumping around just because the HTML is being rendered as it streams though. Stopping layout shift is more to do with prioritizing layout CSS (inlining important styles for example), avoiding dynamic content injection (eg server side rendering instead of lazy loading content) and providing proper hints to the browser about where things should go, how big things are, and so on.
That’s what sites do today: they load everything via small bootstrap code, in prioritized chunks, and render them when it’s done. It’s not a developer’s fault that there is no browser-way to load apps with particular requirements. Browser is not a development/deployment platform, it’s just a target like ELF or PE. An average company or a person is unable to ship and maintain carefully crafted EXEs and stay in business, neither in web, nor in desktop. You’re talking about scene, not software development. Scene is cool. Scene is no business.
That’s what sites do today: they load everything via small bootstrap code, in prioritized chunks, and render them when it’s done.
That's what sites did do until the last two or three years. Now things are moving back to server side rendering because it's a tiny bit faster for some use cases.
It’s not a developer’s fault that there is no browser-way to load apps with particular requirements.
Counterpoint, this is what bad people use div soup for:
» Facebook adds 5 divs, 9 spans and 30 css classes to every single post in the timeline to make it more difficult to identify and block 'Sponsored' posts, oh my.
A long term fix for that sort of nonsense is a process that runs separate from the rendering engine, whether in the browser or host OS, and uses computer vision and ML to identify blocks of advertising.
A true win for the opposition would be to study the literature for ad jamming techniques that would turn people against the advertised content, and alter the ads to be long term subconsciously unappealing / damaging. (eg. "McDonalds McRoach Sandwich")
Bonus points if it could unravel dark patterns, gamification, and engagement optimizations.
Semantic tags would have been great if we'd left most or all styling up to browsers and user preference. Agreed that it's of dubious benefit if you can use other means to fix things like a11y (and, as you note, that's totally possible). The idea was probably a zombie as soon as browsers started moving user defined styling to less-prominent areas of the UI, which was a long time ago.
[EDIT] I'd to add that for the specific but now-niche use case of writing HTML by hand (which, in an editor with good tag completion and auto-formatting, I find almost as fast as, and far more powerful than, Markdown) semantic tags can be really nice.
I really have a hard time seeing semantic HTML catching on outside of big business where it’s audited and required for purchases.
First modern CSS destroyed semantic styling. Selectors are written using mostly class names and there is not consistency between article or header from one site to the next. Even buttons are different. Even on a single page there are probably instances where styling by element is undesirable.
Second, while there are plenty of tools out there to tell you that you have a11y errors, few developers see direct benefit to using semantic elements. Screen readers are difficult to use if you have spent a lifetime as a visual user and keyboard shortcuts still don’t seem to be there. Screen reader provide all sorts of nav options based on semantics, but visual mode users are usually stuck with Tab and maybe Arrows. Until visual users can clearly benefit from semantics, it will always be second class.
Third, it’s confusing. Webdev is already a pile of gotchas and obtuse footguns. Semantic HTML is another set of knowledge that developers need to memorize and only get feedback about when using analysis plugins. You can test when a button does or does not work, but it’s harder to test if your semantic HTML is correct.
> Until visual users can clearly benefit from semantics, it will always be second class.
Visual users clearly benefit from the semantics implied by visual styling. Space around content, borders, font changes, phrase-level changes like italics etc. These all layer subtlety, dimension, nuance and structure to a document/page/app. Visual users "get it for free".
If you took away all those things, visual users would feel the loss of context just as non-visual users do.
> modern CSS destroyed semantic styling.
Modern CSS methods didn't "destroy" semantic styling. Any kind of styling refines or highlights the semantics of the content it applies to. The modern techniques have sped up feature development for the visual-user subset. You can still use modern techniques and apply them to headers, sections, buttons, nav controls and so on.
Frankly, if you use the older CSS methods, you write less code to achieve most of the same goals.
"Semantic HTML" is just a means to an end, which is creating websites that many people can use.
Just make normal websites normally, and you'll get like 95% of the way there. Use button for buttons, links for links, etc. Actually put labels on form controls. The beauty of using HTML correctly is that everyone benefits from it.
It's a bit heavy on classes and css, and quickly grows into something that is hard to restructure when needed, but I find myself banging my head against intractable problems less often.
There is almost always a way to achieve what you want with flexbox.
Given all the html created via a component like pseudo element, it further questions the value added imo.
Potentially unpopular opinion, but semantic HTML failed to adequately solve any problems it has set out to solve. Even selectors are better done via something like css modules anyway.
Sure the end compiled HTML is a mess, but that’s like complaining your bytecode or binary is messy. Who cares?
Long live div soup.