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:

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

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal