• Hela Maria Jaffar

Anatomy of Your Website: Terminology Guide

Updated: Oct 12, 2021

Part I

Website terminology every business owner and entrepreneur should know.

Understanding the process of designing your website starts by knowing some of the foundational terms that make up a website. Whether you have a website already or not, I created this simple guide for two main reasons: 1) so that you can enter your next conversation with a website designer with confidence and 2) because understanding website terminology will help you make strategic decisions about the layout and design of a website that represents your business, so you end up with a product you’re proud of and love.

Read on for definitions of the basic elements of a website - plus some juice tips on how to make the most of them along the way!

Home Page - the main page of a website. It's the place where your visitor gets a sense of who you are as a business, it’s the starting point of their experience.

Tip: The goal of your home page should be to awaken your visitor’s curiosity to explore your website. It needs to be engaging, with brand messaging on point and that resonates with your visitors’ needs. Clear communication can ensure a higher click-through rate on your site and a higher probability that visitors will convert.

Hero Image - (or hero spot) is the first image visitors see on your page.

Header - the top section of your website before the main content, which remains the same as when you visit other pages. It usually includes your logo and navigation menu. In the case of an e-commerce site, a search bar also lives here.

Navigation Menu - usually appears on the header with the major pages of your site listed such as About, Services, Contact, etc. If your website has many different sections, these title links can include a dropdown menu with subcategories that become visible when hovering over them or when clicked.

Tip: Think of the navigation menu as a road map to direct visitors to various pages on your site. The key is to prioritize and be strategic about the page titles you include here for a cleaner and friendlier user experience that intuitively guides visitors to what is most important for them to know about your business.

Search Bar - a functionality for searching an item or keyword that takes visitors to a results page with all the possible pages that have related content. It’s useful in the case that you have a lot of products as it avoids browsing through your entire navigation, saving visitors time and improving their user experience on your site.

Dropdown Menu - when you hover over or click a primary page title on the navigation bar, a menu “drops down” to reveal other pages under that item. It takes your visitor deeper into your site content. Think of it as the child pages that stem from the main parent page.

Body - the page content following the header is the body of a website. It’s usually the largest section that communicates all your information along with visuals such as images and videos. At WaaS we like to follow the principle of Mobile First, which means that we design a website in a way that prioritizes the most important information for a fluid experience.

Tip: Think about the purpose of each page’s body and what your main message is in order to keep the copy clear and cohesive, rather than chunky text that makes it difficult to understand what you’re trying to sell.

Contact Page - the name says it all. Key information about your business is found here, such as where you’re located, a phone number and an email address. A ‘Contact Form’ can also be included so visitors who want to reach out about your products or services can easily do so, more on Forms below.

Link - can be in the form of words or buttons and even images that are hyperlinked and take the visitor to another section of the website or another site. Text links are usually in a different colour to stand out and let the visitor know they can click on them.

Tip: All links, regardless of how they are visually represented, should have some sort of hover state to clearly indicate their clickability.

Social Link - clickable social media icons commonly found in the Footer of a website, however, you can have them anywhere on your site. These links are useful to show your visitors content presence for your business and can increase your brand reach and awareness.

Tip: Clicking on these will take a visitor to that icon’s social media site. Be wise about where you place them if your goal is to keep your customer on your site.

Forms - there’s a variety of these including Contact forms, Sign-up forms, Application forms, Shipping Information forms etc. to get information from your visitors, say from an order they’re making or as mentioned above, a contact form can be used by them to request further information from you.

CTA - a Call to Action is an element that can be obvious, such as a button, or more subtle, like text that is hyperlinked, either way CTAs serve one purpose: to get your visitor to perform an action.

Tip: Too many CTAs can confuse or overwhelm your site visitors. Think of what the most important action you want them to perform is on each page.

Breadcrumb - remember that trail of crumbs Hansel and Gretel left as they walked through the forest so they could find their way back? Similarly, in a website, a breadcrumb is an information trail, usually at the top of the page, that communicates to the visitor where they're at in relation to the entire site. It’s a way for users to find their way around easily so they know exactly where they’re at, how they got there and can trace the path back to their original starting point. For example, Home > About > Our Mission.

Tip: While it’s not a must, it shouldn't replace effective primary navigation menus. If your website has a lot of child and grandchild pages it would be quite useful as it also helps organize large amounts of content in a hierarchical manner.

Sidebar - a column usually displayed on the left side of a webpage to display supplementary information such as navigational links and/or key information to guide visitors to other pages. Wikipedia is an excellent example of a webpage that uses a sidebar, which serves as another navigational menu.

Tip: While any website could have a sidebar, we recommend that you only use one in either of two situations (since they can distract attention from your main CTA and navigation): if you have a content-heavy website such as an online magazine or if you have an online store because the more content or products you have the more pages it’s going to need, so the more difficult the site becomes to navigate.

Footer - the bottom section of your web page containing a nice round-up of your site’s sections such as the links to most important pages as well as links to all other pages, and includes the copyright and date stamp. You usually find a photo gallery in this section as well as social media links.

Landing Page - a standalone web page, not to be confused with a Home Page. A landing page is a strategic page where a visitor lands after they've clicked on a targeted ad or social media campaign. Landing pages contain two main elements: the offer you’re making and a form that allows you to capture a visitor's information in exchange for that offer.

Tip: Landing Pages make excellent marketing or advertising campaigns for a specific offer or sale you want to make and can be used for converting visitors into leads.

Hover state - when referring to links and buttons, a hover state, or rollover, is the animation you see when you move your cursor over them. For example, a button may change colour or size. Having hover states is a visual indication that that particular element can be clicked. When used strategically, it can lead your visitor through a smooth navigation experience of your website.

Selected state - communicates to the visitor their selected choice, like what link or button they’ve selected. If they’ve selected the Blog Page, for example, that text may be bold, underlined or a different colour.

Lightbox - a type of pop-up that appears over a webpage. In doing so, a lightbox blocks part of the web page from view and can also dim, blur or grey out the background. While the lightbox is active on the screen, visitors cannot interact with the rest of the webpage making the lightbox the point of focus. Visitors can click a button or fill out a form in it or simply exit out of it. The main difference with a pop-up is that with a lightbox visitors can click anywhere outside of it to close it.

Tip: Lightboxes can be effective marketing tools within your website, such as to increase subscribers or capture sales leads. However, you do not want to irritate your visitors by having too many. Ensure a lightbox’s effectiveness by providing a discount, a downloadable or valuable piece of information​ like a product announcement. For more on pop-ups see Website Pop-ups: Dos & Don’ts

Opt-in - a term used in email marketing that asks website visitors whether they'd like to be involved in something such as an email list or be notified about an event through a sign-up form. That is, they specifically choose to do so by agreeing to subscribe to marketing communications and giving permission to the marketer to send these such as emails and promotions.

So, this was just an introduction to the basic elements you see on a website. There are many more that I’ll be writing about soon enough. To keep up with our new blog posts and content, join us on Instagram and if there’s anything you’d like to see here or know more about, let us know! We’re here for you.


Want a beautiful, functional website you can be proud of and that attracts customers around the clock? A professional website that represents your business is an easy way to gain credibility, reach more customers, improve customer service and stand out online - contact us here or send us a DM to talk about how we can help you create the website of your dreams.