<header> : The Header element

by

Introduction

The <header> element in HTML is used to define a header section for a document or a specific section within the document. It typically contains introductory content, navigation links, logos, headings, and other elements that are considered as the heading or introductory part of a page or section.

Here is an example :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <!-- Main content of the webpage goes here -->
  </main>
  <footer>
    <!-- Footer content goes here -->
  </footer>
</body>
</html>

Output :

In this example:

  • The <header> element contains an <h1> heading for the main title of the page and a navigation menu (<nav>) with a list of links.
  • The <nav> element within the header is commonly used to group navigation links.

Key points about the <header> element:

  1. Introductory Content: It typically contains content that introduces the main purpose or topic of the webpage or section.
  2. Heading Elements: It often includes heading elements like <h1> for the main title or other heading levels for subheadings.
  3. Navigation: The <header> is a common location for navigation menus or links, helping users navigate to different sections of the site.
  4. Logos and Branding: Logos and branding elements are often placed within the <header> to establish the visual identity of the website.
  5. Accessibility: The use of semantic elements like <header> contributes to better accessibility, making it easier for screen readers and other assistive technologies to interpret and navigate the content.

Remember that the <header> element is not limited to the top of the page; it can also be used within specific sections to define headers for those sections. It’s a versatile element that helps structure and organize the content of a webpage.

Leave a Comment