The Parts of a Website Every Business Owner Should Understand

You want your business website to rank on page 1 of Google…

AND you want it to look professional, so it wows first-time visitors…

AND you want it to explain what you do and how you’re different…

AND you want it to compel visitors to take action and engage with you.

That’s a LOT to ask from one website.

But it’s all possible, provided you understand the parts of a website and how they work together.

By the end of this guide, you’ll understand:

  • Common website terminology
  • How to optimize website content to convert visitors into customers

You can take this new-found knowledge and use it to build your own website.

Or, if that’s not your cup of tea, use it to provide clear direction to website designers or developers.

Ready to dive in? Let’s get to it.

Table of Contents

Basic Website Parts

Every website page has universal parts.

You’ll see them when you visit an e-commerce store, check social media, or read the news.

Here’s the catch: even though they’re universal, they’re also misunderstood.

Many small businesses, and even some medium-sized corporations, make simple mistakes related to these essential parts of a website.

Keep reading, and you won’t follow in their footsteps.

Logo and Navigation

We’ll start at the top of the page.

The first thing any visitor should see is your company logo. This logo establishes your brand identity right from the start.

While the alignment can vary, you’ll find most logos positioned in the top left corner of the screen. This way, they are easy to see and display well on mobile devices.

Examples of website logos for a CPA firm, a landscaper, and a veterinarian

Logos often link to the website’s home page because this is a website design standard, so visitors expect it.

They will also expect to see navigation links at the top of the page:

Example of website navigation on a business website

Your website navigation is a summary of the site’s contents. It helps visitors see the products or services you offer at a glance.

On a desktop computer, your navigation can span the width of the page.

On a mobile device, it will collapse into a “hamburger” menu, so named because the icon looks like a patty and two buns.

Example of a hamburger menu on a mobile device

So, what are some common mistakes that companies make with navigation?

  1. Creative navigation labels
  2. Unclear navigation labels

What do I mean by “creative” labels? This is when a company names their About Us page “Our Mission in Life.”

Visitors to the page are looking for a navigation link that says “About” or “About Us.” No need to spruce it up.

The second problem is when companies use their terminology instead of their customers’.

For example, if your company builds Widgets but all your customers call them Gizmos, then your navigation should say “Gizmos.”

Headings

Take note: your headings are critical to the success of your website pages.

They break up the page content into manageable chunks for your readers and make it easy for search engines to understand the topic.

Think of them as a high-level outline.

Headings follow a hierarchy:

  • Heading 1 (H1) is the page title and appears only once, at the very top
  • H2s break up the main sections of a page
  • H3s appear within H2s to create additional sub-sections

Headings are well-structured when humans can scroll down the page without reading a word of text and still get the gist of the page.

Concise headings also make it easy for the search engine’s artificial intelligence to decode the content of your page.

Take the page you’re reading right now.

Here is the heading structure a search engine “sees” when it scans this page:

Heading structure of this web page, showing H1, H2, and H3 headings

This organization makes the search engine’s job straightforward. It doesn’t have to work at all to figure out how to categorize and classify the content.

The most common issue I see when conducting a website content audit is missing or poorly organized headings.

When you have a web page with no headings (especially an H1) you make it hard for humans and search engines to scan the page.

There’s a simple fix: make sure every website page has a clear, concise H1 heading. Include more H2s and H3s depending on the length and content of the page.

Call to Action

Of all the parts of a website, calls to action (CTAs) are the ones most often overlooked.

Your website exists because you want your visitors to DO something.

  • Maybe you want them to contact you for a free estimate.
  • Maybe you want them to subscribe to your newsletter.
  • Maybe you want them to read your blog or take a quiz.

Whatever your desire, website visitors won’t take action unless you ASK them to.

They are hopping from one website to the next, skimming and scanning for information.

If you want them to pause on your website and engage with your further, you need a prominent call to action at the top of the page.

On this page, the visitor reads the primary headline (H1) and sees the call to action, all in one glance. They may not take immediate action, but the offer is there.

They can’t miss it.

This makes it stupid-simple for visitors who are ready to engage.

Website Images

Adding images to your website is a great way to make it look professional.

But they come with a drawback that you should be aware of.

Image files can be massive compared to text, especially if the images are not optimized for display on a website.

Giant, unoptimized images increase the time it takes for your page to display. That’s bad news for both visitors and search engines alike.

If your page takes more than five seconds to show up, neither one will stick around.

There are two solutions here:

  1. Reduce image sizes before you add them to your website pages
  2. “Lazy load” images that are further down the page

Resizing your images is a snap. Just use an online service to turn gigantic photos into web-friendly images. Services like Image Resizer are free and easy to learn.

Lazy loading defers the display of images that aren’t visible in the browser window. As the reader scrolls down the page, these images only load when they become visible.

Many website building services provide the option to lazy load images. Just Google “[service name] image lazy load” for instructions.

Links (Internal and External)

Ah, links. The bread and butter of the Internet.

You can also say that links make the World Wide Web go ’round. After all, they’ve been around since the first version of the Internet (Web 1.0).

Links do much more than send visitors to another piece of online content.

They are an endorsement of that piece of content, a way to say, “I believe in this content so much, I’m going to refer you to it.”

Search engines follow links (using programs called “robots” or “spiders”) to discover new content they aren’t yet aware of.

Graphic of websites and online services linked together with lines

Links on your website help these programs discover every page and signal which pages are the most important.

If you think of each link as a vote of confidence, it makes sense.

A page with 100 links (online endorsements) is clearly more important than one with only 10.

Your website can include two types of links to benefit both readers and ‘bots:

  1. Internal – links to other pages on your website
  2. External – links to pages on other people’s websites

A nice blend of both positions you as an authority because you’re recommending helpful content, even if it’s not your own.

Footer

This one is obvious.

The footer is the section at the bottom of every website page.

Like your website logo and navigation, the footer is a global element: it’s identical on every page. If you update it on one, it will update on all the others.

Footers are rarely seen since only a handful of human visitors scroll to the bottom of the page. Regardless, this space still presents you with several opportunities.

First, you can use the footer to reinforce your brand identity and message. Consider throwing in a tagline or mission statement.

Second, you can repurpose your main website navigation and include links to other pages. This way, visitors don’t have to scroll back to the top to visit another page.

Finally, footers are a great place to display important supporting information like legal disclaimers.

Technical Website Parts

The technical parts of a website are less glamorous to work on than headings and images.

Most people won’t even see these elements when they visit your page, but they’re no less important than your layout and copy.

Get these technical parts right, and your website will appeal as much to search engine programs as it does to your human visitors.

Protocol

The “protocol” indicates if your website pages are secure.

Secure website pages start with https, while unsecure ones are just http.

Regarding protocol, every page of your website should be secure. No exceptions.

Making every page secure protects your users and makes it difficult for those with bad intentions to steal personal information.

Also, search engines expect it. They will penalize websites that aren’t 100% secure by reducing their ranking.

Every website hosting service you use should make it easy to have https on every page.

If not, it’s time to find a different hosting service.

Domain

The domain is your website’s Internet name, which includes .com, .org, .biz, etc.

Some domain examples:

  • amazon.com
  • ebay.com
  • twitter.com (For how long? Who knows?)

Years ago, every website domain started with www, but that’s not required anymore.

Today, you can access a website in your browser by typing the domain into your web browser.

For example, you can visit this website by entering dynamicwebcopy.com.

URL (Slug)

The URL for any website page includes three components:

  1. The protocol
  2. The domain
  3. The page slug

We’ve already talked about protocol and domain, so all that’s left to cover is the slug.

Image of slimy slug with caption Not This Kind of Slug

The slug is the part of the URL where you have the most control. Every page of your website can (and should) have a unique slug.

Slugs can include multiple words to describe the page, with each one separated by a hyphen.

So, if you have a page about feather cat toys, your page slug could be “feather-cat-toys.”

A page about best toys for tweens might say “best-toys-for-tweens.”

And a page about underwater basket weaving would obviously be “underwater-basket-weaving.”

You get the point.

When you put together the protocol, domain, and slug, you get this:

URL with protocol (https), domain (dynamicwebcopy.com) and slug (what-is-a-website-title)

Title and Description

Hidden from view, page titles and descriptions are critical elements…

Assuming you want to get traffic from search engines, that is.

The title and description are part of the web page code, so they’re not visible when you view the page in a web browser.

But they do appear on search results pages, which is why they’re so important.

In search results, the page’s title is the big, bold link, and the description is the text right below it.

Example of a search results title and a description

Both title and description provide you with an opportunity to capture the attention of a searcher.

When you write them well, you can compel someone to click on your link instead of all the others on the page.

Responsive Design

In the pre-iPhone era, websites only had one display setting: for laptop and desktop computers.

Now, they must adapt to multiple screen sizes: desktop, tablet, and phone.

When a website adjusts its layout to fit within the visible display, it’s called “Responsive Design.”

In short, it means your website doesn’t look like a hot mess on a mobile phone.

It’s easy to tell when websites aren’t responsive. They look like the one on the left (hard to read, no?).

The website on the right is responsive, since everything is stacked vertically.

Two phone side by side showing a website without responsive layout that is too small to read, and a website with responsive layout customized to fit the phone screen

Responsive design requires special code so your website recognizes the device used and re-arranges the display accordingly.

If you build a new website today using any popular service like WordPress, Wix, Squarespace, or Weebly, any website template you choose will already be responsive.

Image ALT Text

As with titles and descriptions, you can’t see image ALT text on the page.

But ALT text serves two essential functions:

  1. It helps people with visual disabilities picture the image
  2. It helps search engines understand what the image shows

When a person with a visual disability visits your website, they are likely using a screen reader.

This technology reads text aloud, so the visitor understands the content of your page.

Since images don’t have any text associated with them, the only way for the screen reader to provide context is with ALT text.

When the ALT text says something like “image 1,” that’s not terribly helpful. But when it says, “A team of people working on laptops in a sunlit office,” then it makes sense.

In addition, this same text helps search engines index and categorize the images on your website.

If you’d like your website images to show up in image search, then it’s essential to have descriptive ALT text for every one.

Essential Website Pages

Phew! Are you still with me?

If yes, gold sticker for you. You clearly want to understand all the parts of a website.

Let’s transition from talking about the parts of pages and the overall website to specific pages.

These are the pages that your website must have – no exceptions.

They show visitors that you are a legitimate business and not some fly-by-night operation out to take their money and run.

Home Page

Example of a home page - HubSpot

Even if your website only has a single page, it has to be a home page.

This page showcases everything your business offers.

It’s a high-level introduction for the visitor who has no idea who you are or how you can help.

It also acts as a guide, showing visitors the different directions they can go in.

For example, if you offer multiple services, you can describe each one briefly on your home page and link to a service page for more detail.

Here’s something important to remember about your home page: it may not be the first page a visitor sees.

This is especially true if you have a blog.

Since you can have hundreds of blog posts and only one home page, visitors are more likely to land on a blog page first.

That’s why your website logo and navigation should link to your home page.

When visitors read your blog post and like what you say, they can easily access your home page to learn more.

About Us Page

Example of an About Us page - Intergrowth

These pages are tricky.

Their name implies that the content is about your company: when it was started, what it can do, and how awesome it is to work with you.

And this is how most companies treat their About Us pages.

But it’s a missed opportunity.

You see, the visitor to your About Us page isn’t actually looking for information about your company. They’re trying to figure out if you’re the best business for the job.

They have a problem to solve and want to see that A) you understand their problem and B) you’re an expert at solving it.

So treat your About Us page as a way to speak directly to your visitor and assure them that they’ve found a company that will help THEM succeed.

Product/Service Pages

Example of a Services page for a landscape contractor - The Plant Guys

These are your “money pages.”

While other pages on your website exist to build awareness and trust in your company, product and service pages are designed to sell.

Product pages are standardized:

  • Product photo
  • Price
  • Description
  • Reviews (or Testimonials)
  • Buy Now / Add to Cart

Everything about your product page should instill confidence in the buyer.

They need to feel that you’re a legitimate website and see that they can easily contact you or return the item if they’re unhappy.

Service pages are more nuanced.

Here, you have an opportunity to show the buyer how they will benefit from the service.

Instead of listing what you do and how you do it, you can help buyers visualize their problems being solved.

This makes them much more likely to take the next step…like contacting you.

Contact Page

Example of a Contact Us page for a copywriter - Erika Fitzgerald

Like About Us pages, companies often overlook the information on their Contact page.

Many settle by providing their location, phone number, and a contact form.

But a Contact page provides a real opportunity to reinforce WHY the person should follow through.

Instead of just accepting that a visitor will naturally follow through, you can give them a nudge.

Remind them how they’ll benefit from contacting you, and set their expectations.

For example, if you typically respond to contact messages within four business hours, tell them that on your contact page.

Then, respond in two hours and really blow their minds.

Legal Disclaimers

Every website – regardless of size – should have at least three legal disclaimers:

  1. A Privacy Policy
  2. Terms of Use
  3. A Cookie Policy

These pages help you clearly state how you use and protect the information you collect on your website and how you expect visitors to behave.

On the off chance visitors complain about something, you can point to point to your legal documents to show that you were transparent.

If the complainer didn’t read them…well, that’s their fault.

Having these legal documents also ensures that you comply with privacy laws like the General Data Protection Regulation (GDPR) and the California Consumer Privacy Act (CCPA).

It might seem like creating these legal documents is a royal pain, especially if your best friend or nextdoor neighbor isn’t a lawyer.

That’s why I recommend Termly. It makes generating legal documents a breeze.

The best part is that Termly’s documents don’t include much legal mumbo-jumbo, so they’re easy to read and make sense to the average website visitor.

Next Steps

You made it!

I realize this is a LOT of information to get through. I hope you walk away with a thorough understanding of the parts of a website.

Use your new-found knowledge to plan a new website.

Or, tidy up an existing website by adding some more headings, titles and descriptions, or image alt text.

If making website changes isn’t your jam, provide clear instructions to a website designer and/or developer and have them do the busy work.

Whatever you do, please make sure you avoid the common mistakes I’ve listed above.

This not only sets your website apart from the competition, it makes it a pleasure to use.

And happy visitors lead to curious potential clients.

Scroll to Top