The <header> element is one of HTML5's semantic elements. Whereas non-semantic elements such as a <div> can be used for web page layout, it provides no information about the meaning of its content. The semantic elements allow search engine spiders to more accurately index a webpage, and allow to accessibility applications such as document readers to present a document.
HTML5 semantic elements
| Element | Purpose |
| <article> | contains an article |
| <aside> | contains side information |
| <details> | contains additional details |
| <figcaption> | contains a caption for a picture, diagram, or list |
| <figure> | contains a picture, diaagram, or list |
| <footer> | contains footer informtion |
| <header> | contains header information |
| <main> | identifies main content of a document |
| <mark> | identifies marked or highlighted text |
| <nav> | contains navigation links |
| <section> | contains a section of a document |
| <summary> | clicking <summary> element toggles visibility of <details> element |
| <time> | contains a date/time |
The <header> element provides a container for header information or navigational links. A <header> element typically contains:
• heading elements
• logo
• author information
• navigation links
• search form
• version information
• copyright
Web Page Header Example
<body> <header> <h1>Page Title</h1> <img src="logo.png" alt="Logo" title="Logo" /> </header>
Article Header Examples
<article>
<header>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>Description of article</p>
</header>
<p>Article text ...</p>
</article>
<article>
<header>
<h2>Second Level Heading</h2>
<p>Posted: <time datetime="2020-09-05"
>May 5, 2020</time> by Author Name</p>
</header>
<p>Article text ...</p>
</article>
Header Containing Navigation Links Example
<header> <h1>Heading</h1> <nav> •<a href="link1">Link 1</a> •<a href="link2">Link 2</a> •<a href="link3">Link 3</a> </nav> </header>
You can have multiple <header> elements in a single document. A <header> element should not be nested within a <footer>, <address> or another <header> element.
More HTML Code:
• Nesting HTML Lists
• Introduction to HTML
• Easy Form Design
• Semantic (X)HTML: Markup with Meaning
• Create a Meta Tag Slide Show - No Java Script Required
• HTML DIV Basics
• HTML Select List Basics
• Image Map Basics
• Code For a Basic 2-Column Fluid Webpage Layout
• Web Page Template