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:
• How to Code HTML Lists
• HTML List Basics
• HTML Numbered or Ordered List
• Wrapping Text Around Images
• HTML Horizontal Rule
• Text Input Box Basics
• How to Troubleshoot an HTML Table
• Radio Button Basics
• HTML5 Nav Element
• How to Use a Meta Redirect