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 Web Page 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>
Click on the "Try it Now" button to see how it works.