Menu
HTML5 Header Element


Learn more at amazon.com

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