Just like the human body, the website is built of multiple, independent elements that are connected together. All websites generally have a number of common features, which makes browsing different websites easy.
This article will touch on the main elements that make up a website and covers their importance on a website.
Page header
The page header is usually found at the top of the page and is the first thing your visitors will see. It is generally between 100 and 140 pixels high. The page header holds the company logo and the main website navigation.
Main navigation
The main navigation sits in the page header, it usually consists of a horizontal row of 5 to 8-page links. These are the most important pages on the website. Having more than 8 main navigation links will make the website look cluttered. The current page link is often highlighted to let visitors know what page they are on.
Secondary navigation
Not every page has a secondary navigation, and most often different pages have different secondary navigation. The secondary navigation consists of the links of pages that belong to the parent page. It is usually either placed below the main navigation or on the sidebar of the page.
Hero image
The hero image refers to the large image you see when the visitor visits the website. It is one of the first things the visitor sees. Therefore, this image needs to be carefully selected to grab the visitor’s attention.
World Class Statement
Accompanying the hero image is the world-class statement. This statement is crucial to attracting the attention of the visitor.
Call to action
A call-to-action button provides an urge to visitors to take action on the primary goal of your website. Whether it is to purchase a product, contact you, or to learn more about your business. A website without a call to action is often ineffective and incomplete.
Homepage content
Most visitors leave a website in 10 to 20 seconds, but pages that can hold the visitor’s attention for a long time means they are interested in the services you offer. The longer that you can sustain the visitor, the higher the chance that they will convert. Therefore, it is important to keep the most useful information on your website on the homepage.
Breadcrumbs
Have you ever been in a situation where you get lost in a website and don’t know where to go next? This is how the breadcrumbs menu plays an important role on the website, especially in larger websites. It is a very useful navigational structure that is placed below the page header. The breadcrumbs menu starts at the homepage and builds up to the last page the visitor is currently browsing.
Page title
The page title informs the visitor what page they are viewing. It is encouraged to use the HTML H1 tag on the page title, as it helps with search engines indexing your page.
Page content
The page content forms the meat of your page. This is where you place the main article on the topic of this page.
Sidebar
The sidebar is an area that is placed alongside the main article on the page. It can be placed on the left or right side, and even both side of the main article. The sidebar is usually used to display information that is not part of the main content. Examples of elements you can place in the sidebar are the secondary navigation, search bar, sign up form and a call to action.
Page footer
The page footer contains information at the bottom of every page on your website. The footer content mainly consists of technical information like your business name and address and copyright information. The footer can also include an email subscription form and links to pages within the website.
