HTML header Tag

HTML header Tag defines a head section of the web page or head section of another section of the web page. HTML header tag is semantic part of HTML5. HTML header tag usually contain introductory part.

Syntax of HTML header Tag

The Syntax of HTML header Tag is shown below, It has both starting and ending tags.

<header>
</header>

Usage of HTML header Tag

HTML header Tag is used in HTML5 to specify the opening section. HTML header section mostly contain the headings, logo, navigation menu, slider, banner, video etc.

One web page can contain more than one HTML header tags, mostly header tag is the first section of a web page but you can use it later as well.

HTML header tag cannot be used inside footer tag, address tag or inside any other header tag.

HTML header tag is a block level element.

Example of HTML header Tag

Simple example of HTML header Tag is shown below.

<header>
  <nav>
  <ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contact Us</a></li>
  </ul>
  </nav>
  <h1>HowToCodeSchool.com</h1>
  <p>Learn HTML online!</p>
</header>

Contain Table:

The <header> tag in HTML is used to define a container for introductory content or a group of navigational links at the top of a document or a section. It represents the header section of a webpage or a specific section within the document.

Here’s an example of how to use the <header> tag in HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Example Page</title>
</head>
<body>
  <header>
    <h1>Welcome to Example Page</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  
  <!-- Rest of the content -->
  
</body>
</html>

In the example above, the <header> tag is used to contain the introductory content of the webpage. It includes an <h1> heading element for the page title and a <nav> element for navigation links. The <header> tag is placed within the <body> section of the HTML document.

By using the <header> tag, you can semantically structure your webpage and separate the introductory content or navigation from the main content. It helps in organizing the different sections of your webpage and enhances accessibility and SEO (Search Engine Optimization).