Objectives
- Understand the purpose and usage of the <header> and <footer> elements in HTML.
- Learn how to properly structure the top and bottom sections of a webpage using <header> and <footer>.
- Explore common content typically placed within <header> and <footer> elements.
- Practice creating well-organized webpage layouts with defined headers and footers.
Introduction to <header> and <footer> Elements
The <header> and <footer> elements are key structural components of a webpage. The <header> typically contains introductory content, such as the website logo, navigation menu, and title, while the <footer> usually holds information like copyright details, contact information, and links to privacy policies.
Basic Usage of <header> and <footer>
These elements help to create a consistent look and feel across multiple pages of a website, ensuring that visitors can easily navigate and find important information.
Example: Structuring a Webpage with <header> and <footer>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Webpage</title>
</head>
<body>
<header>
<h1>My Awesome 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>
<h2>Welcome to My Website</h2>
<p>Here, you’ll find all sorts of great content.</p>
</main>
<footer>
<p>© 2024 My Awesome Website</p>
<p><a href="#privacy-policy">Privacy Policy</a> | <a href="#terms">Terms of Service</a></p>
</footer>
</body>
</html>
In this example, the <header> contains the website’s title and a navigation menu, while the <footer> includes copyright information and links to policies. This structure ensures that the page is well-organized and user-friendly.
Fun Question
Why do you think the element names were chosen as <header> and <footer>? Think about other areas where these terms are used, such as in books or documents. How do their roles compare?
Exercises
1. Create a webpage that includes a <header> with a logo, a navigation menu, and a search bar.
2. Add a <footer> to your webpage that includes social media links, contact information, and a back-to-top link.
3. Modify your <header> to include a dropdown menu under one of the navigation links.
4. In your <footer>, add a section for subscribing to a newsletter with an email input field and a submit button.
5. Experiment with styling your <header> and <footer> using CSS to create a fixed header and footer that stays at the top and bottom of the page as you scroll.
Summary
- The <header> element is used to contain introductory content and navigation links at the top of a webpage.
- The <footer> element is used to hold information like copyright details, contact information, and links to important documents at the bottom of the page.
- Using <header> and <footer> helps to create a consistent layout and improves the overall user experience on a website.
By mastering the <header> and <footer> elements, you can create well-structured webpages that provide clear navigation and important information to users in a consistent manner.