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
45 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.
16 Likes
at this code when you see
<h1>heading<h1>
change to
<h1>heading</h1>
9 Likes
That only took five months for someone to point out. Good eyes!
14 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.
3 Likes
I see, but in the provided example in semantic HTML 3/9 The <header> is a child of <main> and <article> is a sibling to <header> and child to <main>
<main>
<header>
<h1>Types of Sports</h1>
</header>
<article>
<h3>Baseball</h3>
<p>
The first game of baseball was played in Cooperstown, New York in the summer of 1839.
</p>
</article>
</main>
Is this arbitrary use advisable though the outcome might be the same? I’d assumed <header>, <main> and <footer> would always be siblings or at least when ideally written.
1 Like
In a document outline there may be many headers (and headlines). The only real question is, “does this header belong here?”
In the above example, yes.
Nice example, BTW.
Note also that the articles are allowed headers of their own. That H3 is really an H1.
Now start breaking Baseball down into sections. Those are the H2 headlines. The sections can have other sections, but that gets ridiculous when we can just bring in another page. We can incorporate textual and visual content into each section, give it an aside and close it out.
Bottom line, any way you slice it, we are repeating HTML patterns all over the place. This got recognized and gave rise to new libraries that leveraged that aspect on the client side. We early explorers got lots of experience with PHP and the dynamics on the server side, but once JSON emerged it was only a matter of time until Angular and React came to the forefront. Put the data on the client-side and go server-less. Makes perfect sense. The CPU clicks are all on the client computer which nowadays can handle it seamlessly.
I digress. Bottom line, learn how to outline a document. Read everything you can find on the subject (please share). Don’t make this a low priority. It will pay off in spades.
3 Likes
Thanks for the quick response.
1 Like