Difference between <main> ,<body>, <article>, <section>

What is the difference between the above tags. Also, when to use what?


Hi @web9020947765 - good question. :+1:

They’re some examples of what’s called semantic HTML elements .

In the “old days”, you’d divide your page up using a load of <div> tags which might have looked like this:

<div class="header">

That’s all well and good for layout and styling, but it doesn’t convey a great deal of meaning about what that block of markup is for.

With semantic HTML elements, we can provide more information for a human reader with the tag itself - so a header is marked up using <header>, or a section of a page with <section>.

You’d use these semantic elements wherever they’re appropriate - so you’d likely only have one <header> </header> pair in your page, because there’s only one header (with your nav bar etc in it). Likewise, you’d only have one <footer> </footer> but you might have several <section> tags.

There’s a bit more info on this at the Mozilla Developer Network (recommended) and W3Schools if you want to read more. :slight_smile:


Thanks! I read through the hyperlinks you attached. Very easy to understand and got to learn that the semantic tags like , and are newly introduced in HTML5. Very interesting!

1 Like

I’m glad you learned something new - though I don’t know which tags you were referring to as the forum has removed them. :slight_smile: (You can wrap them in ` characters to make the forum render them, like so: <div>)

This stuff was new to me as well, having originally learned how to write HTML back in '99 and not really doing much with it again until a couple of years ago. :slight_smile: