The HTML <header> element represents introductory content for a page or a specific section. It commonly contains headings, logos, navigation-related content, introductory text, or other information related to the beginning of a content area.

Key Point: The <header> element is a semantic element. It describes the role of the content instead of simply acting as a generic container.

1. What is the header Element?

The <header> element defines introductory content for a document, page, section, or article.

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

Output

My Website

Welcome to my website

2. Purpose of the header Element

The main purpose of <header> is to identify introductory or navigational content associated with a page or section.

A header may contain:

A heading
Logo or branding
Introductory text
Navigation links
Search controls
Other introductory content

3. Basic Header Example

<header>

    <h1>CIIT Training Institute</h1>

    <p>
        Technology Training and Learning
    </p>

</header>

Output

CIIT Training Institute

Technology Training and Learning

4. Header with Navigation

A page header can contain a navigation area. In that case, the navigation itself should normally be represented using the <nav> element.

<header>

    <h1>Learning Portal</h1>

    <nav>
        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">Contact</a>
    </nav>

</header>

5. Header with Logo

A header can contain a logo or branding information.

<header>

    <img src="logo.png"
         alt="Company Logo">

    <h1>My Company</h1>

</header>

Use meaningful alternative text with images so that the purpose of the image can be understood when necessary.

6. Header for a Web Page

A complete page can have a top-level header introducing the website.

<body>

    <header>

        <h1>My Learning Website</h1>

        <p>
            Learn web development step by step.
        </p>

    </header>

    <main>
        Main Content
    </main>

</body>

7. Header inside an Article

A <header> can also be used inside an <article> to introduce that article.

<article>

    <header>

        <h2>Introduction to HTML</h2>

        <p>
            Published on October 1, 2026
        </p>

    </header>

    <p>
        HTML is used to structure web pages.
    </p>

</article>

Structure

Introduction to HTML

Published on October 1, 2026

HTML is used to structure web pages.

8. Header inside a Section

A section can have its own header when the section needs introductory or heading-related content.

<section>

    <header>

        <h2>HTML Forms</h2>

        <p>
            Learn how to create HTML forms.
        </p>

    </header>

    <form>
        ...
    </form>

</section>

9. Header with Multiple Elements

A header may contain several related elements.

<header>

    <img src="logo.png"
         alt="Learning Portal Logo">

    <h1>Learning Portal</h1>

    <p>
        Learn HTML, CSS and JavaScript.
    </p>

    <nav>
        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">Contact</a>
    </nav>

</header>

10. Header vs Heading

The <header> element and heading elements such as <h1> and <h2> are different.

Element	Purpose
`<header>`	Groups introductory content for a page or section.
`<h1>`	Represents a heading.
`<h2>`	Represents a lower-level heading.
`<h3>`	Represents another heading level.

11. Header vs div

A <div> is a generic container, while <header> communicates that the content is introductory or header-related.

<!-- Generic container -->

<div>
    Website Header
</div>


<!-- Semantic container -->

<header>
    Website Header
</header>

Semantic elements should be selected based on the meaning and role of the content, not simply because of how the content looks.

12. Complete Website Header Example

<header>

    <div>

        <h1>CIIT Training Institute</h1>

        <p>
            Learn industry-ready technical skills.
        </p>

    </div>

    <nav>

        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">About</a>
        <a href="#">Contact</a>

    </nav>

</header>

13. Header for a Blog Article

<article>

    <header>

        <h1>
            Learn HTML From Scratch
        </h1>

        <p>
            Author: Training Team
        </p>

        <p>
            Published:
            <time datetime="2026-10-01">
                October 1, 2026
            </time>
        </p>

    </header>

    <p>
        HTML provides the structure of a web page.
    </p>

</article>

14. Header for a Course Section

<section>

    <header>

        <h2>.NET Full Stack Development</h2>

        <p>
            Learn C#, .NET, SQL, Web API and frontend technologies.
        </p>

    </header>

    <p>
        Course content starts here.
    </p>

</section>

15. Can a Header Contain a Header?

The page structure should remain meaningful and should avoid unnecessary nesting of the same structural elements.

Instead of unnecessarily placing one header directly inside another, use headers where they represent distinct page or section introductions.

16. Header and Accessibility

Semantic page structure helps assistive technologies understand the role of different content areas.

A header can provide a clear introductory region for a page or section, especially when used together with appropriate headings and navigation.

17. Multiple Header Elements

A document can have more than one <header> when different sections or articles have their own introductory content.

<header>
    <h1>Learning Portal</h1>
</header>

<main>

    <article>

        <header>
            <h2>HTML Basics</h2>
        </header>

        <p>
            Learn the basics of HTML.
        </p>

    </article>

    <article>

        <header>
            <h2>HTML Forms</h2>
        </header>

        <p>
            Learn how to create forms.
        </p>

    </article>

</main>

18. Common Mistakes

Mistake 1: Using header only for visual styling

The <header> element should be chosen because the content is introductory or header-related, not only because the area appears at the top of a page.

Mistake 2: Confusing header with h1

A header is a structural container, while an <h1> is a heading.

Mistake 3: Using div when a semantic element clearly fits

When content represents a page or section header, <header> can communicate the purpose more clearly.

19. Best Practices

Use <header> for introductory content.
Use headings inside the header when appropriate.
Use <nav> for navigation links.
Use different headers for independent articles or sections when needed.
Keep the header content relevant to the page or section.
Do not use <header> only for styling purposes.

20. Practice Example

Create a website header containing a logo, website title, description, and navigation links.

<header>

    <img src="logo.png"
         alt="Learning Portal Logo">

    <h1>Learning Portal</h1>

    <p>
        Learn web development step by step.
    </p>

    <nav>

        <a href="#">Home</a>
        <a href="#">Courses</a>
        <a href="#">Tutorials</a>
        <a href="#">Contact</a>

    </nav>

</header>

Summary

The HTML <header> element represents introductory content for a page or section. It can contain headings, logos, introductory text, and navigation. A header is a semantic structural element and is different from heading elements such as <h1>, <h2>, and <h3>.

← Previous: Semantic Elements Next: Nav →