View video tutorial

HTML Header

HTML

The <header> HTML element generally represents the introductory content.

HTML Header Tag


Header represents leading content.

Page header is placed at the top to lead the page.

Section header tells about section introduction in a brief.

Several header elements can be placed in one document.

The <header> element cannot be placed within a <footer> or another <header> element.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Header Example</title>
    <meta charset="utf-8" />
    <style>
        header.page-header {
            background: no-repeat left/cover url(./resources/images/puppy.jpg);
            display: flex;
            height: 100px;
            min-width: 120px;
            align-items: center;
            color: #fff;
            text-shadow: #000 0 0 .5em;
        }
        header.page-header>h1 {
            font: bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script', cursive,
                fantasy;
            margin: 3%;

        }
    </style>
</head>
<body>
    <header class="page-header">
        <h1>Cute Puppies Expression</h1>
    </header>
</body>
</html>
Try it Now »

Click on the "Try it Now" button to see how it works.