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
51 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.
17 Likes
at this code when you see
<h1>heading<h1>
change to
<h1>heading</h1>
10 Likes
That only took five months for someone to point out. Good eyes!
15 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.
5 Likes
Thanks for the quick response.
1 Like
I know I’m probably late lol but from what I understand there are two metaphors here.
one is the outline for what is the whole HTML document
we declare the document and it consists of a head(meta-data) and a body(all the content of a webpage)
then the content of the body itself consists of a header, main, and footer. all of these are within the body of the HTML file.
<!DOCTYPE html>
<html>
<head>
<!--metadata goes here-->
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Please, anyone, correct me if I’m wrong. This is my understanding so far.
2 Likes
That is a very sensible representation, and nearly well-formed, to boot.
Without going into too great a detail, or too far afield, HTML is a document representation that still follows the paradigm of its parent language, XML. I only bring this up because in HTML it doesn’t matter what we call our elements. We are free to create element types until the cows come home.
However, since XML is data encompassing, the elements above are essentially columns by their given names in a table named html and a parent named body. Confusing? Don’t let it be. Start to see it in that light. When the syntax and composition patterns begin to emerge, you will begin to see the correlation between XML data and HTML document markup.
What you have above is a document outline in its simplest and most practical form. It goes beyond saying how complex a document may become but we can trace its separate parts, individually to this basic outline. It’s called article sectioning and the elements we use are sectioning elements.
The names of those elements are largely arbitrary, but chosen by the world wide web community as appropriate to their intended purpose, and semantic role. We humans can understand what each element describes itself as. A header, a main, a footer. Anyone who understands a document outline can understand that, and agree with its ordering.
HTML is written for humans, or machines designed by humans. While it gets its name from the network protocol it lives within, it could just as easily be, Human Translatable Markup Language. The element names are specifically intended for humans to read.
Not to run on with more verbiage and jargon, consider how when given a section or an article, the entire body of markup above could be dropped into numerous sections or articles. That gives every segment of the document its own outline.
Your understanding so far is bang on.
2 Likes