How to Use the `header` and `footer` Tags#

The <header> and <footer> tags in HTML are used to define the header and footer sections of a web page or a section. This guide explains how to use these tags effectively.

Basic Syntax#

`<header>`#

The <header> tag is used to define the header section:

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>

`<footer>`#

The <footer> tag is used to define the footer section:

<footer>
  <p>&copy; 2023 Your Website</p>
</footer>

Use Cases#

The <header> and <footer> tags are commonly used to define the header and footer sections of a web page:

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <h2>Main Content</h2>
  <p>This is the main content of the page.</p>
</main>
<footer>
  <p>&copy; 2023 Your Website</p>
</footer>

Section Header and Footer#

The <header> and <footer> tags can also be used within sections to define their headers and footers:

<section>
  <header>
    <h2>Section Title</h2>
  </header>
  <p>Section content...</p>
  <footer>
    <p>Section footer content...</p>
  </footer>
</section>

Conclusion#

The <header> and <footer> tags are essential for defining the header and footer sections of a web page or a section. By using these tags, you can create well-structured and easily navigable content.

How to Use the header and footer Tags#