Header, footer, main in HTML - Browser Rendering Trace

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

After step 2, what do you see on the page?

A Only the header section with no main content

B A header section on top and main content below it

C Main content above the header

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

Element	Default Display	Semantic Meaning	Visual Behavior
header	block	Introductory content or navigation	Appears as a block at the top of the page or section
main	block	Primary content of the document	Appears as a block below header, main focus area
footer	block	Footer or closing content	Appears 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.