HTML <header> Tag

Today we will cover HTML Tag header examples. By using examples, we anticipate meeting the learning objectives.

The HTML <header> tag represents a container for introductory content or a group of introductory content in a web page. It is typically used to contain headings, logos, navigation menus, search bars, and other top-level content that appears at the top of a web page.

The <header> element is a semantic tag, which means that it provides information about the meaning and structure of the content it contains. This helps search engines and other web tools understand the purpose and context of the content, which can improve accessibility and search engine optimization (SEO).

The <article> header is as follows:


<!DOCTYPE html> <html> <body> <article> <header> <h1>Here goes your heading for the article</h1> <p>A report written by Mr Examples</p> <p>Several details are provided here of the heading</p> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </article> </body> </html>

Header of a page:


<!DOCTYPE html> <html> <body> <header> <h1>Here goes your heading for the article</h1> <p>A report written by Mr Examples</p> </header> </body> </html>

Here is a complete example of the <header> tag:


<!DOCTYPE html> <html> <head> <title>Mr Examples</title> </head> <body> <header> <nav> <ul> <li><a href="#html">HTML</a></li> <li><a href="#css">CSS</a></li> <li><a href="#python">Python</a></li> <li><a href="#js">JavaScript</a></li> </ul> </nav> <h1>Mr Examples</h1> </header> <main> <h2>Welcome to Mr Examples</h2> <p>This is the content of Mr Examples.</p> </main> </body> </html>

Tag Header Usage

The <header> element functions as a holding area for introductory content or a set of navigational links.

Typically, a <header> element includes:

  • Contains several headings (h1-h6)
  • Icon or logo
  • The author’s details
IMPORTANT: An HTML document can contain more than one header element. In contrast, a <header> element cannot appear in a <footer>, <address>, or any other header element.

Browser Compatibility

Numbers in the table indicate when the element <header> was first fully implemented by a browser.




The Tag header <header> is compatible with the Global Attributes in HTML.


The Tag header <header> is compatible with the Event Attributes in HTML.

Predefined CSS

The <header> element is frequently generated with the given default values:

header {
display: block;

HTML <header> Tag Benefits

The HTML <header> tag provides several benefits when used properly in web page design and development:

  • Using the <header> tag helps screen readers and other assistive technologies better understand the structure and purpose of the content. This makes it easier for users with disabilities to navigate and access the content on a web page.
  • The <header> tag provides search engines with additional information about the content and structure of the page. This can improve the page’s visibility and ranking in search results.
  • By using the <header> tag, web designers and developers can establish a consistent structure for the header section of a web page. This helps create a cohesive design and improves the user experience.
  • The <header> tag can be used to contain navigation menus and links, making it easier for users to find and access the main sections of a website.
  • The <header> tag can be easily styled using CSS to create a unique and visually appealing design for the header section of a web page. This can help improve the overall look and feel of a website.
If this article was helpful to fulfill your educational desires, then do share this meaningful information with your friends by clicking on the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *