Header & Footer

Welcome to this tutorial on “Header & Footer” in HTML! Understanding these fundamental elements is crucial for creating well-structured and accessible web pages. They’re more than just decorative elements; they significantly impact how your website looks, how it’s interpreted by browsers, and how it interacts with assistive technologies. Let’s dive in and explore how to use them effectively, focusing on semantic HTML best practices.

Introduction

In web development, the header and footer are essential components of a webpage. The header typically contains the main navigation, logo, and sometimes a search bar. The footer provides additional information like copyright notices, contact details, and links to important pages. Using semantic HTML – meaning using HTML elements that describe the purpose of the content rather than just its visual appearance – is a key principle for creating more robust and user-friendly websites. This tutorial will cover the basics of creating and styling header and footer elements using pure HTML.

Header Elements

The header is the top section of your webpage. Here's how to create a basic header:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>

  <header>
    <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>

  <main>
    <h1>Welcome to My Website</h1>
    <p>This is the main content of my website.</p>
  </main>

</body>
</html>

In this example:

• <header>: This element defines the header section.
• <nav>: This element creates a navigation menu. The <ul> and <li> elements create a bulleted list for the navigation links.
• <a> (anchor tag): These tags create hyperlinks to different pages on your website.

Footer Elements

The footer is the bottom section of your webpage. It’s commonly used for copyright information, contact details, and links to important pages.

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>

  <footer style="text-align: center; color: #333;">
    <p>&copy; 2026 My Website. All rights reserved.</p>
    <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
  </footer>

</body>
</html>

Here's a breakdown:

• <footer>: This element defines the footer section.
• <p>: This element contains the copyright information.
• <a href="#"> : This creates a link to a page.
• <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>: These links are placeholders for actual pages.

Semantic HTML Considerations

Beyond the basic header and footer elements, consider using semantic HTML. This means using elements that accurately describe the purpose of the content. For example, instead of just using <div> elements for the header and footer, you could use <header> and <footer> to clearly indicate their roles. This improves accessibility and SEO.

Practice Exercises

Let's test your understanding with these exercises:

1. Create a simple webpage with a header and footer. Use HTML to create a basic structure with a header and footer.
2. Add a search bar to your header. Use the <input> element to create a search box.
3. Create a footer with a copyright notice and links to your privacy policy and terms of service. Use the <p> tag to display the copyright information.

💡 Tip: Use the aria-label attribute on elements to provide additional context to assistive technologies. For example, you could add aria-label="Search Bar" to the <input> element.

🖥️ Try It Yourself

Here are a few practice exercises you can try in the live editor:

1. Simple Header: Create a basic HTML page with a header containing a title and a navigation menu.
2. Footer with Copyright: Add a footer to your page with a copyright notice and links to your privacy policy and terms of service.
3. Search Bar: Add a search bar to your header and test it.
4. Simple Footer: Create a footer with a copyright notice and links to your privacy policy and terms of service.