The most important parts of a website – 8 essential web design terms

Website elements – understanding web design jargon

Web page section names can be confusing.

Header, banner, hero section… they mean different things to different people. You can drastically improve communications by understanding that not every website section is a banner and knowing the subtle differences between sliders and tickers.

Let’s unwrap these intricacies and settle them once and for all.

1. Navigation bar, navbar, menu, navigation, header…

We all know what they are, and the nomenclature is fairly intuitive. There’s only one way to complicate things here, which is not being precise.

You see, out of context the word “navigation” refers to the entirety of navigation. This includes the navigation bar (or navbar, menu, header), the footer at the bottom of the page and other navigation elements, such as breadcrumbs (those little trails of categories and sub-categories often found on ecommerce websites), side bars, and a few more.

When you mean to address the actual menu at the top, refer to it as the menu (or navigation bar/navbar). Just saying “navigation” is often very unclear.

2. Buttons, text links, URLs, hyperlinks…

Hyperlinks are a powerful tool for internal linking. They help you build the right website structure for the users and search engines.

Miscommunication about using a link vs. a button can cause usability and user experience problems.

Robots and assistive technology interpret them differently. It’s also likely that in your administration panel, managing a link has slightly different options compared to a button. That’s why it’s useful to clearly communicate when one thing needs to be a button, while the other needs to be a regular text hyperlink.

There’s just one caveat here. In the hierarchy of your buttons, you’ll often have primary ones (the main calls to action, usually limited to one per page), secondary buttons and tertiary buttons.

Tertiary buttons can often look similar to text links but they’re not the same! Keep that in mind when calling something “a link”. While it’s technically correct that it links somewhere, the fact that it’s a tertiary button can be very important.

3. Banner, hero section…

Or simply, “the thing at the top of any page.”

This is my favourite area of confusion in website terminology.

Yes, these three words describe the same thing when talking about the front end of your website. And there are probably even more. We prefer calling it the Hero section, but it’s good to be aware of the ambiguous naming.

People on your internal team and agencies that you work with might call it something else, and it will help you all be on the same page.

If you’re in the camp that prefers the word “banner”, please limit the usage of the word to just that section. We often feel like “banner” is a filler word for when you don’t know what to say. If that’s the case, and if it’s not an actual hero section, just please call it “section” – or try describing it and asking how to call it. There’s no shame in that!

A Hero section is the first thing your visitors see on a page without having to scroll. It’s called a “hero” section because the goal is to help people put themselves in your story, i.e. by showing how you solve their problems from the get-go.

A hero section is not a “header”

As explained before, the header is reserved for the bar that goes across the top of your page – your navigation bar. Therefore, it should not be used as a synonym for a hero section.

4. Accordion, Collapsible section, Expandable section

Accordions are a group of headings with an indicator that they expand – usually a down-facing arrow or a plus sign. They expand on click, showing additional content.

It’s not always obvious what to call them, and the above names should be easily understandable by everyone.

5. Popup, modal

We tend to hate when something disrupts our experience by… popping up suddenly, but sometimes popups server their purpose.

The only thing I want to highlight here is that modal is another common name for popups, especially in the more technical circles.

6. Carousel, slider, ticker…

One of these things is not like the other. Well, sort of.

They all animate and scroll, but the ticker is the only one that always lacks controls. It’s just like the news ticker on the TV – it slides on its own, and once it’s gone you have to wait for the beginning again if you’ve missed anything.

On the other hand, carousels and sliders usually have assisting navigation so that people can change the sliders on their own. They can automatically animate as well, but you always have the option to take charge.

Sidenote: slider can also refer to a user input interface element which allows you to choose a value from a certain range. The meaning of the word should be obvious in context, but it’s worth noting.

Other parts of a website

Here are a few other website parts with their synonyms:

• label – also a tag or a chip
• quote – often referred to as pull quote or block quote (i.e. in default WordPress components)
• loading indicator – spinner