Table of contents

HTML <header> Tag

What is HTML <header> Tag?

The HTML header tag is used to define the header section of a webpage or a section within it. It usually contains introductory content like a website logo, navigation menu, heading, or search bar. The header tag helps organize the layout and structure of a webpage, making it easier for users and search engines to understand the content.

It plays an important role in SEO as search engines use this section to recognize key information about a webpage or article. A page can have more than one header tag if each section logically requires its own header.

Syntax of the HTML <header> Tag

plaintext
<header>
  <!-- Content such as logo, navigation, or title --> </header>

The header tag must start with <header> and end with </header>. It can be placed inside the body tag or within other sections such as <article> or <section>.

Examples of HTML <header> Tag

Example 1: Basic HTML Header Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <header>
    <h1>Welcome to Scholar247</h1>
    <p>Your trusted source for learning HTML</p>
  </header>

  <p>This is a simple web page with a basic header section.</p>

</body>
</html>

In this example, the header section contains a title and a short tagline. It introduces the webpage and gives users an idea of what the site is about.

Example 2: SEO-Optimized HTML Header Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <header>
    <h1>HTML Tutorials and Web Development Guides | Scholar247</h1>
    <nav>
      <a href="https://www.scholar247.com/home">Home</a>
      <a href="https://www.scholar247.com/tutorials">Tutorials</a>
      <a href="https://www.scholar247.com/contact">Contact</a>
    </nav>
  </header>

  <section>
    <h2>Learn HTML Step by Step</h2>
    <p>Explore detailed HTML tutorials and become a web development expert.</p>
  </section>

</body>
</html>

This example shows an SEO-optimized header that includes important keywords and navigation links. The heading and internal links improve the visibility of the page in search engines and enhance user experience.

Attributes of the HTML <header> Tag

The header tag does not have any specific attributes. However, you can use global HTML attributes such as:

• id – Defines a unique identifier for the header section.
• class – Used to apply CSS styles or group elements for styling.
• style – Adds inline CSS styles directly.
• title – Provides additional information displayed as a tooltip.

Best Practices for HTML <header> Tag

• Use only one header tag per section to maintain structure.
• Keep important headings and navigation links inside the header.
• Avoid putting too many unrelated elements in the header.
• Always use semantic tags like nav or h1 inside the header for clarity.
• Include keywords in your header heading for SEO benefits.
• Make sure the header is responsive and adjusts well on mobile screens.

FAQs About the HTML <header> Tag

What is the purpose of the HTML header tag?

The header tag defines the top section of a webpage or a section that contains introductory or navigational information like headings, menus, or logos.

Can I use more than one header tag on a webpage?

Yes, you can use multiple header tags if your webpage has different sections, such as articles or sidebars that each need their own header.

Does the header tag affect SEO?

Yes, the header tag helps search engines understand the structure of a page. Including headings and relevant keywords in the header can improve SEO.

What can I include inside a header tag?

You can include headings (h1–h6), navigation bars, logos, search bars, or short introductory text relevant to the page or section.

Where should the header tag be placed?

The header tag can be placed directly inside the body tag or within sectioning elements such as article, section, or aside depending on the page layout.

HTML

Related Articles