Quick — name the parts of a web page! Understanding the anatomy of a web page will help you create an attractive site that makes it easy for your readers to find what they’re looking for.

You may not be able to name the various parts of web page anatomy, but if you’ve spent more than five minutes online you probably recognize them when you see them.

Just as most of the world reads from left to right and top to bottom (sorry, Asia), when you’re browsing the internet you expect the sites you visit to work a certain way.

You expect to find the most important information at the top, on the left-hand side. Next most important is the top right.

The people who come to your website expect the same thing.

That’s why web page layout is similar from one site to the next, and why your site’s design should contain some specific elements. The overall layout is what we mean by anatomy of a web page.

Let’s quickly run through a web page’s components, why they’re important, and how you can make it easier for your readers to find what they’re looking for on your site. We’ll start at the top and work our way down.

#1. The Header

Web page anatomy begins at the head. As its name implies, the header is what’s at the top of the page.

It includes the name of the site, and often a brief tagline. The tagline gives the reader just a bit more information about what to expect on the site.

Here’s the header for this site. It’s pretty obvious that the site is called WordPress Building Blocks and the tagline — creating your WordPress site one block at a time — lets you know the site is about building WordPress websites.

Your header may include a logo design, like mine above, but it doesn’t have to. This header uses words on top of a photograph.

Today’s headers are sometimes different on the homepage than the rest of the site. If you’re not sure what’s part of the header, click away from the homepage and see what’s at the top. That will be the header.

#2. The Menu

The menu is like a word map. It shows your visitors how to find what they’re looking for on the site. The menu is typically found directly above or directly below the header — sometimes both.

The menu should be clean and uncluttered. Sometimes this takes a lot of thought and planning. Only your most important categories should have a place on the menu.

Site visitors want to find anything they’re looking for in three clicks or less. One site that does a fantastic job with their navigation is Amazon.com. Despite offering tens of thousands of items for sale, they make it very easy to find things.

To keep the menu navigation clean, you can use drop downs. When your reader hovers the mouse over the menu item, a whole new list drops down for them.

#3: The Content Area

Also known as the body (in keeping with the anatomy less), this is the biggest part of the web page. It’s where your content shows up, whether that’s text, video, audio or images.

#4: The Sidebar

As its name suggests, the sidebar is a column that runs along the right or left side of the page — sometimes both. Some sites get fancy with more than one sidebar together on the right or left.

Generally, you use the sidebar for items you want to display on every page. Advertising, an opt-in or subscription form, and extra navigation are all commonly displayed in a sidebar.

Some websites also put links to social networks in the sidebar, or show their latest tweets, Facebook status updates, Pinterest pins or Google Plus posts.

Depending on your audience, you may do away with the sidebar altogether.

That’s because, on a mobile device, viewers won’t see it until they scroll down past the main content area anyway. So if the majority of your viewers are coming to your site on a laptop or desktop computer, a sidebar is fine. But if over half of your users are on mobile devices, consider designing your pages without the sidebar.

You don’t need a sidebar on every single page of your site — the home page often doesn’t have one. Certain types of sales pages frequently omit the sidebar as well.

Fortunately, a good WordPress theme will make it easy to choose which pages should show the sidebar, and some even let you choose to show different sidebars on different pages.

Here’s more information about what to include in your WordPress sidebar.

#5: The Footer

Just as the header’s at the top of the page, the footer is at the bottom.

Like the sidebar, use the footer for things you want to show on every page. It’s a good place to put your contact information, for example.

Here’s an example of an entire web page anatomy, with each component marked off. (This is also a peek through the way-back machine, at an older version of this site.)

This page was updated on March 10, 2021.