HTML5 Header Element

Learn more at

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
author information
navigation links
search form
version information

Web Page Header Example

  <h1>Page Title</h1>
  <img src="logo.png" alt="Logo" title="Logo" />

Article Header Examples

  <h1>Main Heading</h1>
  <h2>Sub Heading</h2>
  <p>Description of article</p>
  <p>Article text ...</p>

  <h2>Second Level Heading</h2>
  <p>Posted: <time datetime="2020-09-05"
    >May 5, 2020</time> by Author Name</p>
  <p>Article text ...</p>

Header Containing Navigation Links Example

   •<a href="link1">Link 1</a>
   •<a href="link2">Link 2</a>
   •<a href="link3">Link 3</a>

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:
• HTML Numbered or Ordered List
• HTML Blockquote Basics
• HTML5 Header Element
• Block and Inline HTML Elements
• HTML Frames Basics
• The HTML Head Tag
• Create a Meta Tag Slide Show - No Java Script Required
• Use an Image as a Form Submit Button
• Easy Code to Add Yahoo Site Search to Your Website
• HTML5 Nav Element