Bird
Raised Fist0
HTMLmarkup~10 mins

Header, footer, main in HTML - Browser Rendering Trace

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Render Flow - Header, footer, main
Read <header>
→Create HEADER node
↓
Read <main>
→Create MAIN node
↓
Read <footer>
→Create FOOTER node
↓
Build DOM tree with HEADER, MAIN, FOOTER siblings
↓
Apply default browser styles
↓
Layout and paint each semantic section
The browser reads the HTML elements in order, creates nodes for header, main, and footer, builds a DOM tree with these as siblings, applies default styles, then lays out and paints each section visually.
Render Steps - 3 Steps
Code Added:<header> element with <h1>
Before
[Empty page]
→
After
[HEADER]
[ Welcome ]
Adding the header element creates a top section with the heading text visible.
🔧 Browser Action:Creates HEADER node and renders block with default margin
Code Sample
This code produces three stacked sections: a header with a title, a main area with a paragraph, and a footer with contact info, each visually separated vertically.
HTML
<header>
  <h1>Welcome</h1>
</header>
<main>
  <p>This is the main content.</p>
</main>
<footer>
  <p>Contact info here.</p>
</footer>
Render Quiz - 3 Questions
Test your understanding
After step 2, what do you see on the page?
AOnly the header section with no main content
BA header section on top and main content below it
CMain content above the header
DFooter content only
Common Confusions - 2 Topics
Why does the main content not appear inside the header or footer?
Because header, main, and footer are sibling block elements, each starts on a new line stacked vertically, so main is separate from header and footer visually.
💡 Block elements stack vertically as siblings unless styled otherwise.
Can I have multiple main elements on one page?
No, the main element is meant to represent the main content unique to the page, so only one main should be used for correct semantic meaning and accessibility.
💡 Use only one main element per page for clarity and screen reader support.
Property Reference
ElementDefault DisplaySemantic MeaningVisual Behavior
headerblockIntroductory content or navigationAppears as a block at the top of the page or section
mainblockPrimary content of the documentAppears as a block below header, main focus area
footerblockFooter or closing contentAppears as a block at the bottom of the page or section
Concept Snapshot
header, main, and footer are semantic HTML5 elements. They are block-level by default, stacking vertically. header is for introductory content. main holds the primary page content. footer contains closing or contact info. Use one main per page for accessibility.

Practice

(1/5)
1. Which HTML element is best used to contain the main content unique to a webpage?
easy
A. <section>
B. <header>
C. <footer>
D. <main>

Solution

  1. Step 1: Understand the purpose of <main>

    The <main> element is designed to hold the main content that is unique to the page, excluding repeated content like headers or footers.

  2. Step 2: Compare with other elements

    <header> is for top parts like titles or menus, <footer> is for bottom parts like contact info, and <section> is a generic container but not specifically for main content.

  3. Final Answer:

    <main> -> Option D

  4. Quick Check:

    Main content = <main> [OK]
Hint: Main content always goes inside <main> tag [OK]
Common Mistakes:
  • Using <section> instead of <main> for main content
  • Putting main content inside <header> or <footer>
  • Confusing <main> with <article>
2. Which of the following is the correct syntax to create a footer section in HTML5?
easy
A. Contact us at email@example.com
B.
Contact us at email@example.com
C. Contact us at email@example.com
D. Contact us at email@example.com

Solution

  1. Step 1: Identify the correct HTML5 footer tag

    The correct tag for footer content is <footer>. Tags like <foot>, <bottom>, and <end> do not exist in HTML5.

  2. Step 2: Confirm the syntax

    The syntax <footer>...</footer> correctly wraps footer content.

  3. Final Answer:

    <footer>Contact us at email@example.com</footer> -> Option B

  4. Quick Check:

    Footer tag = <footer> [OK]
Hint: Footer tag is exactly <footer> in HTML5 [OK]
Common Mistakes:
  • Using non-existent tags like <foot> or <bottom>
  • Misspelling the footer tag
  • Using <div> without semantic meaning
3. What will be the visual order of content in the browser for this HTML snippet? 
<header>Site Title</header>
<main>Welcome to our website</main>
<footer>Contact info</footer>
medium
A. Site Title at top, Welcome message in middle, Contact info at bottom
B. Contact info at top, Site Title in middle, Welcome message at bottom
C. Welcome message at top, Contact info in middle, Site Title at bottom
D. All content mixed randomly

Solution

  1. Step 1: Understand semantic order of header, main, footer

    The <header> appears first and is shown at the top, <main> is the main content in the middle, and <footer> is at the bottom.

  2. Step 2: Visualize the content placement

    Content inside <header> shows "Site Title" at top, <main> shows "Welcome to our website" in the middle, and <footer> shows "Contact info" at the bottom.

  3. Final Answer:

    Site Title at top, Welcome message in middle, Contact info at bottom -> Option A

  4. Quick Check:

    Header top, main middle, footer bottom [OK]
Hint: Header top, main center, footer bottom visually [OK]
Common Mistakes:
  • Assuming footer appears at top
  • Confusing main content position
  • Thinking order is random without CSS
4. Identify the error in this HTML snippet: 
<header>Welcome</header>
<main>Content here</main>
<footer>Footer info<footer>
medium
A. The header tag is not closed
B. The main tag is missing
C. The closing tag for footer is incorrect
D. There is no footer tag

Solution

  1. Step 1: Check each tag for proper opening and closing

    The <header> and <main> tags are correctly opened and closed. The <footer> tag is opened but closed incorrectly as <footer> instead of </footer>.

  2. Step 2: Identify the specific error

    The footer closing tag is missing the slash, causing invalid HTML.

  3. Final Answer:

    The closing tag for footer is incorrect -> Option C

  4. Quick Check:

    Footer closing tag must be </footer> [OK]
Hint: Closing tags need a slash, e.g. [OK]
Common Mistakes:
  • Forgetting slash in closing tags
  • Confusing opening and closing tags
  • Assuming missing tags instead of wrong closing
5. You want to create a webpage with a header containing a navigation menu, a main section with an article, and a footer with copyright info. Which is the best semantic HTML structure?
hard
A.
Article content
© 2024 Company
B.
Article content
© 2024 Company
C.
Menu
© 2024 Company
Article content
D.
Article content
© 2024 Company

Solution

  1. Step 1: Use semantic tags for each part

    The header should contain the navigation menu inside <nav>. The main content should be inside <main> with an <article>. The footer should have copyright info inside <footer>.

  2. Step 2: Check each option for correct semantic structure

    <header><nav>Menu</nav></header> <main><article>Article content</article></main> <footer>© 2024 Company</footer> uses correct semantic tags: <header><nav></nav></header>, <main><article></article></main>, and <footer>. Other options misuse tags or use generic <div> instead of semantic elements.

  3. Final Answer:

    <header><nav>Menu</nav></header> <main><article>Article content</article></main> <footer>© 2024 Company</footer> -> Option A

  4. Quick Check:

    Header-nav, main-article, footer correct semantic [OK]
Hint: Use header-nav, main-article, footer for semantic clarity [OK]
Common Mistakes:
  • Using <div> instead of semantic tags
  • Placing main content inside footer
  • Nesting main inside article incorrectly
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard