How can main and header be used together?

I’m a little confused about where to use the <main> tag exactly?

According to the lesson text, they wrap all the content, except the <head> and <footer>, in the main tags, but then in the code editor, the <main> comes after the <header> tag, which to me seems like the more semantic way of putting it. So would have thought that it should go like this:

    <h1>Types of Sports<h1> 
        <p> The first game of baseball was played in Cooperstown, New York in the summer of 1839.</p> 



Until we recognize which part of the dog is wagging what, this sort of mystery will prevail. <main/> is a semantic element. It comes from our demand. We insisted upon this element.

1 Like

Don’t fully understand that, but are you saying that it dose not really matter where you put it? So its kind of up to the developer to decide what they think is better?


HTML has evolved with the input from thousands of developers. Since it is the way we describe a document, it makes sense to have tags that fulfill that role.


That pretty much describes the three component parts of a document, or article. A page can have several articles, each with these generic sections, or it can be a single article, with only one of each.

In the pre-HTML5 days it was common to see a page with three outer DIV elements,

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

We can see how the new elements evolved out of this, with the same intended purpose. Developers aim at giving meaning to markup, and semantic tags go a long way to supporting this objective.


Ah I see. Thanks for the reply.

So the way I said in my initial post was correct.


1 Like

Can we use header, main and footer tags multiple times inside of the body?
For example there’s a header and a main inside of the body and there’s also a header inside of the main tags.

1 Like

Short answer, as you describe it, yes. Any section of a page can be considered a document body in its own right, thus affording it the full range of markup given its parent. We’re still beholden to the semantics involved, but that aside, the floor is open.

Given that document is the global object associated with the BODY (HTML, actually) it follows we cannot have more than one. Which element structure we choose therein is purely up to our imagination.


In addition to what @mtf and @zs-kev already said, here’s what I’ve found about this topic:

“The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.”

With that being said, this is how I would do it:


I think there’s a misleading bit in 3/9 of this lesson, and zs-kev pointed it out.

Why didn’t anyone recognize what zs-kev was saying? I’ll repeat it:

  • In section 3/9 the lesson text/content shows a code example with header put inside main
  • In section 3/9 the code exercise has you put main after header.

We don’t need a philosophical digression pointing out that the tags are ‘for us to choose what to do with it’. All of you saying that are missing the point: the point is, what is the convention?

The convention is to put main after header, and so the section 3/9 lesson text/content is misleading.

Full stop. Fin.

Hope this helps.


The convention is to write well formed markup. There is no set way to compose a document. It is either valid (meaning it validates) or it is not.

A document may be sectioned in any number of ways. There is no limit on how many header or main or footer elements, other than that they cannot be repeated siblings. Nested sections can all have a header, main, and footer element. Even MAIN can have these elements.

Trying to find a black and white answer is not the way to view this. Markup that makes sense and validates is about all the convention you’re going to find.


I don’t exactly understand usage of main

There is no special usage apart from what the tag name suggests… The tag denotes the MAIN content of the page. It has no special behavior or style rules and is the same thing as a DIV. HEADER and FOOTER are much the same. The three tags combined help the author to show the principle page segments.

A page may contain multiple topics which can be denoted with ARTICLE or even SECTION, which are also the same as DIV. When the page is divided up into articles or sections, each one of them can also have a header, main and footer, as well as an H1.

Primarily, the different elements help us to give structure as they shape into an outline that is easier to follow and garner basic meaning. We can use whatever elements we want. There are no HTML police and the page won’t break. Semantic elements just lend themselves to readability.


That’s a great answer. Thank you!

1 Like

HTML Police! :joy: thats exactly what I feel sometimes: there is a lobby of people judging someone’s else code :sweat_smile: . OK, so far if I got the main idea, generally in many projects we are gonna have the traditional:

<header </header> <main></main> <footer> </footer>

But also in real life it will be very contextual for your project and must be a consensus standard of your work team.

When we work as part of a team it is important that everyone follows the same generalized style guide. The best practice is to write well formed markup that validates, and read up on usability and accessibility practices that make our pages as usable/accessible as humanly possible.