The HTML <header> element represents introductory content for a webpage or a section of a webpage. It commonly contains a website logo, heading, introductory text, or navigation links. Headers help organize webpage content and make its structure easier to understand.

The <header> element is a semantic HTML element, which means it describes the purpose of the content it contains. Developers often use it at the top of a webpage to display the website name, branding, and navigation.

What Is the HTML Header Element?

The <header> element defines introductory content for a page or section. A webpage can contain more than one header when different sections or articles need their own introductory content.

Here is the basic syntax:

<header>
    <h1>My Website</h1>
    <p>Welcome to my website.</p>
</header>

In this example, the header contains a main heading and a short introductory paragraph.

HTML Header Example

The following example demonstrates how to use the <header> element in a complete HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML Header Example</title>
    <style>
        header {
            background-color: #0878d1;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

    <header>
        <h1>Web4Learners</h1>
        <p>Learn HTML, CSS, JavaScript, and more.</p>
    </header>

    <main>
        <h2>Welcome</h2>
        <p>Start learning web development today.</p>
    </main>

</body>
</html>

The CSS styles the header with a blue background, white text, and spacing. The <main> element contains the primary content of the webpage.

What Can an HTML Header Contain?

An HTML header can include different elements depending on the purpose of the page or section.

• Website logo: Displays the website’s branding.
• Heading: Introduces the website or a particular section.
• Navigation links: Provides access to important pages.
• Introductory text: Explains the purpose of the content.
• Search form: Allows users to search for information.

A <header> does not have to contain every one of these elements. Include only the content that makes sense for the page.

HTML Header vs HTML Head

The <header> and <head> elements serve different purposes.

<header>	<head>
Contains visible introductory content	Contains document metadata and resource references
Appears within the <body>	Appears near the beginning of the HTML document
Can contain headings and logos	Can contain <title>, <meta>, and <link> elements

For more information, explore HTML page layout to understand how headers fit into a complete webpage.

HTML Header FAQs

Can a webpage have multiple header elements?

Yes. A webpage can contain a header for the overall page and additional headers for individual sections or articles.

Is the HTML header element semantic?

Yes. The <header> element describes introductory content and helps communicate the page structure to browsers and assistive technologies.

Can I put navigation links inside a header?

Yes. You can place a <nav> element inside a <header> when the navigation belongs to that introductory area.

Does the header element automatically create a design?

No. HTML defines the structure, while CSS controls the header’s colors, spacing, alignment, and appearance.