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
<header> <h1>My Personal Blog</h1> <nav>...</nav> </header>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
<body> <header>...</header><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>
</body>
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
<footer> <p>© 2024 HTML Masterclass</p> <p><a href="#">Privacy Policy</a></p> </footer>