How to include header and footer in HTML page w3schools?

To include a header and footer in an HTML page, the recommended and modern approach, as per HTML5 standards, is to use the semantic <header> and <footer> elements.

Understanding HTML Semantic Elements

Traditionally, developers often used generic <div> elements with specific id or class attributes (e.g., <div id="header">, <div id="footer">, <div id="nav">) to mark different sections of a webpage, including the header, footer, and navigation. While functionally these divisions could be styled to appear as headers or footers, modern HTML5 introduced semantic elements that provide clearer meaning and structure to the browser and assistive technologies.

Using semantic elements like <header>, <footer>, <nav>, <main>, <article>, and <section> offers several benefits:

Improved Readability: The code becomes more understandable for developers, clearly indicating the purpose of each section.
Enhanced SEO: Search engines can better understand the content and structure of your page, potentially leading to improved indexing and ranking.
Better Accessibility: Assistive technologies (like screen readers) can more accurately interpret the page structure, making it easier for users with disabilities to navigate and understand the content.

The `<header>` Element

The <header> element is intended to introduce a document or a section. It typically contains introductory content or navigational links. A page can have multiple <header> elements if different sections of the page require their own introductory content.

Common Content for <header>:

Site logo and name
Main navigation (<nav> element)
Search bar
Headings (e.g., <h1> through <h6>)
Taglines or slogans

Example:

<header>
    <h1>My Awesome Website</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About Us</a></li>
            <li><a href="/services">Services</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

The `<footer>` Element

The <footer> element represents a footer for its nearest sectioning content or sectioning root element (usually the <body> element for the main page footer). It typically contains information about its containing element.

Common Content for <footer>:

Copyright information
Contact details
Links to sitemap or privacy policy
Author information
Related documents links
Social media links

Example:

<footer>
    <p>&copy; 2023 My Awesome Website. All rights reserved.</p>
    <address>
        <a href="mailto:[email protected]">[email protected]</a><br>
        123 Web Street, HTML City, WA 98765
    </address>
    <nav>
        <ul>
            <li><a href="/privacy">Privacy Policy</a></li>
            <li><a href="/terms">Terms of Service</a></li>
        </ul>
    </nav>
</footer>

The `<nav>` Element (Often Within Header/Footer)

While not strictly a header or footer itself, the <nav> element is crucial for navigation and is frequently placed within a <header> or <footer>. It represents a section of a page that provides navigation links, either to other parts of the current document or to other documents.

Implementing Headers and Footers in HTML

The <header> and <footer> elements are block-level elements that inherently stack vertically in the document flow. You can place them directly within the <body> of your HTML document.

Basic Structure Example

Here's a simplified HTML page demonstrating the placement of <header>, <main>, and <footer>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to your CSS file -->
</head>
<body>

    <header>
        <h1>Welcome to My Site</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Main Content Area</h2>
            <p>This is where the primary content of your page goes. It should be unique to this specific page.</p>
        </section>
        <section>
            <h3>Another Section</h3>
            <p>You can divide your main content into multiple sections for better organization.</p>
        </section>
    </main>

    <footer>
        <p>Copyright &copy; 2023 MyCompany. All rights reserved.</p>
        <p><a href="mailto:[email protected]">[email protected]</a></p>
    </footer>

</body>
</html>

Styling with CSS

While HTML defines the structure and meaning of your header and footer, CSS (Cascading Style Sheets) is used to control their visual presentation, such as background color, text color, font size, padding, margins, and layout. You would typically link an external CSS file to style these elements.

Key Semantic Elements for Page Structure

Element	Purpose	Common Content
`<header>`	Introductory content for a document or section.	Site logo, main heading, navigation (`<nav>`), search bar.
`<footer>`	Concluding content of a section or page.	Copyright info, contact details, sitemap links.
`<nav>`	Contains navigation links.	Menu items, links to other pages.
`<main>`	Dominant content of the `<body>`.	Primary content unique to the document.
`<article>`	Self-contained, independent content.	Blog post, news story, forum post.
`<section>`	Grouping related content.	Chapter, tabbed content, distinct section.
`<aside>`	Content indirectly related to the main content.	Sidebars, call-out boxes, advertisements.

By utilizing these semantic HTML5 elements, you create a more robust, accessible, and SEO-friendly webpage structure that clearly communicates its purpose to both browsers and developers.