How to create a header and footer in HTML5-H5 Tutorial-php.cn

Table of Contents

Use the and Tags

Key Points to Remember

Home

Web Front-end

H5 Tutorial

How to create a header and footer in HTML5

下次还敢

Aug 20, 2025 am 03:16 AM

Use the <header> and <footer> elements of HTML5 to easily create semantic headers and bottoms to improve web structure clarity and accessibility; it can be flexibly laid out through CSS, such as using Flexbox to achieve a sticky bottom, ensuring that the footer is always at the bottom of the viewport.

How to create a header and footer in HTML5

Creating a header and footer in HTML5 is straightforward using the semantic <header></header> and <footer></footer> elements. These tags help define the structure of your webpage in a meaningful way, improving readability and accessibility.

Use the `<header></header>` and `<footer></footer>` Tags

HTML5 introduced semantic elements to clearly describe different parts of a webpage. The <header></header> typically contains introduction content like logos, navigation, or headings. The <footer></footer> usually includes copyright info, contact details, or links.

Here's a basic example:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Header and Footer Example</title>
    <style>
        header, footer {
            padding: 20px;
            text-align: center;
            background-color: #f3f3f3;
            color: #333;
        }
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        main {
            min-height: 70vh; /* Ensures space between header and footer */
        }
    </style>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <a href="#">Home</a> |
            <a href="#">About</a> |
            <a href="#">Contact</a>
        </nav>
    </header>

    <main>
        <p>Welcome to my website. This is the main content area.</p>
    </main>

    <footer>
        <p>&copy; 2025 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

Key Points to Remember

Semantic Meaning : <header> and <footer> are not just for styling—they convey structure to browsers, screen readers, and search engines.
Multiple Headers/Footers : You can use multiple <header> elements (eg, one for the page and one for an article), but only one primary <footer> per page is typical.
Styling Flexibility : Use CSS to position the footer at the bottom (eg, with Flexbox or Grid) if you want it to stick to the bottom of the viewport when content is short.

For a sticky footer, consider this layout tweak:

 body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main {
    flex: 1;
}

This ensures the footer stays at the bottom even with little content.

Basically, just wrap your top and bottom sections in <header></header> and <footer></footer> , style as needed, and use proper document flow. It's simple, semantic, and effective.

The above is the detailed content of How to create a header and footer in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn