Anatomy of a Web Page: Website Terms You Need to Know

Website Design

May 23

Written By Marni Cleiman

Website terms can be so confusing.

For example, what’s the difference between a header and a heading? How about a carousel and a slideshow?

See what I mean?

So I’m here to clear some things up and give you a little glossary of webpage terms you might need when designing or working on your website.

Header

The header is the top section of a web page. It usually contains your main navigation and logo, but can also have a call to action button, a tag line, social links, a search bar, contact info or a language switcher for multilingual websites.

The header is an important part of your website as it will be seen on most if not all of the pages in your website.

Navigation

Navigation or menu is a set of links used to get around your website. Your main navigation is usually in your site header or a sidebar. Other sets of navigation (secondary menus) can sometimes be found in a sidebar or the footer.

Some menus will contain dropdown features to show more options. There are also mega menus and two layer navigation menus.

Main navigation is usually hidden on mobile devices. It appears when you click the hamburger button (3 horizontal lines). Other mobile menu options can be a plus sign or a meatball menu (3 dots).

Hero Section

The hero section is the area located right below the header. It’s the first real content that your visitor will see on the page, so it needs to grab your their attention and give them some idea of why they should continue on your website.

Hero sections usually contain the main heading or H1 (more on that below). They might also have images (hero image), video or sliders or a call to action button.

Headings

Headings (yes, they are different from the header!) are the titles and subtitles you use to separate and label content on your page. They are a very important part of your page, helping your visitors to scan your content to easily find the information they need, and helping search engines to understand what your page is about.

There are six levels of headings available (H1-H6), with heading 1 being your main heading. Headings 2-6 are your subheadings. Only Headings 1-4 are available in Squarespace 7.1 (1-3 for version 7.0), but you can add other headings through code.

Call to Action

A Call to Action or CTA is a link, button or other website item (like a form or pop-up) that encourages your visitors to take an action. It might be a button that asks you to “Sign Up” to a newsletter or “Learn More” about a product. CTAs help guide your website visitors to take the next step.

Fold

Above the fold in web design means is the area of the screen that’s visible before the visitor starts scrolling. So, the fold is the bottom of your screen where the rest of the page is cut off. The “above the fold” contents are important as they are the first impression that your visitor has of your site.

The fold will be in a different place on each device (phone, tablet, laptop).

The term “above the fold” comes from newspapers. The papers were folded in half on the newsstand, so only the top half could be seen before purchase.

Hyperlink

A hyperlink (or link) allows a visitor to jump to other content. That content can be on the same page, another page on the website or a page on another website. It can even be a file or email address.

The link, which can be in the form of a button, text link or image contains an address to the new content.

Hover State

A Hover State is that little animation you see when you roll your mouse over a link. It’s there to help you know that the link is there and that line of text isn’t just underlined. It’s often simply just a change of colour.

Gallery

Galleries show a set of images. In Squarespace 7.1 you have the option of gallery sections or gallery blocks. Within these you have the options of grid, slideshow or carousel galleries.

Slideshow vs. Carousel

Slideshows show one image at a time and then move into the next image. This can happen automatically or using arrows.

Carousels are very similar, but they show a little preview of the other images in the collection.

Breadcrumbs

Just like Hansel and Gretel leaving breadcrumbs to find their way back home, website breadcrumbs show you the path and give you links to each step. It’s usually used in pages like blog posts or products where you might have categories.

So you would see something like: Blog > Category > Post.

Footer

Like your header, the footer can be found on most, if not all of the pages of your website. Only this time it’s found at the very bottom of the page instead of the top.

This section usually has contact information, important links and social media links. It can also have sign up forms and links to pages that aren’t found in the main navigation.

Want to see more website terms?

Check out these blogs:

Web Design Glossary for Non-Designers

What Is SEO Anyways: And 10 More Important SEO Terms Explained

Website Terms

Marni Cleiman

Marni is a Canadian web designer based in Burlington, Ontario (Greater Toronto Area). She specializes in creating Squarespace websites for serviced based small businesses & creative entrepreneurs. She works one on one with her clients, creating websites that are not only strategic, beautiful and professional, but also easy to use and maintain.