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.

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.

Can there be multiple headers, and mains semantic tags within an html document. For example if there are multiple sections within a file. How would that look?

When a page has a single topic, the only outline is to that essay. All the content streams out along the prescribed line (of thought, &c.).

We afforded an outline approach with requisite markup elements to that single topic page.

Template that to a multi-topic page.

The <article/> element serves to define unique topics in the same document. We could have Mark Twain, O 'Henry, and James Thurber on the same page, but nicely tucked away in their own ARTICLE. All the luxury of superb markup afforded one would naturally be afforded the others.

This is to say that headers and footers belong in every article, AS WELL AS the encompassing document. Footers in articles are footnotes. A page has but one footer which is usually all the boilerplate of the website, which may or may not be even pertinent to the page, proper. There is a distinction to be had, here.

the codecademy lesson uses a header inside of a body element, does this mean that it is okay to use multiple headers throughout the page?

Not as direct children of BODY. In that there can only be one header.

Multiple headers will be common on a page with many articles/sections. Each of them can have a header, a main, a footer, an aside.

Of course it needs to make sense and follow a strict outline. A news feed will have several stories streaming in. They should be considered as single page content, which they would be. Implied in that is that each story uses the same page/article template so would be expected to resemble a typical page. Hence, each article has its own template, which template is shared across all the articles for consistent presentation.

2 Likes

This is very helpful! what source(s) do you recommend to learn about better practices for semantic HTML, or for HTML in general?

The horse’s mouth would be where to start, imho. W3C, WHATWG for recommendations, WAI for WCAG (content accesibility guidelines), and UX guidelines for usability.

Locate the HTML5 Elements page on w3.org and go through the ones that are familiar to you, for a start, and give each element a good read and play in a sandbox with the element in an isolated, unstyled fashion. Learn the default behavior of every element you put into use.

CSS is a breeze to learn if we are completely familiar with HTML. JavaScript follows the same prescription. Learn to markup well formed documents that follow a strict outline and the rest will fit in perfectly.

1 Like

Aside

Consider the header. As the name implies, it comes at the head, or top of either the document, proper, or the article in which it is contained.

The document header will likely contain the logo and site name, may include the nav element, a brief amount of text such as a slogan or tip of the day, and that’s about it.

Skip to the article header which will contain the title/headline, the by-line, and maybe a brief synopsis.

<body>
  <header>

  </header>
  <main>
    <h1>page title</h1>
    <article>
      <header>

      </header>
      <main>

      </main>
      <footer>
        <!-- footnotes, related story links, author credentials, &c. -->
      </footer>
    </article>
    <article>
      <header>

      </header>
      <main>

      </main>
      <footer>
        <!-- footnotes, related story links, author credentials, &c. -->
      </footer>
    </article>
  </main>
  <footer>
    <!-- fine print, copyright notice, generic site nav, &c. -->
  </footer>
</body>