HTML <header> Tag

The HTML <header> tag represents introductory content or a navigational section for its nearest ancestor. It is typically used to contain headings, logos, navigation menus, or other introductory elements of a section or the entire page. The <header> tag is a semantic element, improving the structure and accessibility of a webpage.

A page can have multiple <header> elements, such as a main header for the page and separate headers for articles, sections, or other components.

Basic Syntax of HTML <header> Tag

The basic syntax of the <header> tag is:

</>
Copy
<header>
    Content such as headings, navigation links, or logos goes here.
</header>

The <header> element is often placed at the top of a page or section but is not restricted to that location.

Attributes of HTML <header> Tag

  • Global Attributes: The <header> tag supports all global attributes, such as id, class, style, and data-*.
  • Event Attributes: The <header> tag supports event attributes like onclick, onmouseover, and onfocus.

Basic Example of HTML <header> Tag

Here’s a simple example of a page header:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <header>
            <h1>Welcome to My Website</h1>
            <nav>
                <a href="/home">Home</a> |
                <a href="/about">About</a> |
                <a href="/contact">Contact</a>
            </nav>
        </header>

        <main>
            <p>This is the main content of the page.</p>
        </main>
    </body>
</html>
Basic Example of HTML <header> Tag

Explanation: The <header> contains a heading and a navigation bar at the top of the page, providing an introductory section for users.

Using the <header> Tag in Articles

The <header> tag can also be used within <article> or <section> elements to create headers for those sections:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <article>
            <header>
                <h2>Understanding HTML header Tag</h2>
                <p>By Jane Doe | December 10, 2024</p>
            </header>

            <p>The header tag is used to define introductory content for a page or section.</p>
        </article>
    </body>
</html>
Using the <header> Tag in Articles

Explanation: The <header> provides a title and metadata for the article.

Styling the <header> Tag with CSS

You can style the <header> tag with CSS to enhance its appearance:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            header {
                background-color: #007BFF;
                color: white;
                padding: 20px;
                text-align: center;
                font-family: Arial, sans-serif;
            }

            header nav a {
                color: white;
                text-decoration: none;
                margin: 0 10px;
            }

            header nav a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <header>
            <h1>My Blog</h1>
            <nav>
                <a href="/home">Home</a>
                <a href="/blog">Blog</a>
                <a href="/contact">Contact</a>
            </nav>
        </header>

        <main>
            <p>Welcome to my blog! Explore and enjoy the content.</p>
        </main>
    </body>
</html>
Styling the <header> Tag with CSS

Result: The header has a blue background, white text, and styled navigation links that are easy to interact with.

Practical Applications of the <header> Tag

  • Main Page Header: Define the primary header for a webpage, including navigation menus and branding elements.
  • Section Headers: Create headers for specific sections or articles within a page.
  • Improved Accessibility: Provide semantic structure to improve screen reader navigation.
  • Branding: Include logos, slogans, and other branding elements at the top of a page or section.