Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

HTML5 Header Element

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:
• HTML5 Input Type - URL
• How to Write and Run HTML
• Create a Meta Tag Slide Show - No Java Script Required
• Introduction to HTML
• HTML center Tag
• HTML Blockquote Basics
• HTML Definition List
• The HTML Head Tag
• HTML5 Input Type - Email
• HTML Text Tags Basics

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2020 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268