HTML5 Header Element
By Stephen Bucaro
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: • Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections • HTML Editors • HTML Blockquote Basics • Checkbox Basics • Use Meta Tags for Search Engine Optimization • HTML5 Header Element • Easy Form Design • The Font Tag • HTML abbr and acronym Tag • Set Form Controls Tab Order With tabindex Attribute
|