If you asked a hundred web designers or developers how they label sections of a web page, you’d probably get a hundred different answers. That can get confusing, especially when you’re trying to communicate ideas. To bring some clarity to this, I’ll walk you through how I personally refer to the key sections of a web page, breaking it down into four main areas: the page header, the page hero, the body section, and the footer.
Let’s walk through each one in detail so you can have a better understanding of how to use these terms in your web design conversations.
1. The Page Header
Every website has a header, and its main job is to provide navigation and display the site’s logo. In the example I’m working with (which is actually my own website mockup), the page header includes the logo on the left, navigation links on the right, and a call-to-action button that stands out.
In its simplest form, that’s what the page header is: a place to house your logo and navigation links. It’s the very first thing visitors see at the top of your website and guides them through the rest of your site.
2. The Page Hero
Next, we have the page hero. This section comes immediately after the header and is crucial for making a good first impression. The page hero usually contains a main headline (or H1), a subheading, and sometimes a call-to-action button or visual elements like images or graphics.
Why is it called a “hero”? It’s the first thing visitors focus on when they land on a page. This section must clearly communicate what the page is about and engage the visitor right from the start. It’s the hero of the page, ensuring clarity and appeal right from the start.
3. The Body Section
After the hero section, we move into the main content of the website, referred to as the body section. This section includes all the content between the page hero and the footer. In my mockup, the body consists of several subsections:
- Work Section – Showcases past projects or services.
- Services Section – Highlights the different offerings.
- Testimonial Section – Displays social proof and customer feedback.
- Card Layouts – A common term in web design, a card layout is when information is contained in individual “boxes” or “cards.” These help break up content and make it easier to digest. You often see these used in areas like portfolios or blog previews.
- Call to Action (CTA) – This section prompts the user to take a specific action. It stands out from the rest of the page to grab attention, whether it’s to sign up, contact, or purchase.
4. The Footer
Finally, we reach the footer, which anchors the bottom of every web page. A typical footer includes the site logo, contact information, important navigation links, and copyright information. It might also feature extras like a newsletter signup, social media links, or additional calls to action.
The footer serves as a closing element for your website, providing visitors with a place to find key information before they leave the page.
