Introduction to <header>tag

The <header>tag in HTML is a semantic element that defines a container for introductory content or a set of navigational links. It's commonly used to represent the header of a webpage or a section, containing elements like headings, logos, navigation menus, and other introductory content. The <header>element helps improve the structure and readability of a webpage by clearly indicating the beginning of a page or a section.

Key Features of the <header>Tag

• Headings (<h1>to <h6>): To introduce the page or section.
• Logos or Branding: To visually represent the site or company.
• Navigation Elements (<nav>): To provide a navigational menu or links to other parts of the site.
• Search Forms: To include search functionality.

• Use It Wisely: While you can use multiple <header>elements on a page, avoid overusing them. Only use the <header>tag for content that serves as an introduction or provides navigational context.
• Combine with Other Semantic Tags: The <header>element works well with other semantic tags like <nav>, <main>, <article>, and <footer>. Using these tags together creates a well-structured and semantically rich HTML document.
• Avoid Redundant Content: Do not use the <header>tag to wrap content that is not introductory or navigational, such as large blocks of text or unrelated media elements.

<!-- Header Example -->
<header class="custom-header">
  <h1>Site Logo</h1>
      <nav class="main-nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
   </nav>
</header>

/* CSS for Header */
    .custom-header {
        background-color: #f8f8f8;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .main-nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .main-nav li {
        display: inline;
        margin: 0 15px;
    }
    
    .main-nav a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
    }
    
    .main-nav a:hover {
        color: #5cb85c;
    }

Global Attributes