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:

<footer>
    <p></p>
</footer>

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:

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

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.