How are the main and body tags used together?

why I use “main” instead of “body” tag?

Welcome to the forums.

We would not use it instead of BODY, but as a child of the body.

body
    header
    main
    footer
23 Likes

Isn’t “main” used outside of “body” in the given example sir?

In well formed markup, the <body></body> is the outermost content container. It’s sibling is the <head></head> element that contains all the metadata. <header></header>, <main></main>, and <footer></footer> are all children of the body, at the very least, though they could be children of <section></section> or <article></article>, which are also descendents of BODY.

If we look at the specifications we will find that HEAD and BODY are optional elements, though we don’t see this in practice for a full blown web page. Typically page fragments that are merged with the page via AJAX are stored as plain HTML, but the following is valid for simple documents…

<html>
  <div>
    <h1>heading<h1>
    <p>textual content</p>
    <p>textual content</p>
    <p>textual content</p>
    <p>textual content</p>
  </div>
</html>

If our document uses <html></html> to wrap it, then it is HTML that it contains.


Edited May 13, 2020
See following post concerning error in above markup.

9 Likes

at this code when you see

<h1>heading<h1>

change to

<h1>heading</h1>

5 Likes

That only took five months for someone to point out. Good eyes!

7 Likes

uhm… wait…

If we look at the specifications we will find that HEAD and BODY are optional elements,

i thought html must contain and and it is not optional… but is it optional??
i didn’t know that.

isn’t it are optional rather than and ???

That they are, under stripped down circumstances. We can give a browser nothing but gibberish and it will still render it to its best ability.

Hello World

Is not HTML, but since it is text, a browser makes it HTML, and renders it. Browsers render text as HTML.

Where it fits in normal flow is another question.