Back to course

Lesson 27: Defining Structural Regions (`<header>`, `<main>`, `<footer>`)

The HTML Masterclass: From Zero to Web Developer

27. Defining Structural Regions

These elements define the three major structural regions of a typical webpage layout.

27.1 The <header> Element

Contains introductory content or a set of navigational links. A page can have multiple headers (one for the page, and one for each major section/article).

Commonly included: Site logo, site title, navigation (<nav>).

html

My Personal Blog

27.2 The <main> Element

Contains the unique and central content of the document. This is the primary subject matter. A document must only have one <main> element.

html

...
<main>
    <!-- All the content unique to this page goes here -->
    <h2>Welcome to the Home Page</h2>
    <p>This is my main content.</p>
</main>

<footer>...</footer>

27.3 The <footer> Element

Contains closing content for its nearest sectioning root (either the entire page or a specific <section>).

Commonly included: Copyright information, contact details, sitemap links.

html