HTML header tag

The HTML <header> tag represents introductory content for its nearest ancestor sectioning content or sectioning root element.

Sectioning Content is content that defines the scope of headings and footers. The following elements are categorized as sectioning content: <article>, <aside>, <nav>, <section>

Sectioning Root elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors. The following tags are categorized as sectioning roots (<blockquote>, <body>, <fieldset>, <figure>, <td>).

Headers can contain headings, subheadings, version information, search forms, logos, navigational controls, etc.

{border:1px solid orange;padding:3px;margin:3px;width:50%;}
.example header {background:#FDF7D3;}
</style>
<div class="example">
<header>Header...</header>
<main>
Main...
<article>Article...</article>
<article>Article...</article>
<article>Article...</article>
</main>
<footer>Footer...
<nav>Nav...</nav>
</footer>
</div>

Eg. :
{border:1px solid orange;padding:3px;margin:3px;width:50%;}
.example header {background:#FDF7D3;}

Header…

 

Main… 

Article…
Article…
Article…

 

Footer…