HtmlConceptBeginner · 3 min read

What is Header Tag in HTML: Definition and Usage

The <header> tag in HTML defines a container for introductory content or navigation links. It usually appears at the top of a page or section and helps organize the structure of a webpage.

⚙️

How It Works

The <header> tag acts like the title page or cover of a book. Just as a book cover shows the title and author, the header shows important information about the webpage or a section of it. It often contains things like the website logo, main title, or navigation menu.

Think of the header as the first thing visitors see that tells them what the page or section is about. It helps browsers and screen readers understand the page structure, making the site easier to navigate and more accessible.

💻

Example

This example shows a simple webpage header with a site title and navigation links inside the <header> tag.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Header Tag Example</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#home">Home</a> |
      <a href="#about">About</a> |
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <main>
    <p>Welcome to my website!</p>
  </main>
</body>
</html>

Output

My Website Home | About | Contact Welcome to my website!

🎯

When to Use

Use the <header> tag to group introductory content or navigation links at the top of a webpage or a section. For example, place your site logo, main heading, or menu inside a header.

This helps organize your page clearly and improves accessibility for users with screen readers. It also helps search engines understand your page structure better.

✅

Key Points

The <header> tag defines a top section for introductory content or navigation.
It can be used for the whole page or for individual sections.
Helps organize content and improve accessibility.
Commonly contains titles, logos, and menus.

✅

Key Takeaways

The

tag groups introductory content or navigation at the top of a page or section.

It improves page structure and accessibility for users and search engines.

Use it to hold site titles, logos, and menus for clear organization.

Headers can appear multiple times on a page for different sections.