Tag <body> vs. <main>

Just wondering the difference between tags “body” and “main”?

3 Likes

Main is part of the body and it used to highlight the “main” section of a page. For example, in a blog, the navbar and footer will be in the body but out side of main. The actual article will be enclosed in main

17 Likes

Thank you Virginia for the question and Dhawal for the answer. I had the same question myself.

2 Likes

The encloses everything that is visible to the user on the website (apart from comments, of course), while is just the part of the body that contains most of the content.
I like to break it down in the style of an essay in which you have:

  • Introduction
  • Main Hypothesis (or other blabla)
  • Conclusion

So within the body you can have:

(not "heading"!), often containing a navbar with all your content

Header and footer tend to stay the same throughout different pages of a website, while the main part’s content differs on every page.

Hope that makes sense.

5 Likes

Thanks Dhawal.
another question: div. vs. section?

I wasn’t sure about div vs section either. The TL;DR from MDNs explanation (<section>: The Generic Section element - HTML: HyperText Markup Language | MDN)
is this:
If you can’t find an element that describes the content in a more specific way (like article or nav), use section. If you just need to wrap some parts for styling, use div.

Section-elements should also wrap a heading and a paragraph. Also this " it doesn’t really make any sense to have a separate section of content without a heading to describe its contents. Such headings are useful for all readers, but particularly useful for users of assistive technologies like screenreaders, and they are also good for SEO."
So you should typically see this

<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>

update: realized some of the text was hidden cause it was validated as HTML. fixed

5 Likes

Hi everyone!
Thank you for this questions and answers. One thing to add is that MDN explains (in my opinion) better this matter as David already covered. If you just want to confirm, this is what W3School say:

A <div> section in a document that is styled with CSS.
The <section> tag defines a section in a document. :sunglasses:

Sometimes I feel all this a little bit redundant because you can use id attributes. But the idea is to get in touch with best practices to managed this correctly and not create a mess with the content.

3 Likes

Thanks so much! these are so helpful and very clear definitions.

1 Like