agentawesome logoreversed bw

The Breakdown of a Website Sections & Names

the breakdown of a website's 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.

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 a 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 the <head> Section?

The <head> section of a website is where all of your metadata (meta titles, descriptions, authors, charsets, etc.), scripts (CSS, JavaScript, etc.), Schema, links to custom favicons, tracking codes, and more can be found. This part of a website is not displayed in the browser window. Think of this section as the place where all of your resources can be found and used to make up the styling and functionality of your webpage.

What is the <body> Section?

The HTML <body> tag defines the main content of a webpage that will be directly visible to the user. This is where all of the visual/content elements of your website will be contained to display that information to your visitors. Images, text, hyperlinks, and more can be found within this section.

What are Rows and Columns?

Websites are laid out using grids and the rows and columns that make up this grid are contained within the <body> of a webpage. CSS is used to style and layout the grids.

We create rows for individual portions of the webpage to lay out content within them. We use columns to set how much of a webpage will be taken up by the row horizontally. Typically, most websites use a 12-column system, so if a row takes up 12-columns, it will be the full width of the webpage, if it takes up 6-columns, it will take up 50% of the webpage. In the example below, the image takes up 12-columns so it takes up the full width on the page.

row example 1 2
row example 1 2

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 a 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

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 leave a comment below!

Share:

Facebook
Twitter
Pinterest
LinkedIn

Table of Contents

Related Posts