HTML header Tag

While making a website, one of the most important tasks is structuring or organizing your content, because this helps in search engine optimization of your website. That’s the place where semantic tags in HTML come into play. Among many semantic elements in HTML, the <header> tag plays an important role in creating a better layout. In this blog, you will learn everything about the <header> tag in HTML and how to use it with examples and best practices

Table of Contents:

• What is HTML?
• What are Semantic Tags?
• Header tag in HTML
  • Example 1: <header> Inside an <article>
  • Example 2: Simple <header> Tag
• Attributes of the <header> Tag
• Best Practices of Using the <header> Tag
• Browser Support for <header> Tag
• Conclusion

What is HTML?

HTML stands for Hypertext Markup Language. It is defined as the markup language that is used to create the structure of web pages. It is used to add video, text, and links to webpages.

What are Semantic Tags?

The word “Semantic” refers to meaning. Semantic tags in HTML are the tags that clearly define their purpose to both the developer and the browser. There are various semantic tags in HTML, like <header>, <footer>, <article>, <nav>, and <main>.

HTML semantic tags are used to improve accessibility, which helps search engines to get a better understanding of your content.

Header tag in HTML

The <header> tag is a semantic element used to define the introductory content of a webpage. It contains the headings, logos, navigation menus, or other introductory information. You can use the <header> tag in the top section of a webpage.

Become a Full-Stack Web Developer

Enroll Now

Explore Program

Example 1: <header> Inside an <article>

You can write multiple <header> tags in the code. Here is an example to show how to add a <header> tag inside an <article> in HTML.

Output:

Example 2: Simple <header> Tag

This example shows you how to use the <header> tag to define the introductory content of a website.

Output:

Attributes of the <header> Tag

Attributes are defined as the special words that were used in the opening tag. These are the words that were used to provide additional information to the tags. The <header> tag is a semantic element, but it doesn’t come with any special attributes of its own. However, it supports some global HTML attributes.

Example: Using Global Attributes in the Header Tag

Here, in this example, id=”main-header” and class=”top-header” both allow you to target this header element from JavaScript and a CSS file, and role=”banner” sends signals to the screen readers that this is a top-level site header.

Best Practices of Using the <header> Tag

Using the header tag properly helps in making a webpage organized and accessible. Here are some best practices that you need to follow while using the <header> tag in HTML:

• You can use multiple <header> tags on a page. But ensure that one <header> tag is not nested inside another <header> tag.
• Don’t place <header> inside tags like <footer> and <address>.
• Only include titles, navigation links, and Introductory text inside the <header> element.
• Use the role=”banner” attribute to help screen readers identify the main header of your site.

Browser Support for <header> Tag

The <header> tag is well-supported by all modern browsers. Here is the list of all browsers that support the <header> tag:

• Internet Explorer
• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge
• Opera

Conclusion

The <header> tag is one of the important tags in Semantic HTML. It helps you to structure the introduction of a webpage. Whether you’re adding a title, branding, navigation menu, or search bar, the <header> element helps in making HTML more meaningful. It always contains headings, navigation links, and logos. By using header tags correctly, you can improve your website structure and also improve the SEO accessibility of your website.

HTML header Tag – FAQs