RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html5-header-tag/ below:

HTML header Tag - GeeksforGeeks

HTML header Tag

Last Updated : 28 Jul, 2025

The <header> tag is a semantic HTML element that is used to define the introductory or navigational content of a webpage or a section. Typically, a header contains elements like:

The website or page title
Logo or branding
Navigation menus
Search bar
Any introductory information relevant to the page or section

Note: Header tag cannot be placed within a <footer>, <address>, or another <header> element.

Syntax:

<header> ...</header>

HTML <header> tag Example Example 1:

In this example, the <header> tag is used inside the <article> element to define introductory content for that article.

HTML


 <!DOCTYPE html>
<html>

<body style="font-size: 25px;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>HTML Header Tag</h3>
    <hr>
    <article>
        <header>
            <h3 style="color: green;">
                GeeksforGeeks Learning
            </h3>
            <p>Posted by GFG</p>
            <p>
                A Computer Science portal for geeks.
                It contains well written, well thought <br>
                and well explained computer science and
                programming articles.
            </p>
        </header>
    </article>
</body>

</html>

Output:

The <header> tag here contains:
- <h3>: 'GeeksforGeeks Learning'
- <p> (Paragraph): 'Posted by GFG'
- Another <p> (Paragraph): 'A Computer Science portal for geeks' - along with more information.

Important: The <header> is not just for the main page header (like a site title), but it can also be used for each article or section to provide the essential context — such as the article’s title, author, and a short description.

HTML Header Tag Attributes

The <header> tag itself doesn't have attributes unique to it. However, it supports most of the global attributes of HTML, such as id, class, style, role, lang, data-*, and tabindex.

Additionally, you can apply styling to control its behavior and appearance using CSS. The <header> tag also supports Event Attributes in HTML, allowing you to add interactivity, such as onclick, onmouseover, and others, to enhance user experience.

Example 2: HTML


 <!DOCTYPE html>
<html>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML Header Tag</h3>

    <!--HTML header tag starts here-->
    <header>
        <h1>This is the heading.</h1>
        <h4>This is the sub-heading.</h4>

        <p>This is the metadata.</p>
    </header>
    <!--HTML header tag ends here-->
</body>

</html>

Output:

HTML <header> Tag

In this example:

Main content: The document has a primary title (<h1>GeeksforGeeks) followed by a secondary heading (<h3>HTML Header Tag).
Header tag: Inside the <header>, there’s a primary heading (<h1>) and a subheading (<h4>) along with a paragraph (<p>).

Example 3:

This HTML code demonstrates the usage of the <header> tag to structure a navigation section of a webpage.

HTML


 <!DOCTYPE html>
<html>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>HTML Header Tag</h3>

    <!--HTML header tag starts here-->
    <header>
        <a href=
"https://www.geeksforgeeks.org/dsa/dsa-tutorial-learn-data-structures-and-algorithms/">
            Algo</a> |
        <a href=
"https://www.geeksforgeeks.org/dsa/dsa-tutorial-learn-data-structures-and-algorithms/">
            DS</a> |
        <a href=
"https://www.geeksforgeeks.org/category/program-output/">
            Languages</a> |
        <a href=
"https://www.geeksforgeeks.org/interview-experiences/company-interview-corner/">
            Interview</a> |
        <a href=
"https://www.geeksforgeeks.org/student-corner/">
            Students</a> |
        <a href=
"https://www.geeksforgeeks.org/gate/gate-cs-notes-gq/">
            Gate</a> |
        <a href=
"https://www.geeksforgeeks.org/software-engineering/articles-on-computer-science-subjects-gq/">
            CS Subjects</a> |
        <a href=
"https://www.geeksforgeeks.org/interview-experiences/quiz-corner-gq/">
            Quizzes</a>
        <div class="search-bar">
          <input type="text" placeholder="Search products...">
          <button>Search</button>
        </div>

    </header>
    <!--HTML header tag ends here-->
  
</body>

</html>

Output:

In this example:

The navigation links (<a> tags) within the <header> allow users to quickly jump to different sections of the site. These links are separated by a pipe (|) symbol for readability.

Key Points to Remember About the <header> Tag

Multiple headers: You can have multiple <header> tags on a page. For example, each section or article can have its own <header>, but there should only be one site-wide <header>.
Not just for titles: While the <header> tag often contains a heading (<h1>, <h2>), it can also hold other elements like navigation links (<nav>), search bars, or introductory text.
Keep it clear: The <header> tag should contain introductory content. It’s not meant to hold all content; its purpose is to help introduce or navigate the content.

Supported Browsers

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4