Learn HTML – Part 23 – header Tag – Introductory Content Section

The HTML header tag is used to define introductory content for a webpage or a section.

It usually contains headings, logos, navigation menus, or introductory information.

What is the header Tag?

The header tag is a semantic HTML element introduced in HTML5.

It represents a container for introductory content or navigational links.

Common Elements Inside header

• Website logo
• Main heading
• Navigation menu
• Search bar
• Introductory text

Basic Syntax

<header>
   <h1>Website Title</h1>
   <p>Welcome to our website</p>
</header>

Example – Website Header

<header>
   <h1>WPDeveloperTips</h1>
   <p>Learn Web Development Easily</p>
</header>

Output:

Using header Inside Other Elements

The header tag can also be used inside elements like article or section.

<article>
   <header>
      <h2>Blog Post Title</h2>
   </header>
   <p>Article content goes here.</p>
</article>

header vs head – Key Difference

Why Use the header Tag?

• Improves webpage structure
• Provides semantic meaning
• Helps search engines understand layout
• Improves accessibility

The header tag should contain introductory content or navigation links.

Conclusion

The HTML header tag defines introductory content for a webpage or a section.

It helps organize titles, navigation menus, and introductory information in a structured way.

What’s Next?

Now that you understand the header tag, the next step is learning about the footer tag, which is used to define the footer section of a webpage.

Next: Learn HTML – Part 24 – footer Tag – Defining Footer Section →

Series: Learn HTML Series