This article will help you better understand the anatomy of a website and the most common elements and features in which they are built.
Before we dive in, it is important to know the basics of how a website is created. There are two main components to creating the layout of each web page and how that page is styled, e.g. to make it nice and pretty. They are:
1. HTML: Hypertext Markup Language. The standard language in which web pages are created.
2. CSS: Cascading Style Sheets. What makes the web page look pretty. It also controls how a website looks on desktop and mobile devices.
Having a working knowledge of HTML and CSS helps if you wish to create a website. But, today there are website builders (not discussed here) that greatly simplify the process of creating a website where you don’t have to know HTML and CSS intricately and at affordable prices.
Now that you understand what a website is created with, let’s dig into…
The Anatomy of a Website
Learning all the different parts of a website, what they are used for, and how you can leverage them can be a daunting task — and that’s why I created this guide for you!
Website design can be a complicated and difficult subject, and it is important to understand how a website works and the different elements that make it come to life, so to speak.
Let’s start with website pages. Pages are what make up a website. They come in many names, such as, Home, About, Contact, Services, etc.
Components of the Web Page
Each page of a website is made up of one or more components, also called elements. The main element of a page is the section. A section breaks up the content on a page into smaller parts to help the visitor more easily find the information needed.
What are the key sections of a website?
There are three main sections of a web page. These include:
Section #1: Header
The header is the top-most part of a web page which contains several elements common to most websites. It is one of the most valuable areas as it is used to promote your brand and make your site instantly recognizable to those who are already familiar with you.
This is generally displayed on every page of the website so that visitors can navigate easily throughout the website, unless it is a landing or sales page. In the latter case, the header will be removed so as not to distract from the message.
A header can include the following:
- Logo: A unique graphic symbol or design that represents a brand or company, often incorporating its name or initials. It creates a memorable visual that helps customers recognize and connect with the brand, conveying its values and personality at a glance! Best practice is to link this back to the home page so those visitor’s that may get lost can find their way back.
- Tagline (optional): A catchy phrase or slogan that encapsulates the essence of a brand or its mission. Its purpose is to communicate the brand’s core message in a memorable way, helping to create a lasting impression and connect emotionally with the audience! A tagline should GROW your company and AFFECT the bottom line. Don’t make it cute or clever.
- Primary Navigation: The main menu, or navigation bar on a website helps visitors find important sections or pages, like “Home,” “About Us,” and “Contact.” It guides users easily to the information they’re looking for, making their browsing experience smooth and enjoyable!
- Secondary Navigation (optional): A set of additional links or menus that provide more specific options related to the main sections of a website. It’s like a helpful sidekick to the primary navigation, offering visitors extra paths to explore deeper content or features without overwhelming them at first glance!
- CTA (call-to-action): Encourages visitors to take a specific action, like “Book Appointment,” “Buy Now,” or “Get Quote.” The main focus is to grab attention and guide visitors toward a desired outcome. making it easier for them to engage with the site and its offerings!
- Address & Phone Number: This is typically included for local, service-based businesses. This helps prospective buyers to know where they are located and how to contact them, making it easy for them to connect.
Here is a good example of a header that includes a logo, primary navigation and a CTA button:
Here is a great example of a header that has a secondary navigation:
Section #2: Body
The body, or content area of a web page is the main region which contains one or more sections, and elements, such as, text, images, videos and graphics. This content area sits between the header and footer of the page. A service-based business, such as a plumber in a local area, may have the following sections in the body of the home page. For example:
Hero / Banner
Clearly clarifies who you are, what you do and how you can help. In other words, can a visitor quickly figure out what your website is about. You want to answer the questions in your visitors head. Three main questions are:
What is it that you are offering/selling?
What is the problem you are solving? Or, how can it make their life better?
How can they buy from you?
This main headline in your hero section should, in the fewest words possible, entice the visitor to KEEP reading your website. Remember, if you confuse, you lose! Clarity in your messaging always wins the day.
TIP: Don’t try to be clever or cute in your messaging. Your visitor’s don’t have time to interpret what you are trying to get across. Clear is best!
The other element in this section is the call-to-action button. Use this to confidently call your visitor to action. To help you determine what this button should say ask yourself, “What is the next step I want my visitor to take?”
Your CTA should then reflect that answer. Here are some short and to the point CTA’s:
- Shop Now
- Schedule a Call
- Book an Appointment
- Find a Class
- Register Now
The website “Taking Cara Babies” is a great example of how to properly create a hero section.
You can see in the snapshot below that the title clearly tells what they do, who it’s for and the CTA gives them the next step in the process.
Free Offer
A giveaway, such as, a guide, checklist, coupons, etc. that will be given to the visitor with the exchange of their email address. This places them into your marketing funnel for future communication.
Services
Your top three problem solving services that your visitor will either want to learn more about or take action to buy your plumbing services. These should be listed horizontally in the section with a short intro and a CTA to entice them to click to read the full service page.
Discount coupons could be placed below for visitors to take advantage of limited time offers for specific services.
Why Choose Us
The compelling reasons that your visitor should choose you over your competitors. These could include you are family owned, you show up on-time, you focus on building relationships, your technicians are professional and clean, etc. Basically, what makes you different.
Testimonials
Communicate from satisfied customer’s of how your service was the solution to your problem. These can be manually entered or you can have an application embedded that can display reviews from one or more social platforms, such as, Google, Yelp, etc. It is always beneficial to place a CTA button that entices them to leave a review.
Gallery/Projects
Displays the most recent projects or work completed in a photo gallery format for the visitor to visualize the end-result. It is recommended to place project photos on the specific service pages (e.g. drain cleaning) they would be associated with instead of on one page with all of them.
FAQ (frequently asked questions)
A helpful resource that compile common questions and their answers about a specific topic, product, or service. They make it easier for people to find information quickly, saving time and enhancing understanding! These can be styled in a two-column layout or just with the question above the answer with one after the other.
CTA (call-to-action)
Grab the attention of your visitor and entice them to take an action or guide them to a certain outcome. As a service-based business that could be a “Free Estimate”, “Schedule Service”, “Book Appointment” or something similar. These can come in the form of a button, opt-in, pop-up, text link, ribbons or a slide-in.
Sidebar
A sidebar on a website is a vertical section, usually found on the left or right side of the main content area, that can display additional information, links, or features. It can help organize content and showcase important information, but can distract from the main content or take up too much space on mobile devices. They can be useful if properly implemented.
This is just one way you can lay out sections in the body of your website. Take a look at other websites in and out of your industry to see how they lay out their body content sections and then use the ones that work to draw in your ideal visitor.
Here’s another way to organize sections in the body content of a page:
- Hero
- Features
- Explainer Content
- Testimonials
- Examples/Gallery/Portfolio
- Pricing
- FAQ’s
I believe that David Molnar’s site does this really well. Here is a visual of his website body content:
I hope this section better explains what goes into the body content of a page. It should, in the least, help you lay out what you want to provide a good user experience for your visitor.
Section #3: Footer
A website footer serves as a convenient space at the bottom of a page where visitors can find important links, contact information, and additional resources. It helps enhance navigation and provides quick access to essential details, making the browsing experience even smoother!
Similar to the header of a web page, this displays on all pages of the website with the exception of a landing or sales page.
Donald Miller, of StoryBrand, calls this the “Junk Drawer” for a very good reason… because you are going to list everything you previously thought was important in this section that doesn’t belong in your header.
Here is the footer of my website as an example:
Types of Website Content
Now that we’ve covered the parts of a website, I’ll cover the primary elements of website content.
- Text: Words make up a majority of what you see on a web page, including this article. When writing text, keep the sentences short and paragraphs less then three sentences. This keeps your visitor engaged and makes the text on the page easier to read.
- Images: These help break up the text and bring visual appeal to the page. Images can also enhance your experience by evoking emotion, conveying ideas more clearly and to remember the information.
- Video: A video can help tell a story or show how something works. In some cases, it’s best to use video to clearly explain or make learning super easy. Plus, they keep you interested longer and help your remember what you learned.
Some secondary content elements may include:
- Audio: This content type can make the experience more engaging and can be easier to follow, and adds a layer of fun, makes it more enjoyable and a better experience.
- Icons: This is a type of picture or symbol that helps visitor’s find what they are looking for quickly. We’re all familiar with these, but an example, would be a house icon that would direct viistor’s back to the home page of the site. Another example, is a shopping cart symbol.
- Documents: These help visitors to find and use important resources while keeping the website clean and organized! PDF’s, reports, guides and the such are a few examples that come to mind.
- Animations: Moving images or effects can bring a website to life. They make content more engaging and help grab the visitor’s attention. You’ll commonly find animations being used on gaming, ecommerce and movie sites.
Pages That Are Common on a Website
Home Page
This is the central hub, and in most cases, the most visited page of your website. This is the first impression your visitor sees when landing on your website. Its purpose is to give visitor’s a quick overview of what the website is about, so make sure your message is clear.
The home page will also link to important pages, highlight key information and guide users to find what they are looking for.
Products/Services Page
This is where you offer or list your products or services to the visitor’s of your website.
Your product or service could be:
- Fishing tools for tying knots
- Lawn care & maintenance
- Coaching
- Tool organization for dealerships
- Clothing
- Luxury hair extensions
You can make a single page dedicated to your products or services, but if you have more than one, the best practice is to have a unique page for each product or service. This allows you to give more details, explain the benefits and features, and give a call to action to encourage your visitor to buy.
About Page
Use this page to inject trust with your visitor. They want to feel an interest to a brand and connected to what you stand for. People like buying from people NOT companies. Don’t make it too much about yourself.
Adham Dannaway has created a great example of an about page:
Contact Page
This is an essential page for your website which allows your visitor’s to reach out and communicate with you. This should only be used for general inquiries and not for booking, scheduling or giving quotes. Use a unique form for those which can be tracked for views, submissions and conversion rates.
At the minimum, this page should include your public address, phone, links to social media profiles, contact form and a Google map (or equivalent) for directions (If you are a brick-n-mortar business).
Blog Page
A blog is a space on the internet where people share their experiences, ideas or thoughts in a friendly and informal way, often updated regularly with new posts listed first.
There are two different ways to utilize a blog:
A website as a blog – the entire site is focused on blogging, with all its pages dedicated to posts and articles. It’s like a cozy online journal where everything revolves around sharing ideas.
Having a blog as part of a website – the blog is just one section of a larger site, which might also include things like product pages, services, or an about section. This way, visitors can enjoy blog posts while also exploring other features of the website!
404 Page
We’ve all seen the message “Page Not Found” when we land on a page that is no longer available. The purpose of this page is to inform the visitor and guide them back to useful information.
To make this a better experience for your users, you can 1) provide a friendly message, 2) offer links to popular pages, 3) add a creative touch, and 4) encourage feedback. These will keep visitor’s on your site to explore further.
Here are a couple of 404 pages from GitHub and AirBnB that meet the criteria:
Technical Parts of a Website
Domain Name
A domain name is the unique web address that people type into their browsers to find a specific website, like patrickwhitson.net. Similar to your home address, it makes it simpler to remember when typing into the browser address bar instead of an I.P. address, e.g. 77.102.10.243.
I recommend getting a domain name from namecheap.com. This is the registrar that I’ve personally have been using for many years.
Hosting
Hosting is the service that provides the storage space and technology needed to make a website accessible on the internet, allowing it to be viewed by visitors.
A couple of good shared hosting providers I use or have used, are Scala Hosting and A2 Hosting. If you’d like more information on choosing a good host, check out WP Johnny’s article here.
SSL Certificate
This stands for secure socket layer. An SSL certificate encrypts data exchanged between a website and its visitors, keeping sensitive information safe from hackers. It also builds trust by showing users that your site is secure, often indicated by a padlock icon in the browser’s address bar.
CDN
A Content Delivery Network is a group of servers that deliver web content to users based on their geographic location. Using a CDN speeds up website loading times and improves performance by reducing the distance data has to travel, leading to a better user experience and increased reliability.
Email Hosting
This is a service that allows you to create and manage email addresses. For example, [email protected]. Most shared hosting providers include this with their service and makes it more convenient and easy.
I recommend using a third-party provider such as Google Worksapce, Rackspace or Zoho Mail.
Email Delivery
This is a service that delivers your emails with ease, and lightning fast. It will send your transactional (password reset, notifications) or marketing (newsletter, sales campaigns) emails reliably to your visitor’s and customers.
Some top providers are Postmark, Sendgrid and Mailgun.
HTML
Back in the early 90’s, a man by the name of Tim Berners-Lee invented a mark-up language called HTML or hyper-text markup language. It’s the standard by which web pages are created in order for you and I to view them.
CSS
This stylesheet language controls the look and feel of your website using styling elements for fonts, colors, spacing and layouts. It is a file that is linked in the HTML of the page to allow consistent styling across the website.
JavaScript
The programming language called JavaScript adds dynamic and interactive functionality to a website which can include animations, form validations, and responsive content. It’s not a required part of a website, but it used in many ways to improve the web experience of users.
SEO
Search engine optimization is a process to improve a website to get free trafic in order to rank high on search engines like Google, Bing and Yahoo.
This is accomplished by finding keyword topics, writing high quality, relevant and shareable content that compels people to visit your site and tell others about it.
Analytics
This is a piece of code that is embedded in the HTML of your website that gives you statistics in relation to number of visitors, what they viewed, how long were they visiting, where they entered and exited your site, and much more.
There are many free analytic services, but I recommend you use one that focuses on your data’s privacy. Fathom Analytics is the one I use.
Sitemap
A sitemap is a file that lists all the pages on your website, helping search engines like Google understand its structure and find all the content.
Having a sitemap can help your website by improving its visibility in search results and ensuring that search engines can easily crawl and index your pages, which can lead to better rankings and more visitors!
Anatomy of a Website: Conclusion
I hope this has educated you on the parts of a website and what is involved in designing one with more confidence.
Over time, I’ll be adding and updating to this. If there is something you think I missed, please inform me by leaving a comment below.
If you were helped by this article, please share it with others who can benefit by it. Thank you!
* This article contains affiliate links, so I may earn a small commission when you make a purchase through links on my site at no additional cost to you.
