What are the 7 parts of website?

Table of Contents

Basic Parts of a Webpage

Important Website Concepts in 2021

Website Builders and Content Management Systems

Technical Website Parts

Hosting

Today’s business landscape is a hybrid of in-person and digital experiences. Building a navigable website lends a major boost to your business’s credibility because it gives customers a reliable, ever-present source of information in an easily accessible format.

While modern website building tools make it easier than ever before, it is still important to know the basic anatomy of a website. Each component serves and important purpose on your site and taken together should offer visitors and customers alike a seamless experience with your business.

Here are the key web page components you need to know in 2021.

Basic Parts of a Webpage

These are the key website components. Most of us don’t think about them as we navigate through the internet but would notice them if they were missing or somehow off, because they are essential elements.

Header

The header is the top portion of your website that contains the logo, menus, usually a search bar, and often a simple call-to-action buttons like an email opt-in or “call now” button.

The current trend is for simple headers that load quickly rather than heavy, image-laden ones that take up half the page.

It’s important to keep the header consistent across each of the pages on your site so visitors can easily navigate around.

Footer

The footer is the bottom portion of your website and acts as a secondary menu. It contains links to information like:

• Legal info
• Careers
• Privacy/Terms
• Contact Us
• About Us

At minimum, your footer should have your copyright info and privacy policy and terms.

These are important legal details. Many webpages also contain a site map in the footer. This is helpful for large websites with multiple sections, as it helps users navigate around the site more quickly.

Sidebar

Sidebars are one of the most customizable parts of a webpage.

They can be on the left or right side of the page, or both. They contain any combination of the following:

• CTAs
• Social Feeds
• Recent Blog Posts
• Email Opt-Ins
• About Us
• Bios of the authors
• Shopping widgets
• Customer testimonials
• Contact info
• Videos

Choose the most important few for your sidebar to avoid a cluttered feel.

Menu & Navigation

Visitors need a way to visit different website sections. Your menu is a map of your site and should be accessible from the header.

Menu links should be divided by category in a way that makes sense for your business – for example, residential and business services for a plumbing company.

Clicking on a link directs visitors to different pages on the website.

On mobile, the menu is usually represented as three lines stacked on top of each other – i.e., a “hamburger menu.” Browsers tap the menu to view expanded options. Make sure each web page is linked to your menu, or visitors won’t find it. Expandable menus can help reduce clutter on the header of your site.

Body Content

All the design features ultimately exist to complement the body content of each page.

This usually refers to the written content of a page, though if you have an image-heavy page (like a photo gallery, for example), then the photos are the main body content.

The term “body” refers to the HTML code for this section, which tells your content platform to place this in the large open space in the middle of your page.

Images/Feature Image

Webpages need visuals to grab the viewer’s attention and quickly communicate what type of content they will find on that site.

Most pages contain a feature image or hero image. This is the representative image for each page. Other images should be included as well, but the feature image should be first.

On WordPress, a Featured Image is also known as a post thumbnail. This image is indexed with the webpage and appears in searches as the visual connection for any given page.

Core Website Pages

Every website has a collection of core pages that are crucial to the anatomy of a website. These are:

• Home
• Landing
• About Us
• Contact
• Blog

We will cover what each page is for.

Home Page

This is the home base and one of the core components of a website. It links to all your other pages and serves as a welcome and introduction for visitors. It usually includes a feature image, links to the key content on your site, and a key introduction to or benefit of your business.

The logo that you include in your header (which should be on every page, remember) should link back to your home page just in case visitors get lost in the different sections of a website.

Your home page should stay consistent but always up to date. Outdated websites erode customer confidence.

Landing Page

A landing page is different than a home page. Landing pages are typically connected to a promotional campaign and give leads a place to land when they click on an ad or social post.

Landing pages are simple and promote one direct call to action, like “buy now”, “call for a free quote”, or “download the guide”.

You can create multiple landing pages for specific promotions or campaigns and should retire outdated ones to avoid directing leads to useless content.

About Us Page

Your “About Us” Page is one the most important on your site.

It’s often a first stop for new visitors to your site and should include a bit about your history, mission, and distinctive.

Contact Page

Your contact page is essential and should be accessible from any part of your site via a sidebar or header menu.

Keep this page simple and navigable. An email us form, address, and phone number are essential components.

Website Blog

Blogs are a great tool for driving traffic to your site with authoritative content. Your blogs should be accessible from a blog page that lists each post sequentially, with the most recent at the top.

You can also have a section for featured blog posts that you want to highlight or a place to showcase your most popular posts.

You may need to divide the blog posts into multiple pages to speed up load times. Make sure you keep the posts in chronological order, though you may allow viewers to sort articles by topic or category, especially if you have a lot of posts.

Important Website Concepts in 2021

There is a lot of jargon thrown around when it comes to website design. Here are a few of the most important terms to know.

Above the Fold

Newspapers are folded, and the most important story is customarily placed on the front page towards the top so it can be quickly scanned even when the newspaper is folder.

Regarding web page sections, “above-the-fold” means content that visitors can view without scrolling down the page.

Research indicates that people spend up to 80% of their scanning time on above the fold web content, mostly deciding whether they want to bother scrolling down to keep reading.

This should be attention-catching content, like a strong headline, interesting feature image, or a one-line summary stating what the page is all about and why it is valuable.

Call to Action (CTA)

Web sites can have more than one CTA, and they can be located in several different parts of a web page: the sidebar and header are the most common.

Call-to-actions invite viewers to do something to further interact with your brand and appear on your webpage as a popup or form. Common phrases include:

• Subscribe
• Learn more
• Try it free
• Order now
• See How
• Act now
• Book your next adventure
• Call us
• Schedule your consultation
• Get matched
• Treat yourself
• Get 10% off

CTAs should be urgent but not pushy and should match the tone of your brand. These usually require the viewer submit an email address.

All of your most important webpages – home page, contact us, about us, and blog page — should include a call to action, even if it’s as simple as an email opt-in form.

Forms

A web form is a page where users voluntarily enter personal information. Surveys, email opt-ins, shipping updates, and loyalty programs are all processed via web forms.

Keep forms short and clear, and always include a statement about how the information will be used. According to HubSpot, improving user experience with web forms increased businesses’ lead conversion rates by up to 75%.

Mobile Responsive Web Pages

Worldwide, half of all internet browsing occurs on a mobile device. Additionally, more users make purchases via mobile devices. This means your website needs to be optimized for easy viewing and interaction via smartphones and tablets.

This doesn’t happen automatically. Some website builders are geared towards mobile-friendly webpages – Constant Contact is one example.

Good mobile web pages are simple, have a clear CTA, and feature high-quality images.

Website Builders and Content Management Systems

Web building services like WordPress and Shopify have made it drastically simpler to build a website without advanced technical knowledge.

This is where most people begin the process of designing and building a website. Every page is essentially a series of code, and a website builder lets you design a website without accessing this code directly.

Users choose from a series of pre-designed templates, which offer varying degrees of customization.

Website builders allow website managers to upload new content, alter the layout of the site, integrate forms and social feeds, and add special tools called plugins.

Most web builders are also called content management systems, which just means you can write, edit, and post your content using its interface.

We’ve considered some of the most popular website builders here:

WordPress

One of the most popular website builders available is WordPress.

With endless customization options and a reasonable annual cost, WordPress also offers many mobile optimization options. While you may have to tweak some HTML here and there, it is mostly user-friendly.

Shopify

Arguably the most customizable e-commerce website builder, Shopify has over a million and a half users worldwide. It has an integrated payment system, which makes it a great choice for web stores.

Wix

Wix is a good choice if you want to get started quickly and aren’t as finicky about customization options. While it doesn’t have as many blog organization options as WordPress, it can be a good choice for small businesses who want a storefront plus some content options.

Squarespace

All of Squarespace’s templates are automatically mobile-friendly and the simple, bright designs are favored by public figures like Amanda Gorman. It’s also less expensive than some competitors.

Weebly

A good choice for e-commerce sites, Weebly has an intuitive interface and offers a limited experience for free, with modestly-priced tiers offering additional functions. It has an Apps section rather than plugins, which might be more familiar for WordPress users.

Technical Website Parts

The behind-the-scenes information like hosting, domains, and CMS are still important to fully understand the anatomy of a website. We’ve covered the most important components below.

Plugins

Plugins are like apps that add functionality to your website. Your website builder will offer a menu of plugins compatible with its interface. Some are free and others require a subscription or an account with a third-party service.

Plugins can be found on many parts of a webpage, and can include:

• Social share buttons
• Embedded videos
• Email opt-in forms
• SEO tools
• Share counters
• Popup generators

Hosting

Web hosting is essentially your small built of internet real estate upon which you build your website. All websites need to purchase hosting, which is renting space on a server to store and publish your content.

Like rent, hosting needs to be renewed annually. Most website builders also offer a list of compatible hosting services.

Domain Name

Each website has a unique location on the internet accessed by it’s IP address. This address is a long series of numbers, so there is a “human-friendly” text version called the domain name.

The domain name is also called the web address. It follows the standard formula:

www
domainname
.org, .com, .edu, etc.

This should communicate the nature of the website as clearly as possible, plus be easy to remember and spell.

For example, celebrities often choose their own name as their domain name. A common name might already be taken or a hard to spell name might make it hard for people to find the site.

URL

URL stands for Uniform Resource Locator and refers to the exact location of any given webpage. It includes your domain name and specific page information.
Domain names direct to the home page of the site. URLs direct to a specific page on that site.

For example: https://www.taylorswift.com/ directs to the homepage of the official Taylor Swift website, while https://store.taylorswift.com/collections/new-merchandise-beach-collection/products/just-a-summer-thing-scrunchies directs to a page featuring a particular product on the site’s store.

Most website builders provide some control over the URL. If you choose not to customize it, it will be automatically generated based on the name of your web page.

SSL

SSL stands for secure sockets layer, and is a type of code that ensures a secure encryption between a server and a browser.

This protects the data that passes between the two locations. This prevents third-party attackers from intercepting data that is entered in the browser as it makes its way to the server. Therefore, it is recommended that any site asking for personal information obtains an SSL certificate.

SSL certificates come in a range, with different levels of protection. Higher-security certificates are usually required by law for financial or insurance websites, for example, while a standard e-commerce site will have lower security requirements.

The cost of the certificate also depends upon the level of security it provides, and most need to be renewed annually.

SEO

SEO stands for Search Engine Optimization and is the primary way your website gets found by search engines (most notably Google).

Most searchers only click on the first page of search results, so it’s crucial that your site appear useful to Google.

This is accomplished through optimization, or including keywords in different parts of a website page.

Conducting keyword research identifies which keywords your target audience is searching for. There are many tools designed to conduct keyword research, or using Google’s predictive search function is a good way to find long search phrases, called long-tail keywords.

Webpage sections to optimize include:

Meta Description: Each webpage has a meta description that explains what the page is about. Your web builder allows you to edit this directly to include important keywords.

Title Tag: Include target keywords in your titles to immediately show search engines and readers that this is the topic they are looking for.

Header Tags: Using the correct combination of header tags to structure the hierarchy of topics represents best practice for content publishing on your site.

Body text: Avoid scattering keywords everywhere, which hurts your Google ranking. Including them judiciously in the first paragraph is the most strategic way to optimize your pages.

How do you optimize your clients’ sites? We’d love to hear from you. Tweet to us @seoptimer.

Click the image below to download our infographic about the Essential Parts of a Website.

What are the seven 7 parts of a website?

What are the 7 types of websites?

What are the 7 website design elements?

What are the 8 parts of a webpage?