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

14 Likes

at this code when you see

<h1>heading<h1>

change to

<h1>heading</h1>

6 Likes

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

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

1 Like