Todd Libby

Posted on Aug 24, 2023

Main-ly Speaking

#webdev #html #frontend #a11y

I tweeted/posted out a half-joking question the other day about the usage of the <div> tag still.

Then I started a small conversation. Then I got to thinking. Why are devs not using <main> more often?

The "why"

I've concluded my accessibility auditing career as of yesterday when I audited an education platform that was extremely inaccessible. The documentation was over 100 pages that I sent back to the client. That is a lot. Not the most, but it is a lot. Usually 100 pages are par for any high-level audit that I have done as a solo consultant.

The fact that I saw usage of the <header> and <footer> elements, yet so sign of <main> was there. The elements from HTML5 used were:

<header>
<nav>
<section>
<article>
<aside>
<footer>

No <main> as far as the eyes could see.

I mean there was no sign of the element to be found.

The "What"

Is it fear? I mean, I know it really isn't fear, but is it lack of education (yes) or is it lack of understanding semantic HTML and the benefits of using semantic HTML over an element that has no semantic meaning?

I have seen a lot of replies when I have asked this in the past and in 25 years of asking it is usually the same repsonses:

Don't have time to deal with HTML.

Not enough time to deal with it now.

It's X framework and I can't change that. (You can if it is open source).

It's habit and I just do it that way.

What is semantic HTML?

I'm using native apps, not hybrid/web app.

These are among a lot of reasons. I get it, but I got it 20 years ago. 10 years ago. 5 years ago maybe. But in 2023? Now that HTML5 has been out since 2008 (15 years ago), developers should know about HTML5.

Whether they know is one thing. They should. You should. Whether they care or whether you care, is another. You all should care.

I mean if you're using other HTML5 elements, why omit <main>? That says to me, that whomever it may be, you're being lazy if you know and if you are uneducated about HTML5, you're not doing the research. <main> is one of those elements that is widely known.

So what? Big Deal.

These "landmarks" have an impact on accessibility. If you have ever read the bulk of my articles, they are on accessibility. Using HTML5 landmarks as they are intended is helping out people with disabilities by making the structure of the page accessible to screen reader technology and other assistive technology(AT) e.g., keyboard navigation.

When I see this when I am creating a new project in a framework:

<!DOCTYPE html>
<html lang="">
  <head>
    ...
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

I'll tend to ask when doing an accessibility audit "why aren't you using <main>?" and only if it is a web or hybrid app knowing you'd have to file an issue and ask for the <div> to be changed to <main> but that isn't something I'd expect to happen but I am not opposed to it at all.

What I would like to see more of is this, if applicable:

<!DOCTYPE html>
<html lang="">
  <head>
    ...
  </head>
  <body>
    <main id="app"></main>
  </body>
</html>

The Benefits

Skip to content links. When someone using keyboard navigation or AT wants to skip repeated content, they can easily skip to the #main content area.
It's the fresh, new, and cool wrapper div! I'd use <div id="wrapper"> a lot until 2008, then I started to use <main id="wrapper"> or whatnot when using HTML5 more often in projects. It's a landmark, why not use it?
Reader mode looks for the <main> element as well as headings and content structure when converting the content into reader view.
<main> is a lot easier for maintenance and code readability. You'll be able to visually spot a <main> element much faster than a <div> within a vast sea of divs in that bowl of div chowder.
Using <main> could also possibly save some bytes within your files (CSS or otherwise) in that you can use main in the stylesheet instead of using classes or IDs (e.g., .main or #main).
Without <main> assistive technology cannot create an accurate outline (accessibility tree) of the page's content.

and I am sure there are more that I'm not listing, but the fact is and let's face it, if you're going to use all the other HTML5 landmarks, just use the main landmark in a web or hybrid web app or if you are authoring a Web page.

That's it. Don't be scared of <main> and if you already weren't, just use it if it is applicable in the project.

If you are not sure of how to use main, educate yourself. You could read the spec or the MDN docs which should be the de facto resource for researching anything HTML or CSS.

I get that there are cases where it is a <div> and what I am saying is moot. I know that, I understand that, I got it. But...

If you can use <main>, get it in there and make the experience just a little more accessible.

Photo by Jas Min on Unsplash

Top comments (16)

Salma Alam-Naylor • Aug 24 '23

Todd, you’re the main man.

Todd Libby • Aug 24 '23

Thank you, Salma! 😊🤣

Calin Baenen • Aug 25 '23

Check my website — it's been like this since 1.0.0. 😎

Todd Libby • Aug 28 '23

Nicely done!

lionel-rowe • Aug 25 '23

Nice article, always good to be cognizant of these things!

<!DOCTYPE html>
<html lang="">
  <head>
    ...
  </head>
  <body>
    <main id="app"></main>
  </body>
</html>

Does this really pass the accessibility/semantic HTML "sniff test", though? Dumping all body content inside main as implied by id="app" suggests that everything is main content. If everything is main, then nothing is main.

I sometimes start off a project like this (or more often with something like div#app>(header>nav#site-nav)+main#container>{...everything else}), but usually after a while I still find I've placed main too far up the tree and it ends up holding stuff like secondary navigation, sidebars, or site footers, which isn't semantically correct. At that point it's time for a refactor.

Todd Libby • Aug 25 '23 • Edited

Adjust accordingly then. Which it seems you have. No, not everything needs to be in <main> but it would be nice to have main content in the main container. Also, as I stated in the article, "I get that there are cases where it is a <div> and what I am saying is moot." so I know there are many cases where it may not be applicable, but if it is, use it is what I am saying.