The Breakdown of a Website Page Structure

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 Top Shelf Media 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 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

What Is A Footer Section?

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? Top Shelf Media 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.

Liam Abbott

AvatarLiam is a SEO/SEM Specialist & Web Designer from Calgary, Alberta. He maintains a passion for contemporary design and everything search engine related. He is an avid gamer, and enjoys collecting entertainment memorabilia.

If you have questions or inquires for Liam, feel free to contact him by email anytime liam@topshelfmedia.ca

Leave a Reply

Your email address will not be published. Required fields are marked *