Skip to content
finote

03. header Element

Introduction

Section titled “Introduction”

The <header> element represents introductory content or a group of navigational aids. It typically contains site logos, headings, navigation, and other introductory content. The header element is semantic, helping browsers and assistive technologies understand the structure of your page.

Basic Usage

Section titled “Basic Usage”
<header>
    <h1>Site Title</h1>
    <nav>Navigation</nav>
</header>

Common Use Cases

Section titled “Common Use Cases”
Section titled “Site Header”
<header>
    <h1>My Website</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

Article Header

Section titled “Article Header”
<article>
    <header>
        <h1>Article Title</h1>
        <p>By Author Name</p>
        <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    <p>Article content...</p>
</article>

Section Header

Section titled “Section Header”
<section>
    <header>
        <h2>Section Title</h2>
        <p>Section introduction</p>
    </header>
    <p>Section content...</p>
</section>

Multiple Headers

Section titled “Multiple Headers”

You can have multiple headers on a page:

<body>
    <header>Site header</header>
    <main>
        <article>
            <header>Article header</header>
            <section>
                <header>Section header</header>
            </section>
        </article>
    </main>
</body>

Best Practices

Section titled “Best Practices”

Semantic Structure

Section titled “Semantic Structure”

Use header for introductory content:

<!-- Good: Semantic header -->
<header>
    <h1>Title</h1>
    <nav>Navigation</nav>
</header>


<!-- Avoid: Using div -->
<div class="header">
    <h1>Title</h1>
</div>

References

Section titled “References”