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:

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

Kevin

2 Likes

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.

2 Likes

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?

Kevin

1 Like

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.

header
main
footer

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.

19 Likes

Ah I see. Thanks for the reply.

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

Thanks,
Kevin

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.

2 Likes

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

https://www.w3schools.com/tags/tag_main.asp

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

<head>
	<title></title>
</head>
<body>
	<header>
	</header>
	<nav>
	</nav>
	<main>
	</main>
	<footer>	
	</footer>
</body>
8 Likes

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.

15 Likes

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.

4 Likes

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.

8 Likes

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.

3 Likes

https://www.w3.org/TR/html51/grouping-content.html#the-main-element

1 Like

mtf says the rules are relaxed but the most recent html spec (html living standard) says that main has pretty strict usage.

https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element

Hi, everyone.

After reading you guys and giving it some thought, there’s only one question that comes to mind — despite of @mtf’s efforts to make us understand that there’s no preset way to compose an HTML document as long as it validates (am I right, @mtf?)

Now, I’ve seen examples such as @herebeandre’s in this same thread as well as the one that @cloud5705047076 links out of the forum where <header> goes before <nav>, right in this way:

<head>
  <title></title>
</head>
  <body>
    <header>
    </header>
    <nav>
    </nav>
    <main>
    </main>
    <footer>	
    </footer>
</body>

However, somehow it makes more sense to me to have the <nav> before the <header>, such as:

<head>
  <title></title>
</head>
  <body>
    <nav>
    </nav>
    <header>
    </header>
    <main>
    </main>
    <footer>	
    </footer>
</body>

I mean, newbie as I am to the coding world, if I think of any given web page that I’ve worked upon — thru wordpress.org, in all honesty —, the first element I always find on a web page is the navigation bar/navigation menu, followed by the heading of the page (“Page Title”), which is why it makes more sense to me — semantically speaking — to have my <nav> before my <header>.

Does this make any sense at all to you guys?

Thanks in advance.

Cheers.

The navigation can go wherever the designer wants it, above or below the header. It’s a choice, not a rule. If all positions are relative, then it will follow normal flow.

i think you guys missed the part where they stated throughout the lessons, although not verbatim…
a page can have only one main element.
a page can have multiple header elements, where be it the main header element, or a child of main or footer or whatever.
so in essence, the following works:

<body>
<header>
  <nav></nav>
</header>

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

<footer>
  <header></header>
</footer>
</body>
1 Like