Anatomy of a web page

Good web design has a number of common features which make websites easier and more enjoyable to use. Knowing what these are will help you understand why you love some sites, and hate others.

Our article on the anatomy of a web page covers the individual elements on a page, what they're for and why you need them. To see what page formats are commonly used, read our article on the size and layout of a web page.

Page header

The area at the top of the page is usually referred to as the page header. On a typical page such as Microsoft or eBay, this area is between 100 and 150 pixels high, and features the company logo, strap line and main navigation. This is the first thing that your visitors will see, and will be a common theme throughout your site.

Main navigation

The main navigation is usually a horizontal row of 5-8 page links, which are either at the top of the site structure, or are the most important pages on the website. These are very visible and obvious, and are often highlighted when the visitor is in that section of the site. The first item is usually a link back to the Home page. With more than 8 main navigation links, a website can look cluttered.

Secondary navigation

Secondary navigation refers to pages below the top level of the website, the second tier of the site structure. Unlike the main navigation, the secondary navigation changes depending on which area of the site the visitor is browsing. Secondary navigation is usually either placed directly under the main navigation, or on the left side of the screen. When placed on the left side of the screen, secondary navigation allows the tertiary navigation to be displayed as well. Tertiary (third tier) navigation is a useful navigational aid for larger sites.

Page title

The title of your page is crucial to attract a visitor's interest. Studies have found that the vast majority of visitors will look at a web page for less than 30 seconds, so your page needs a snappy title to draw them in. The page title should use the HTML H1 tag because it has special significance to search engines indexing your page.


Breadcrumb trail

A useful navigational aid, the breadcrumb trail is usually placed just below the page header and shows at a glance where the visitor is located in the site structure, e.g. Home > Resources > Anatomy of a web page. The breadcrumb trail begins at the home page and each link except the last should be clickable to take the visitor up to that section.

Hero image

This refers to a large image at the top of the page content that grabs the visitor's attention. Its use should be restricted to key pages such as the home page, in order to maximise the effect.

Content width

An important consideration for readability is the width of the main content of a page. Text that spans the whole page can be hard to follow, which is why newspapers use a series of narrow columns. On a web page, content wider than around 30 words can be hard for the visitor's eye to track, so we recommend breaking wide sites up into columns to make them easier to read.

Page footer

The page footer usually consists of links to important (but not very interesting) pages on the site, such as the terms & conditions, site map and a contact page. Some sites, such as Flickr, put a large number of links in the footer so that the main navigation can be free of clutter without reducing functionality.

*information correct at 1st March 2008