The Anatomy of a Web Page

You might have heard of words such as header, footer, sidebar, breadcrumbs, etc. While these terms are ‘everyday words’ for someone who works on websites, not everybody knows exactly what they are. Here, I’ll break down the various parts that make up a web page and ultimately, a website. Please note that a web page or website may not have all the parts. Most features can be turned on or off, depending on the designer and the website owner’s preferences.

Header

It is on the very top of a page, usually containing important contact information such as the contact phone numbers and email address. It can contain icons linked to the website’s social media network sites. If a header is turned on, it appears throughout the website.

Here’s the header for Waipuna Estate :

The header of a website

header

Main Navigation or Menu

It is essential so you can navigate to the various pages of a website. It is popular to have it across the top of the website. It can also be on the left hand side or the right hand side.

The links on the menu as seen when you view a website, will be the top level. As you hover over some of those menu items, they might drop-down to reveal more menu item links. Those are second level or even third level menu.

website navigational menu

Main Navigational Menu

There can be more than one menus, ie a secondary menu (picture below) and even a footer menu.

Picture Slider

Website picture slider

Picture slider

Having a picture slider is currently popular but it’s entirely optional. It should contain good quality images with your main selling points or products along with captivating messages. There are many types of sliders available with great animations including 3D animations. Most people prefer a simple fade/slide-in, fade/slide-out.

Sleepyto NZ has a more complex slider to animate and show what the product can do.

Blurbs

When visitors come to your website, they want to know quickly what you have to sell or offer, who you are and why they should choose to buy your products or use your services above everyone else’s. This information can be put into 3 blurb boxes under the picture slider. Some of the texts may be linked to your pages, encouraging visitors to delve into your website.

Website blurb boxes

website blurbs

Call to Action (CTA)

The main purpose of all websites is to get visitors to take actions; whether it is to buy the products, use the service or contact the website owner to make an appointment or enquiry which would hopefully lead to some sales.

After all the information given on the page, we can add a ‘Call to Action’ for visitors to take that step. Clicking on the ‘Call to Action’ can take the visitors to the Contact Page, Shop Page or any page we want them to go to.

Website design call to action button

Call to Action

Page Header or Title

The title of the page will be the main topic for the page. A sub-header is optional.

Page Title or Page Header of a web page

Page Title or Header

Breadcrumbs

“Hansel takes a slice of bread and leaves a trail of bread crumbs to follow home.” So, the ‘breadcrumbs’ of a website trace the route visitors have taken to arrive at a page and by back-tracking, your visitors can go back to the page before or go back to the Home page. This is helpful for big websites with complex navigation. It is usually placed on top of the page just below the page title.

Breadcrumbs of a website

Breadcrumbs

Sidebars

As the name suggests, it is on the side of a page, usually to the right. It can be placed on certain pages only or on all pages. A sidebar can contain various widgets or plug-ins, eg Facebook feeds, RSS feeds, shopping cart, links to recent posts, Pinterest boards and lots more.

A website sidebar

Sidebar

Footer

It’s right on the bottom of a website, as the header is right on the top.

Website footer with widgets

Footer

There can be a footer widget area like the one above. Here it contains various widgets or plug-ins, providing convenience and functionalities. Right beneath is the website copyrights and website designer’s backlink.

Phew, such a lot of things to put together to make a website!

Read more…

What is a mobile-friendly or responsive website? or check out our web-design services.