Parts Of A Website: A Cheat Sheet For Non-Techies

Confused by website terminology?

If so, here’s a handy glossary (all in plain English) that’ll quickly get you up to speed and demystify the language of web technology.

Once you understand basic website jargon, you’ll never get intimidated or befuddled the next time a web designer or web developer spews techno-babble.

Basic Anatomy Of A Website

Let’s start by defining the various parts of a website:

Header

This is the top part of a website containing the logo and usually (but not always) the site’s navigation menu. The header is the zone at the top of the page that stays constant and visible as visitors click around your site.

Once upon a time the header was a place to display a banner or graphic promoting your brand — kind of like the cover photo on a Facebook page. But today’s websites are more streamlined and the trend is to just include your logo and navigation in the header.

Navigation (aka Navigation Bar or Main Menu)

These are the links at the top of the page to help you find what you’re looking for. The navigation links are usually in the header or just below it.

When a site is viewed on a mobile device, the navigation usually morphs into an icon with 3 stacked lines (aka a “hamburger” because it looks like the side view of a hamburger) since space is limited on a mobile device. Tapping the mobile navigation icon usually triggers a vertical or horizontal toggle menu.

On complex sites with tons of pages, you’ll sometimes see a “mega menu” which is a drop-down menu triggered by hovering over a link in the main navigation. The drop-down mega menu then shows you many links organized into categories and sub-categories, kind of like a sitemap.

Hero Image (aka Feature Image aka Headline Image)

This is the large image you see at the top of a web page that grabs your attention and sets the tone for the rest of the page. Feature images typically span the full width of the page and often contain headlines or calls to action.

I’m not exactly sure where the term “hero image” originated, but it’s used frequently. Maybe because they want you to feel their website is going to solve all your problems and save the day. 🙂

Slider

A slider is used to display pictures … like a slideshow … where the images slide from right to left or vice-versa. Sliders can appear anywhere on a website, but they’re commonly used on homepages in place of (or in addition to) a feature image.

As websites evolve and more emphasis is placed on page load speed as well as optimizing user experiences on mobile devices, slider use is diminishing because they’re resource hogs and are often little more than eye-candy.

Website Content

Website content is the information your visitors consume. Web copy or body copy refers to written text. Website content refers to all the elements used to communicate your message — text, images, video, audio, the whole shebang.

Sidebar

A sidebar is the narrow vertical column right next to your website content. The sidebar often contains advertisements, links to other content, calls to action or a search box. Think of the sidebar as secondary to your primary website content.

In the past few years, there’s been a trend in website design to eliminate the sidebar altogether and just go with a single, full-width column to display your content. For some sites, eliminating the sidebar makes sense, for others it does not. It really comes down to personal preference and/or which layout (sidebar vs. no sidebar) provides a better user experience or higher conversion rate.

Footer

A footer performs the same function as the header — it’s a region on a website that’s constant from page to page — except a footer is at the bottom of a page instead of the top.

You can put whatever you want in a footer. But what’s often in the footer is contact info, privacy policy, terms of use, sitemap, social media icons and links to other important pages on your site.

Landing Page

When you run ads on Google or Facebook (or anywhere) you have to provide a destination page for the person to land on when they click the ad — hence, the name landing page.

Landing pages are a little different than other pages on a website in that any distractions, such as a header or footer or sidebar, are removed or minimized.

The primary goal of a landing page is getting the visitor to take an action (i.e. download a report, sign up for an email list, make a purchase, etc) and maximize conversions. You want the content on a landing page to be as laser-focused as possible.

Home Page (or Homepage)

Also known as the front page or main page. This is the starting point on most websites. A website design best practice is to link your logo to your home page, giving your visitors an “escape” or “reset” if they ever get lost on your site.

Blog

A blog is actually a type of website.

So what’s the difference between a blog and a website? Not much. It basically boils down to how the content is structured and presented.

• When you publish something on a blog it’s called a post and blog posts are published in chronological order like journal entries in a diary. The origin of the word “blog” is a contraction of web log.
• When you publish something on a website it’s called a page and web pages are not presented sequentially. They’re just a collection pages (i.e. homepage, about us page, contact page, etc) that are linked together.
• Blog posts allow for interactivity with readers via comments. Standard web pages don’t have a commenting section.
• Web pages are usually informational in nature about a company’s products or services. They tend to use a bit more formal and official sounding language. Blog posts have a more casual and conversational tone.

A blog can be a standalone website or it can be a section of a larger website.

What you are reading right now is a blog post on a blog which is part of a larger website.

Call To Action (aka CTA)

Buttons, popups, ribbons, slide-ins, email optin boxes … even a simple text link … are all examples of calls to action. A call to action is a specific and direct request asking your visitor to do something.

A call to action doesn’t need to be aggressive or obnoxious. A simple “click here” often works just fine.

If you want readers to take action, you need to gently nudge them along.

Card Design (aka Tile Design or Grid-Based Design)

Inspired by sites like Pinterest, card design helps you organize (and sort) content visually by chunking your data into a grid. Card design is visually appealing, easy to read and mobile-friendly.

You can use card design for lots of things such as image galleries, blog pages or showcasing features/benefits on a sales page. The sky’s the limit. All you need is a little creativity.

Additional Terminology Of Modern Websites

WordPress

WordPress powers millions of websites worldwide.

Think of WordPress as the operating system of your website … kind of like the operating system of a laptop is Windows, for a MacBook Pro it’s macOS and for an iPhone it’s iOS.

WordPress is a content management system (CMS) which allows you to add, remove or update content on your website without high level technical training.

A WordPress theme makes WordPress look like a website. There are thousands of themes available — some free, some paid. Most WordPress themes require some customization to get them to match your company’s brand. But using a theme is WAY better than starting from scratch like we had to do in the olden days (early to mid 2000s). WordPress themes are one of the main reasons you can build a custom, high-quality website for a fraction of what websites used to cost.

A WordPress plugin gives your site functionality. Plugins are like apps on your phone and there are tens of thousands of WordPress plugins to choose from. There are plugins for contact forms, image galleries, site security, online shopping carts — pretty much anything you can think of.

WordPress Page vs. WordPress Post

This takes a bit of explaining, so I wrote a whole article on this topic which you can find here.

Hosting

To have a website the internet, it needs to be hosted on a web server. Kind of like if you want to build a house, you need a piece of land to build your house on. Examples of website hosting providers are HostGator and WP Engine.

Domain Name (aka URL)

Amazon.com, CNN.com and markbrinker.com are all examples of domain names. Behind the scenes, every website is identified by an IP address which is a long string of numbers like 143.398.884.342. But who can remember all those digits? Therefore, a domain name is linked to each IP address because it’s easier to use words instead of numbers to identify a website.

Fun fact: URL is an acronym for Uniform Resource Locator.

Domain Registrar

Just like you get the license plate for your car from the Department of Motor Vehicles, you get your domain name from a domain registrar. There are numerous domain registrars online. We use NameCheap.com.

DNS

DNS is an acronym for domain name server. They’re the phone book of the internet.

As mentioned above, human beings use domain names to describe websites rather than using IP addresses. When you type a domain name into a web browser, your internet service provider accesses one of many domain name servers located around the world to quickly lookup the corresponding IP address associated with the domain name, then routes you to the website you requested.

HTML

HTML is an acronym for hypertext markup language, and it’s the standard language for creating websites and web pages. It was invented by Tim Berners-Lee (known as the inventor of the world wide web) in 1991.

CSS

CSS is an acronym for cascading style sheets. HTML is used to create web pages, CSS makes them look pretty. CSS also controls how a website looks on a desktop vs. a tablet vs. a phone.

Website Builder (aka Website Page Builder)

Up until a few years ago, you had to know HTML and CSS to create a nice-looking website. But now, with a drag-and-drop website builder you can build a website with minimal technical knowledge.

Website builders allow you to create web pages much quicker than via manual coding and the finished product usually looks better as well. Our favorite website builder is Thrive Architect.

NOTE: Although a good website builder is a great tool, it’s not a panacea. You *are* going to need a basic understanding of HTML and CSS to fine tune things on your site. Sorry to rain on the parade. 😮

Mobile Responsive

If a website is mobile responsive, it uses CSS to respond to the size of the viewing screen so readers have a pleasant user experience on their mobile device. That means font sizes are bigger plus the page layout and navigation are transformed so they’re usable on a mobile device.

If you have to pinch and zoom to make anything readable, that is by definition not mobile friendly.

Google agrees with me.

SSL

SSL stands for secure socket layer. An SSL certificate encrypts data sent from a web server to your browser so hackers can’t read it.

If you see a little padlock in the address bar of your web browser, that means you’re visiting a secure website.

A non-secure website has a URL that begins with “http” in the address bar, whereas a secure website begins with “https” — with the “s” standing for “secure”.

http => hyper text transfer protocol

https => hyper text transfer protocol secure

SEO

SEO stands for search engine optimization. SEO is a large and complex topic, but in a nutshell it’s about configuring your website to get free traffic from search engine results pages (SERPs).

Based on my conversations with clients and prospective clients, there is massive confusion about what SEO is and how it works — not to mention wildly unrealistic expectations.

In order to get ranked in the organic search engine listings, you need to produce content that:

• Is super high quality.
• People actually want.
• People share or link to.
• Is properly formatted on your website (aka On-Page SEO).

For more info on SEO and what it takes to get free traffic from search engines, I highly recommend you check out the work of Brian Dean.

Google Analytics

Google Analytics is a free service from Google that gives you statistics about your website — how many visitors your site is getting, which pages they’re viewing, how long they’re spending on each page, etc.

To use Google Analytics, all you do is install a small tracking script on your website and you’re good to go.

Google Analytics removes the guesswork by giving you data on what’s working on your website and what isn’t.

Email Service Provider (ESP)

An email service provider (aka EMS: email management service) helps you build, manage and communicate with your list of email subscribers.

A few examples of popular email service providers include MailChimp, Aweber (we use Aweber), Constant Contact, ConvertKit, GetResponse and ActiveCampaign.

There are several reasons for using an email service provider:

• Automation. Users are able to add or remove themselves from your list automatically. You can also send emails automatically based on a user’s actions.
• Scalability. You can send a broadcast message to hundreds or thousands of your subscribers with the click of a mouse. It’s next to impossible to do this manually.
• Deliverability. Most email service providers are whitelisted so your emails don’t get flagged as spam. If you tried to send more than a few dozen emails in rapid fire succession using Outlook or Gmail, it would most likely trigger a spam filter with your ISP and your emails wouldn’t get sent.
• Compliance. Stay compliant with the CAN-SPAM Act and avoid penalties.
• Reporting & Tracking. Find out what percentage of people opened your email, how many people clicked on a link in your email, which email subject line performed the best, etc.

Conclusion

Hopefully you found this mini crash course on website terminology helpful.

You don’t need to understand the underlying technology to talk intelligently with a web designer or developer. You just need to have a basic grasp of the language of web technology and you’ll be fine.

I’ll be adding to this handy dandy website glossary over time. If there’s a term I overlooked that needs to be added, please let me know in the comments below. Thanks. 😉