The HTML provides users with different functional tags for various reasons and uses. Some are more important, while some are less, based on the requirement for the content. The HTML <header> tag is one of them, and it is easy to grab its purpose of operation in an HTML document. In this tutorial, we will know the HTML <header> tag uses and benefits.
What is HTML Header Tag
HTML <header> Tag is one of the latest sectioning tags in HTML5. Developers can use the tag to specify the header for the HTML document or the section as it holds the information linked to the heading of the respective content. The header tag can usually apply at the beginning of an HTML document or section, i.e., at the top of an HTML page. The header element can typically include the title of an HTML section (h1 to h6 elements or <hgroup> elements), but as far as it is not required. Users can also use it to place the contents of the sections table, navigation links, a search form, or any relevant logos.
There can be many <header> elements in an HTML document. but it can not be placed within any HTML <address>, <footer> or any other <header> element.
Syntax:
<header>Write your content here.</header>The example below describes the HTML <header> element:
Page Header
The example code snippet below shows the use of header tags to display the heading of an HTML document:
Example:
<header>
<img src="logo.png" alt="Site logo">
<h1>Page Title</h1>
</header>Article Header
The example code snippet below shows the use of header tags to display the heading of an article:
Example:
<article>
<header>
<h2>An Example of the HTML Header Tag </h2>
<p>Posted on Sunday, <time datetime="2012-05-01">1 May 2012</time> by Alex</p>
</header>
<p>This is an sample text placed within the document.</p>
<p><a href="#">Read more....</a></p>
</article>