Lesson 3
Adding a Header, Footer, and Main Elements in HTML
Adding a Header, Footer, and Main

Welcome back! You've already learned how to create a well-structured webpage with navigation menus and sections in your previous lesson. This time, we'll take it a step further by adding headers, footers, and main content areas to your webpage. These elements help in organizing your content better and make your webpage more professional and user-friendly.

What You'll Learn

In this lesson, you will learn how to:

  1. Add a Header: A typical header includes the website's title and a navigation menu.
  2. Add a Footer: A footer usually contains copyright information and links related to the website.
  3. Add a Main Section: The main section is where your central content goes.

Here's an example snippet to kick things off:

HTML, XML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>My Website</title>
6</head>
7<body>
8    <header>
9        <h1>Welcome to My Website</h1>
10        <nav>
11            <ul>
12                <li><a href="#Home">Home</a></li>
13                <li><a href="#About">About</a></li>
14                <li><a href="#Projects">Projects</a></li>
15            </ul>
16        </nav>
17    </header>
18    <main>
19        <section id="Home">
20            <h2>Home</h2>
21            <p>This is the homepage. Explore to learn more about me.</p>
22        </section>
23        <section id="About">
24            <h2>About</h2>
25            <p>I'm a budding web developer with a passion for creating interactive user experiences.</p>
26        </section>
27        <section id="Projects">
28            <h2>Projects</h2>
29            <ul>
30                <li>Project A - A simple static webpage.</li>
31                <li>Project B - A dynamic website using JavaScript and APIs.</li>
32            </ul>
33        </section>
34    </main>
35    <footer>
36        <!-- Note, that the &copy; is an HTML entity for the copyright symbol -->
37        <p>&copy; 2024 My Website</p>
38    </footer>
39</body>
40</html>

This example shows a clear structure with a header, main content, and a footer to provide a seamless experience for your webpage visitors.

Let's break down each part:

  • Header: Contains the website title and a navigation menu to help users navigate the website - this is constructed using the <header> semantic tag.
  • Main: Contains the main content of the webpage, such as the homepage, about section, and projects section - this is constructed using the <main> semantic tag.
  • Footer: Contains copyright information and links related to the website - this is constructed using the <footer> semantic tag.

By using these elements, you can create a well-organized and professional webpage that is easy to navigate and visually appealing.

Notice, that we refer to these tags as semantic tags. Semantic tags do not have any default styling, as opposed to non-semantic tags like <p>, <li>, etc., which have default styling applied by the browser. These tags are used to define the structure of the webpage and provide meaning to the content. They help search engines understand the content better and improve accessibility for users.

Why It Matters

Incorporating a header, footer, and main section is crucial for several reasons:

  1. Organization: It makes the webpage more organized and easier to read.
  2. Navigation: Helps visitors quickly find other sections of the website.
  3. Professionalism: Gives a polished and complete look to your webpage.

By mastering these elements, you ensure your webpage is not only aesthetically pleasing but also user-friendly and professional. This is essential whether you're creating a personal blog or a professional portfolio.

Excited? Now, let’s move to the practice section where you'll get hands-on experience in adding these critical elements to your webpage.

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.