When you’re talking with your web developer – have you ever felt like you are in the dark with everything they are saying? With so many different terms and vocabulary surrounding the web industry… it can be difficult to decipher!

We are always thinking about our clients! How we can make their lives easier when they are going down the digital path to success? This is a question that’s always on our minds.

That’s why we came up with this list of common types of pages, sections, and elements within a website to help wrap your head around the typical website structure, and understand exactly what you’re dealing with.

What Are The Different Pages In A Website?

Essentially, there are the 3 different types of pages people use to create a website. These pages are: Homepages, Landing Pages, and Interior Pages.

What Are Homepages?

Your homepage is where 90% of your visitors will end up when they first reach your website. It is responsible for giving a good first impression of your business.

A good homepage should properly demonstrate what services/products you have to offer, and where people should go next once they have decided you are the right choice for them.

Your homepage is the face of your website. It should do its job well, and cater to the interests of your visitors. A good homepage offers an exceptional user experience that will leave the visitor satisfied. Take a look at our example from the Waalflower, a restaurant website we recently designed for one of our clients.

This homepage leaves a nice first impression on the visitor (just look at that dish!). It offers them a way to book a table right away, and see the full menu of the restaurant.

homepage website elements

What Are Landing Pages?

Landing pages are used to capture leads, generate sales, and engage with visitors before they have entered the website. They will typically prompt you to sign up for a service, buy a product, or check out a new promotion.

Landing pages are extremely effective when used properly. Most marketers use landing pages as the beginning step of their sales funnel (a series of pages that ends with a goal being completed – like a sale). They have a very focused purpose so don’t try and overload your landing pages with tons of information.

Create specific call to actions for your visitors – keep it simple but elegant!

Here’s an example of a landing page created with LeadPages to capture newsletter signups for the Go Top Shelf blog.

This landing page gets the point across quickly in a nice, big bold font with a quick quip about what subscribers will receive each month. Our call to action button takes care of the rest!

Landing page website elements examples

What Are Interior Pages?

Every page you create other than your homepage or landing pages are termed as “interior pages”. These pages can be found in the navigation menus and typically consist of services, about, contact, and blog pages.

Take a look at our simple example of an interior page taken from the Go Top Shelf blog.

Example of interior page website elements

What Are The Different Sections Of A Website?

Unlike page types, there are six main sections within a basic website – The Header, The Page Header, Hero Section, Content Section, Sidebar Section, & Footer Section.

We will go over these different sections in more detail in the content below.

What Is A Header?

The header is responsible for showing visitors the website’s company logo, the primary & secondary navigation menus, and contact information. The header is normally at the very top of the page.

The menu highlighted in red in the picture below is an example of a header done correctly.

Website header example

What Is A Hero Section?

A hero section is like the page header but is strictly for homepages ONLY. Hero sections are used to help convey your products and services to your visitors on your homepage. You can use different elements such as sliders to help give your visitor as much information as possible while capturing the lead with a classy call to action.

We used a tiled layout for Coffee Concept’s hero section that highlights the information about their coffee, and how it is sourced. All backed up by beautiful imagery and typographic (type/font) elements.

Hero section website example

What Is A Page Header?

A page header is the section below the main header. It isn’t necessary for every page, and it typically states the page title to the visitor. They sometimes have breadcrumb links for navigation, and some nice imagery.

On Coffee Concept’s site we used a simple image of a latte backed up by their title “Restaurants, Cafes, & Food Services” to personalize this page header a bit more.

Page header section example

What Is A Content Section?

Your content section is where all of your page information goes. This is where the bulk of your titles, paragraphs, images, and forms will go in your website. The content section is known as the biggest part of the page.

Website content section example

What Is A Sidebar Section?

Sidebar sections are responsible for showing visitors additional navigation, and filtering options depending on what the site requires. Some sites may utilize a sidebar to help visitors get around the website, while others may use them to filter through products in an ecommerce site to find what they’re looking for.

Website sidebar example

The footer is at the very bottom of your website and normally should include your contact information, logo, and some navigation. You should also include links to any important legal information you need to include with your website like a privacy policy or terms & conditions.

Website footer example

What Are The Different Elements Of A Website?

Pages make up a website, and sections make up a page. We will now talk about the different elements in a website that help bring your sections together. We will go over the following elements: Primary Navigation Menus, Call To Actions, Secondary Navigation Menus, Sign-up, and Contact Forms.

What Is A Primary Navigation Menu?

Primary navigation menus are used to help users traverse through your website. They should include a list of 3-7 top level links to other pages on your website. Any other links should be put within the sub-nav.

Primary menu navigation example

What Is A Secondary Navigation Menu?

Secondary navigation menus are used to highlight links to specialty pages such as services pages, login/signup pages, career pages, and charity pages. Great for highlighting important pages that may not fit into the primary navigation bar.

Secondary navigation element example

What Is A Sign-Up / Contact Form?

These types of forms are used to collect visitors’ information so they can sign-up for a newsletter or make an account on your website. Forms like this are a great way to lower the barrier for entry, sign up more members, and get more leads!

Sign-up / Contact form example

What Is A Sitemap?

A sitemap is a list of pages dictating the hierarchy of your website. They will identify relationships between parent and child pages, and allow Google’s, and other search engine bots to crawl your website faster (which means you get indexed faster).

Sitemaps are very important if you ever want to get your site listed on Google or Bing!. There are many different sitemap generators out there that you can use to get a sitemap right away! So make sure to setup the sitemap for your website ASAP.

XML sitemaps website example

The Breakdown Conclusion

There are TONS of different terms and vocabulary surrounding the web design/development industry. It can be troublesome to try and remember them all… however, when it comes down to it, the basic terms we just went over are part of the foundation for any great website.

In this article, we covered the basic terms and vocabulary you need to know about website design and development. We also covered what each of these elements can do for your site, and how to best utilize them.

Whether you are just getting started or have a bit of experience – everyone has something to learn from this article.

If you think we missed anything important – please feel free to leave a comment below!

Need a website of your own? Go Top Shelf is a premium web design, development, and marketing company that can bring your site to the top of your industry! Simply shoot us an email through our contact form, or give us a call for more information.

Related Posts

Calgary Web design company
29 Affordable Apps to Perfectly Manage Your Web Design Company
September 25, 2019 Reading time - 13 minutes
Calgary Web design company
Why Are Websites Focusing On Mobile First?
August 20, 2019 Reading time - 7 minutes
improving user experience
5 Incredible WordPress Hacks For Improving User Experience 
August 14, 2019 Reading time - 5 minutes
Calgary Web design company
6 Tactics to Consider in Creating Meaningful Micro-interactions
May 9, 2019 Reading time - 7 minutes
Calgary Web design company
Social Media Website Evolution
April 9, 2019 Reading time - 7 minutes
Calgary Web design company
Compelling Call To Action Stats To Raise CTR
March 6, 2019 Reading time - 7 minutes

Recommended Reading

how your product data impacts your ecommerce sites seo 2
How Your Product Data Impacts Your E-Commerce Site’s SEO
April 30, 2021 6 minutes
With today’s competition online being fiercer than ever, e-commerce brands have a lot to optimize if they want to stay in the game. Consumer expectations have evolved and now require more touchpoints, more personalizations, better information, and a multichannel buyer journey, all […]
seo guide 2021 page experience update
SEO Guide for the New Page Experience Update and Beyond
April 23, 2021 22 minutes
It’s no secret that the upcoming Page Experience Google algorithm update that is set to be released in May is going to impact websites across the globe both positively and negatively.  This is one of the largest updates that Google has put […]
multi pronged approach to digital marketing
Your Multi-Pronged Approach to Digital Marketing: What to Include in Your Strategy
April 12, 2021 4 minutes
But you’ll be doing yourself a disservice if you assume that focusing on one lead generation channel is enough. When making any kind of financial investment, the traditional wisdom is to diversify. You’ll want to take that same sort of approach when […]