Now that you’ve organized and gathered your content, you’re ready to begin building your website.
What are the parts of a web page?
The exact steps will vary a bit depending on which platform you chose, but they all boil down to HTML, which is the language of web pages. You don’t need to learn HTML to build your website but it helps to have some terminology in your pocket because it will make it easier to use the building tools and ask for help.
The anatomy of a web page
Did you know that every web page has a basic anatomy? Once you see it, you won’t be able to unsee it. It’s a secret that makes troubleshooting easier.
It helps to have some terminology in your pocket because it will make it easier to use the building tools and ask for help. Common vocabulary for the win!
Each page on a website shares some common elements. These are the header, the content area, the footer, and sometimes a sidebar. Let’s look at what each one contains and where you’ll find it on the page:
The header of the site is where you find the logo for the website. It’s also where the main navigation menu will appear. Other things that can show up here are shopping cart icons, a phone number, social media icons and a search feature.
The bare minimum is your logo or name plus your main navigation.
The header is repeated across the site, in general, it’s a single element that gets repeated and you’re able to edit it one place with changes being applied across the board.
Your main navigation is treated the same way, you edit it in one location and the changes apply to your whole site.
Appearing in your header at the top of every page, your navigation menu should contain the most important pages of your website. They are:
- Blog (if you’ll have one)
Your top level navigation should not contain more than 5 to 7 choices. If you added every page on your site there it would quickly become overwhelming. You can include other important pages in drop down sub menus as needed.
Your logo or name will also be linked to the home page of your site as part of your navigation.
You may also have a footer navigation with just a few links:
- Privacy and/or Terms
The Content Area
This is where your main content appears. For an article or blog post, it’s the text of the page. For other pages, it can be the content that makes up your landing page for a reader magnet, your bio, a video, or mix of things.
The content area is usually unique to the page. It’s the meat of the page and you’ll generally go to that page to edit it. At it’s simplest, it’s a got a headline (heading tag, H1) and your content in text below.
This area sits at the bottom of every page of your site, much like the header sits at the top. Your footer will contain things like alternate navigation links, social media icons and links, a sign up for your newsletter.
A sidebar is a specialized section on your page. This is often found on blog posts and blog category pages. Your sidebar sits off to the right or left of the content area and holds things like links to your categories, links to your most recent posts, a newsletter sign up form, or anything you want to promote in a prominent location. This is another area that is repeated across multiple pages but not necessarily every page of your site. It’s managed in one place, meaning one edit changes it everywhere it’s used.
The Metadata for Your Page
Metadata is hidden behind the scenes in the source code or HTML of your web page. Metadata contains data about the information on your page. It’s data about data that makes it easier for the search engines to understand and use. This includes things like your Page Title, meta-description, OpenGraph tags (Facebook) and others. More on this here on the Search engine optimization page.