HTML Tutorial

HTML <header> Tag

The <header> tag in HTML is used to define the header of a section or page. It typically contains introductory content or navigation links. The <header> element can be used at the top of the page, within a section, or in an article.

What is the <header> Tag?

The <header> tag is a semantic HTML element that provides structure to a webpage. It helps identify the top section of the page or a section of a webpage, often containing a logo, navigation, and introductory text. It improves the clarity of the document structure for both users and search engines.

Syntax

<header>
  
</header>
  

Using the <header> Tag

The <header> element is typically used at the beginning of a webpage or section. It can include elements like logos, headings, and navigation links.

Example

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <a href="#home">Home</a> | 
    <a href="#about">About</a> | 
    <a href="#contact">Contact</a>
  </nav>
</header>
  

Importance of the <header> Tag

The <header> tag plays a key role in improving the accessibility and SEO of a webpage. It helps search engines and screen readers identify the main header content of a page. It's an important element for structuring your webpage in a way that both humans and search engines can easily navigate.

Nested <header> Tags

The <header> tag can also be used within other sections like <article> or <section> to define specific headers for those sections.

Example: Header within a Section

<section>
  <header>
    <h2>About Us</h2>
  </header>
  <p>We are a leading tech company.</p>
</section>
  

Best Practices for Using the <header> Tag

Here are some best practices for using the <header> tag:

• Place the header at the top: Use <header> to wrap the top part of your webpage or section.
• Use clear navigation: Include <nav> inside the header for easy access to other parts of your site.
• Ensure accessibility: Use headings and descriptive text inside the header for better accessibility.

Conclusion

The <header> tag is an essential part of HTML that helps to structure a webpage’s top section. By using it, you improve the readability of your webpage, enhance accessibility for screen readers, and optimize your website for search engines. The <header> tag is a great way to organize introductory content and navigation links for users.