div div div aside div div... what's really going on with semantic HTML?
May 8, 2022 7:15 PM Subscribe
Semantic HTML appears to have been all the rage a decade to five years ago, with glowing articles and sneering take-downs of naysayers. It still shows up in a lot of tutorials, but a survey of site source HTML shows... not so much semantic HTML, just a whole lotta div's. What's the current industry range of opinion on semantic HTML?
I admit I haven't found it very useful myself. It never quite seems to fit the problem domains I'm working on. But perhaps I'm just missing something?
I admit I haven't found it very useful myself. It never quite seems to fit the problem domains I'm working on. But perhaps I'm just missing something?
From an accessibility perspective, there's nothing worse than a whole bunch of divs without any context.
I can see how Semantic HTML might be limiting, but it's at least worth understanding the benefits it provides to assistive technology users, such as myself. If headings are used incorrectly, or not at all, complex web pages become very difficult to navigate. It's similar to the problem of reinventing the wheel regarding form controls; if you do that and aren't careful a screen reader user will have no idea what's going on, despite how pretty things look.
posted by Alensin at 7:39 PM on May 8, 2022 [3 favorites]
I can see how Semantic HTML might be limiting, but it's at least worth understanding the benefits it provides to assistive technology users, such as myself. If headings are used incorrectly, or not at all, complex web pages become very difficult to navigate. It's similar to the problem of reinventing the wheel regarding form controls; if you do that and aren't careful a screen reader user will have no idea what's going on, despite how pretty things look.
posted by Alensin at 7:39 PM on May 8, 2022 [3 favorites]
Response by poster: (I'm old enough to remember sneering take-downs of something called the "World Wide Web". I've come to think of it as an integral part of the technology adoption curve.)
I understand why it's important. What I'm trying to reconcile is that, for all its importance and for all the digital ink I see spilled on it, when I go looking for semantic HTML in actual use, it's almost not there. Is it an artifact of React and Angular, or did SEO de-emphasize it, or did ARIA take its place, or did the community of developers reject it, or something else?
posted by SunSnork at 8:06 PM on May 8, 2022
I understand why it's important. What I'm trying to reconcile is that, for all its importance and for all the digital ink I see spilled on it, when I go looking for semantic HTML in actual use, it's almost not there. Is it an artifact of React and Angular, or did SEO de-emphasize it, or did ARIA take its place, or did the community of developers reject it, or something else?
posted by SunSnork at 8:06 PM on May 8, 2022
courts in the United States have ruled that websites are public spaces when it comes to the ADA, and sites and apps which don't support users of assistive technologies can theoretically have lawsuits brought against their owners (if it happened to Domino's pizza and it happened to Beyoncé, then it can happen to you too). semantic HTML is a really important part of any strategy to reduce the risk of that.
(ARIA, which I see you've mentioned, is part of that strategy too. Semantic HTML is preferred, but ARIA is ok if you apply it correctly (which can be surprisingly hard to do.))
you see div and span soup everywhere due to three things, I think:
- the low barrier to entry to creating web pages and apps;
- the huge demand for front end developers; and
- a lack of both formal knowledge (from both university degree programs and bootcamps) and institutional knowledge (does your organization have developers or designers who care about a11y?) regarding more semantically meaningful tags.
if you yourself don't use ATs, and you're just trying to get something up onto the internet fast, then who cares if the random tutorial you're looking at uses a span or a button as long as the CSS looks good and it does what you want when you click it, right?
my current job as a front end developer is building a brand-new B2B webapp for a very specific set of customers and users. I can safely assume these users are sighted, have good hand-eye coordination, and will not be using assistive technologies. even given that knowledge, you better believe I'm building this thing using semantic HTML. it's partially a due-diligence thing, partially a personal-pride thing, and partially because I know that the power-users among our clients will expect keyboard nav and focus to work right and will also inevitably do things like fetch these pages with curl+bash to do some weird damn thing with the document.
posted by Old Kentucky Shark at 8:34 PM on May 8, 2022 [11 favorites]
(ARIA, which I see you've mentioned, is part of that strategy too. Semantic HTML is preferred, but ARIA is ok if you apply it correctly (which can be surprisingly hard to do.))
you see div and span soup everywhere due to three things, I think:
- the low barrier to entry to creating web pages and apps;
- the huge demand for front end developers; and
- a lack of both formal knowledge (from both university degree programs and bootcamps) and institutional knowledge (does your organization have developers or designers who care about a11y?) regarding more semantically meaningful tags.
if you yourself don't use ATs, and you're just trying to get something up onto the internet fast, then who cares if the random tutorial you're looking at uses a span or a button as long as the CSS looks good and it does what you want when you click it, right?
my current job as a front end developer is building a brand-new B2B webapp for a very specific set of customers and users. I can safely assume these users are sighted, have good hand-eye coordination, and will not be using assistive technologies. even given that knowledge, you better believe I'm building this thing using semantic HTML. it's partially a due-diligence thing, partially a personal-pride thing, and partially because I know that the power-users among our clients will expect keyboard nav and focus to work right and will also inevitably do things like fetch these pages with curl+bash to do some weird damn thing with the document.
posted by Old Kentucky Shark at 8:34 PM on May 8, 2022 [11 favorites]
Ultimately divitis has engulfed the world. But a few years ago I started hearing about something called “classless css frameworks” which seem to pair well with semantic html. The best example is MVP.css. So maybe there’s some hope.
posted by kpmcguire at 9:06 PM on May 8, 2022 [5 favorites]
posted by kpmcguire at 9:06 PM on May 8, 2022 [5 favorites]
You’re kind of assuming that there’s a single consensus point of view about how these things should be done among “the community of developers”. But I don’t think this is, or has ever, been the case.
There are still plenty of people who write semantic, accessible, sensible HTML - I’ve worked with some and I like to think I am one. People who want the page to be Just Right under the hood.
But there are also a lot of people who don’t care much, or don’t know any better, or just don’t have the support, tools, time, awareness, whatever to do it right in their place of work. A whole lot of HTML is going to be created by people who just aren’t people who take pride in the craft of creating good HTML.
For example, there will be back end developers who have spent no time learning HTML beyond whatever they need to make the end result look like it should, by whatever means necessary. I see this on Reddit posts from beginner Django developers (as an example) who often see understanding HTML and CSS as a chore that gets in the way of coding. The HTML horrors I have seen there! Anything they can do to avoid spending time on it - never mind learning how to do it well - is great.
And, judging by those same people’s back end code, there is (still) a huge amount of terrible code being written generally. The only difference with HTML is that you, an end user, is able to see it.
posted by fabius at 6:06 AM on May 9, 2022 [4 favorites]
There are still plenty of people who write semantic, accessible, sensible HTML - I’ve worked with some and I like to think I am one. People who want the page to be Just Right under the hood.
But there are also a lot of people who don’t care much, or don’t know any better, or just don’t have the support, tools, time, awareness, whatever to do it right in their place of work. A whole lot of HTML is going to be created by people who just aren’t people who take pride in the craft of creating good HTML.
For example, there will be back end developers who have spent no time learning HTML beyond whatever they need to make the end result look like it should, by whatever means necessary. I see this on Reddit posts from beginner Django developers (as an example) who often see understanding HTML and CSS as a chore that gets in the way of coding. The HTML horrors I have seen there! Anything they can do to avoid spending time on it - never mind learning how to do it well - is great.
And, judging by those same people’s back end code, there is (still) a huge amount of terrible code being written generally. The only difference with HTML is that you, an end user, is able to see it.
posted by fabius at 6:06 AM on May 9, 2022 [4 favorites]
Best answer: I've watched two decades of semantic markup, microformats, etc all amount to nothing. I think the main reason why is that so little of the web uses it that there's no benefit for folks who do use it. In particular search engines like Google and other tools work very well on pages marked up with all sorts of table and div garbage. Adding careful annotations doesn't get you much because the rest of the world has managed to do without.
What is useful is bits of metadata that solve a specific problem. Stuff like using OpenGraph markup or Twitter card markup so a website preview / unfurl looks good on Twitter, Facebook, Slack, etc. These aren't really semantic markup but are similar. They work because they provide a specific tangible benefit to the website.
posted by Nelson at 6:43 AM on May 9, 2022 [3 favorites]
What is useful is bits of metadata that solve a specific problem. Stuff like using OpenGraph markup or Twitter card markup so a website preview / unfurl looks good on Twitter, Facebook, Slack, etc. These aren't really semantic markup but are similar. They work because they provide a specific tangible benefit to the website.
posted by Nelson at 6:43 AM on May 9, 2022 [3 favorites]
What everyone else has said, plus: the huge demand for developers has led to a lot of bootcamps churning out people who only know React. They're given one week of training in HTML, one in CSS, and a month or two in just the parts of JavaScript you need for React.
And a lot of computer science degrees don't have much respect for web tech, so again HTML is seen as being a tiny bump in the road to deploying your amazing software. The fact that it's the only part of your software that users or customers will ever interact with isn't enough to get devs to take it seriously.
That said, the best reasons at the moment to use semantic HTML are accessibility, reader modes, and user-preference queries in both CSS and JS, all of which are easier to cater to if you've got good HTML. (And syndication/distribution maybe? I'm not up to date on that.) But for those you only need to know your content elements, UI elements, and some landmarks. It's not particularly complex, it just takes a bit of care and attention. Micro formats are a good idea but I don't know of any current use cases for them.
ARIA is sometimes mistaken for a different approach for accessibility, but it's really just an extension of HTML semantics to fill the gaps. In theory it will become obsolete as HTML is expanded to include the best bits of ARIA - as happened with role=main being supplanted by the main element. But in practice there'll always be people pushing the boundaries of UI, and ARIA gives us a way to see which of those new patterns are actually useful before rushing them into HTML. We don't need a carousel element, but an attribute like aria-current can be multi-purpose and useful to everyone.
posted by harriet vane at 7:00 AM on May 9, 2022 [6 favorites]
And a lot of computer science degrees don't have much respect for web tech, so again HTML is seen as being a tiny bump in the road to deploying your amazing software. The fact that it's the only part of your software that users or customers will ever interact with isn't enough to get devs to take it seriously.
That said, the best reasons at the moment to use semantic HTML are accessibility, reader modes, and user-preference queries in both CSS and JS, all of which are easier to cater to if you've got good HTML. (And syndication/distribution maybe? I'm not up to date on that.) But for those you only need to know your content elements, UI elements, and some landmarks. It's not particularly complex, it just takes a bit of care and attention. Micro formats are a good idea but I don't know of any current use cases for them.
ARIA is sometimes mistaken for a different approach for accessibility, but it's really just an extension of HTML semantics to fill the gaps. In theory it will become obsolete as HTML is expanded to include the best bits of ARIA - as happened with role=main being supplanted by the main element. But in practice there'll always be people pushing the boundaries of UI, and ARIA gives us a way to see which of those new patterns are actually useful before rushing them into HTML. We don't need a carousel element, but an attribute like aria-current can be multi-purpose and useful to everyone.
posted by harriet vane at 7:00 AM on May 9, 2022 [6 favorites]
How much of this is due to the 'build your website without knowing HTML' sites that are prone to use by the small business owner's cousin's son who is "pretty good with computers" ? Tools like that tend to, in my opinion, spit out the same crap over and over because they have a "standard" set of website code that the tool spits out for everyone.
posted by TimHare at 7:15 AM on May 9, 2022 [3 favorites]
posted by TimHare at 7:15 AM on May 9, 2022 [3 favorites]
I think the issue is that too many companies lack the proper incentives to go beyond the "move fast and break things" stage and get into the workflow that allows and encourages thoughtfulness. Since you don't get semantic HTML without thoughtfulness, it just doesn't happen. Also there's probably not any money in it, so even in the situations where a company could choose to make its HTML semantic, they choose to work on the things that might increase revenues instead.
posted by fedward at 7:31 AM on May 9, 2022 [1 favorite]
posted by fedward at 7:31 AM on May 9, 2022 [1 favorite]
As an HTML hobbyist, I think there's an easy answer, which is that change is hard. Semantic HTML has been around for over a decade, but realistically speaking, by the time I'd heard about HTML5 in like 2012, I had only just started using DIVs in the first place, after using turn-of-the-millennium table-based layouts waaaaay longer than I should have. I held on to what I knew, which I think is pretty common.
I'm not a professional developer, but I am software-adjacent, and so I see this with developers I've worked with. We've got certain pages, critical pages for our internal operations, that are still only compatible with Internet Explorer. Microsoft stopped supporting IE a while ago, but we still install it on every new hire's computer, because these pages don't work on modern browsers. Several times a year, there's talk of the need to update them, but between the critical need for them to be up, and other projects with more executive support, it just keeps getting pushed back. I bet there are pages I use for work whose front-end code is more than 15 years old.
I'd like to thing that bigger companies refactor their sites more often, but technical debt is a real thing. The COBOL thing has become kind of a joke recently, but the fact that so much still runs on COBOL shows you the uphill battle of adopting semantic HTML among organizations that have been using DIVs for two decades.
posted by kevinbelt at 7:50 AM on May 9, 2022 [2 favorites]
I'm not a professional developer, but I am software-adjacent, and so I see this with developers I've worked with. We've got certain pages, critical pages for our internal operations, that are still only compatible with Internet Explorer. Microsoft stopped supporting IE a while ago, but we still install it on every new hire's computer, because these pages don't work on modern browsers. Several times a year, there's talk of the need to update them, but between the critical need for them to be up, and other projects with more executive support, it just keeps getting pushed back. I bet there are pages I use for work whose front-end code is more than 15 years old.
I'd like to thing that bigger companies refactor their sites more often, but technical debt is a real thing. The COBOL thing has become kind of a joke recently, but the fact that so much still runs on COBOL shows you the uphill battle of adopting semantic HTML among organizations that have been using DIVs for two decades.
posted by kevinbelt at 7:50 AM on May 9, 2022 [2 favorites]
Semantic markup has been around since almost the very beginning of the Web, since HTML 2 in 1995 . Back in 1996 we argued about when to use <strong> (semantic) vs <b> (visual). Turns out it doesn't make a damn bit of difference.
posted by Nelson at 8:02 AM on May 9, 2022
posted by Nelson at 8:02 AM on May 9, 2022
Best answer: I think the easy answer is that there's no money in it. Making things easy for screen readers is the right thing to do, but it's incredibly hard to argue in favor of it when the alternative is cranking out a bunch of divs that quickly ship a new feature that brings in more money. I think a lot of companies consider accessibility as tech debt, when they consider it at all. Anecdotally, I can tell you that I do a lot of interviews for my company and the accessibility section is the one that people most often bomb.
posted by Ragged Richard at 8:23 AM on May 9, 2022 [5 favorites]
posted by Ragged Richard at 8:23 AM on May 9, 2022 [5 favorites]
divitis is absolutely a side effect of frameworks like React and friends, and not necessary to make good pages, but your participation in it is largely a funciton of whose page it is. Companies will have settled on terms (frameworks and other tools, if any) for their development, clients will want to use Wordpress or Weebly or something (WP actually isn't that bad in this department), and so on. If yours is job interview motivated curiosity, find out what they use, or be good at translating usecases and issues between what they use at a high level and something you know well.
posted by rhizome at 1:14 PM on May 9, 2022 [2 favorites]
posted by rhizome at 1:14 PM on May 9, 2022 [2 favorites]
Best answer: I do accessibility/usability reviews, including code inspection, as a major part of my job. I see a lot of <div role="button" tabindex="-1" onClick="popupAnnoyingWindow();">Click Here!</div> all day long, which is no help to anybody. But, the kind of divitis that is created by CMS tools such as Wordpress and Drupal isn't necessarily bad for accessibility. As long as the elements that need semantic markup are correctly marked up, it doesn't matter to the assistive technology how many layers of DIVs they're nested in.
posted by expialidocious at 1:44 PM on May 9, 2022 [4 favorites]
posted by expialidocious at 1:44 PM on May 9, 2022 [4 favorites]
It's true that strong versus bold doesn't make a lot of difference, but I can tell you for certain that button versus div has a huge impact on the accessibility APIs and how that element is interpreted by screen reader software. It can be the difference between someone being able to buy your product or leaving to go to a competitor's site.
posted by harriet vane at 5:41 AM on May 10, 2022 [1 favorite]
posted by harriet vane at 5:41 AM on May 10, 2022 [1 favorite]
« Older Recommendations on battery-operated fans? | virtual piano-ish camps for 6th grader in 2022 Newer »
This thread is closed to new comments.
There aren't really that many semantic elements, and HTML trees seem to be getting deeper every year. Once you get beyond the basic headers/mains/footers/etc, you don't have many options besides div and span.
posted by michaelh at 7:20 PM on May 8, 2022 [1 favorite]