DEV Community

Cover image for Main-ly Speaking

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. element to hold the content of their site...
Collapse
 
calinzbaenen profile image
Calin Baenen

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

Collapse
 
colabottles profile image
Todd Libby

Nicely done!

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor

Todd, you’re the main man.

Collapse
 
colabottles profile image
Todd Libby

Thank you, Salma! 😊🤣

Collapse
 
khairunnisaas profile image
Khairunnisaas

I forgot is exist 😂

Collapse
 
colabottles profile image
Todd Libby

It's always good to have a reminder. I sometimes forget about certain things while coding myself!

Collapse
 
lionelrowe profile image
lionel-rowe

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

<!DOCTYPE html>
<html lang="">
  <head>
    ...
  </head>
  <body>
    <main id="app"></main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
colabottles profile image
Todd Libby • 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.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

I do?

Collapse
 
colabottles profile image
Todd Libby

If you want to make your stuff more accessible, yes. If not, then you don't have to. Your mileage may vary.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

no, I mean I do!

Thread Thread
 
colabottles profile image
Todd Libby

😂 Heck yeah!