When building out a website, you might notice that web designers and developers often use different terminology when referring to sections of a web page. It can get confusing!
So today, I want to bring some clarity by breaking it down into four main areas: the page header, the page hero, the body section, and the footer.
Let’s walk through each section and explain what they mean, so whether you’re working on a new site or collaborating with clients or developers, you’ll have the right terms handy.
1. Page Header
The first thing you’ll find on just about every website is the page header. This area includes your navigation and logo. For example, on my site mockup, you can see the logo on the left and the navigation links on the right, along with a call-to-action button that stands out.
In short, the page header is where your site’s main menu and brand identity live.
2. Page Hero
Below the header, you’ll often have a page hero. The page hero is where you set the tone for the rest of the page. It typically contains a headline (the H1 of the page), some introductory text, and possibly a call-to-action button or graphic to invite users in.
Think of it as the hero of the page — the very first thing people will see. It’s crucial that this section clearly communicates what the page is about and why it matters.
3. Body Section
Next, we move into the body section. This is where the bulk of your page’s content resides. It sits between the page hero and the footer, and it can be broken down into multiple sections, like a “work” section, a “services” section, or a testimonial area.
Within the body, you might also find what’s called a card layout. This is a design element that groups content into boxes (or “cards”), helping to break up the content and make it more digestible. You might see this used to showcase services, portfolios, or even blog articles.
Finally, the body often includes a call to action (CTA). This is a specific prompt or button that encourages visitors to take action, whether that’s contacting you, signing up for something, or making a purchase.
4. Footer
At the very bottom, you have the footer. The footer typically includes the logo, contact details, important links, and copyright information. You might also find additional elements like newsletter sign-ups or social media links here.
By understanding these four key sections of a web page, you’ll be better equipped to communicate with clients or developers about what’s needed on a site.
Takeaway
The anatomy of a web page isn’t just about aesthetics—it’s about guiding the user through an intuitive and engaging experience. Make sure your headers are clear, your hero sections capture attention, your body is well-organized, and your footer provides the essential information visitors need.
See you next time,
