DEV Community

Main-ly Speaking

Todd Libby on August 24, 2023

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. The...

Read full post

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.