FAQ: Semantic HTML - Main and Footer

This community-built FAQ covers the “Main and Footer” exercise from the lesson “Semantic HTML”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction to HTML

FAQs on the exercise Main and Footer

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

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
1 Like

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.

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.

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

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.

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

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.

1 Like

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>

Excercie 3 in Main and Footer why are we taking away the div tags and shortening them?
image

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

vs.

<main></main>

Seems a done deal to me.

but why what’s the difference

i mean why are we using the div tag in the first place, just to change it

You’re missing the point.

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.

1 Like

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.