<header> tag

What Is the Header Element?

The <header>...</header> element is used to define introductory content for a webpage, section, or article. It can contain a heading, a logo, introductory text, or navigation links.

Syntax

<header>
    Header Content
</header>

Basic Structure of a Header Element

<header>
    <h2>Header Section</h2>
    <p>This is a paragraph inside the header element.</p>
</header>

Example: Website Header

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Website Header</title>

    <!-- Defines the styles for the header and navigation links. -->
    <style>
        /* Sets the background color, text color, spacing, and text alignment. */
        .header {
            background-color: #134e4a;
            color: white;
            padding: 20px;
            text-align: center;
        }

        /* Styles the navigation links inside the header. */
        .header nav a {
            color: white;
            margin: 10px;
            text-decoration: none;
        }
    </style>
</head>

<body>

    <!-- The header contains the website name, tagline, and navigation links. -->
    <header class="header" id="header">

        <h2>TutorialNest</h2>

        <p>Learn. Build. Grow.</p>

        <!-- Contains navigation links to different website pages. -->
        <nav>
            <!-- The href attribute specifies the destination URL of each link. -->
            <a href="/">Home</a>
            <a href="/html/">HTML</a>
            <a href="/css/">CSS</a>
            <a href="/javascript/">JavaScript</a>
        </nav>

    </header>

</body>
</html>