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

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!

4 posts were split to a new topic: How are the main and body tags used together?

10 posts were split to a new topic: How can main and header be used together?

5 posts were split to a new topic: Why do we change div to main?

When you look at the coding, it looks like this on code cademy:


Is it necessary to put the <p>? it seems redundant
The same thing happens in the <aside> exercise.

What is the section element used for? Are there specific cases when we should use it?

In Semantic HTML, Main and Footer chapter, we are shown the following example:

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

As we see, the header element is nested inside the main element. What is the purpose of nesting a header inside the main element? Ain’t these elements separated ones?

As I understand, this header element is embedded so that we could style it for our article? For example, make it pinned while reading a certain fragment of the article, etc. But this header element is separated from the general header element which shows up at the top of the web site.

Am I right?

@microace27095 I think it is because the <footer> tags only indicate that it should be at the bottom of the page while the <p> tags indicate that text will be written. You could replace the <p> tag with <img> or something and that will be different. Does that make more sense?

Can I use two headers in the same index.html file? Part of the explanation in this exercise shows it as a parent to a nav element, but the 2nd explanations shows the header as a child of a main element. For instance if I wanted to my page to have a navigation bar and my h1 as part of a header element would I need 2 different headers (1 as a main element sibling and 1 as a main element’s child) or put both the nav element and h1 element as siblings under a header element that’s a sibling to a main element? How would doing this impact CSS and SEO? For CSS could I potentially divide the styling of the nav and h1 by adding an id or class? For SEO would having the h1 in a header that’s a sibling to a main element differ as to having the h1 as a child of the main element?

Sorry in advance if this is confusing!

In a solitary document with one subject, then one header would be all that would be permitted. However, modern pages often cover multiple subjects in their own semantic container… The <article/> element. We can give each article its own header, main and footer, as well as it’s own aside and outline.

This really helped me understand the semantics of <main>

Why is the <footer> tag separated from the <main> tag, while the <header> tag is not?

The <header> is put INSIDE the <main> tag (a child of ‘main’). To me it seems that <header>, <main>, and <footer> should be sibling elements.