hide me

Anatomy of a Web Page

Anatomy of a Web Page

This post has been modified from the original with screenshots of our site and removal of original content. Original Author: Jarel Remick

 

Anatomy of a Web Page

The elements of a web page are like organs; they are vital to a properly functioning and aesthetically pleasing web page.

 

page-anatomy

These are the main elements of a web page. There are many different ways to organize them but this is perhaps the most common basic layout used online.

 

 

Container

All web pages use a container and for the same purpose; to contain page elements, however the way it is accomplished varies. For example, the body tag or a div is most commonly used. In the past, even a table has been used (do not use a table as your page container, it is a depreciated method). Think of the container as the external walls of your house in which your bedrooms, kitchen, living room, etc. are then placed.

Types of container:

  1. Liquid: Expands to fill the width of the browser window.
  2. Fixed: A specific width you choose which does not change regardless of browser window size.

 

header

 

Header

The header isn’t really a specific element although some may consider it to be. It is more generally used in referring to the top section of your web page where your logo, navigation, tagline, etc. are located. Many people prefer to keep these elements contained within a div for easier page styling, element separation and/or element containment. The header would be considered a container so it would have two types to choose from: liquid or fixed as mentioned above.

logo_nav

 

Logo

Your logo is your identity and branding. The most common placement for the logo is within the header, aligned left. We read from left to right, top to bottom, so your logo will most likely be the first element your visitors look at.

Navigation

Page navigation is one of the most important elements; your visitors need it to use your website. It should be easy to find and use, which is why it is almost always located within the header or at least near the top of the page. Sometimes both types of navigation are used for high content websites.

Types of navigation:

  1. Horizontal: A series of links displayed inline, usually referred to as “navigation”.
  2. Vertical: A series of links displayed as a vertical stack, usually referred to as “menu”.

 

 

header_sidebar

 

Main Content

As everyone knows (or should), content is king! When people visit your site, this is the element they will be looking for primarily. It should be the main focal point of a web page so visitors find what they are looking for quickly.

Sidebar

The sidebar is the element with your secondary content such as advertising, site search, subscription links (RSS, Twitter, Email, etc), contact methods, etc. This element isn’t necessary although many websites use it. It is most often right aligned but can be left aligned or both (two sidebars) so long as it doesn’t disrupt main content viewing. For websites that use horizontal AND vertical navigation, the sidebar is often replaced with the vertical navigation element.

website footer

Footer

The end of a web page should always use a footer to let your visitors know they have reached the completion of your web page. Like the header, the footer isn’t really a specific element but more of a containing section. Within your footer will be copyright, legal and contact information primarily. It’s a good idea to include a few links to the most important sections of your site such as the top of the page, home page, contact page, etc. Some websites use this area as an opportunity to mention related material or other important information.

“Whitespace”

This is any area of the web page that is not covered by typography or other content. You may feel the strong urge to fill as much empty space as possible but don’t do it! Empty space is just as important to a good web page design as the content to be used. You can see how the blueprintds.com site uses empty space very effectively to help guide visitors through content, create page balance and give a good sense of content separation.

So that covers the anatomy of a web page.

 

 

Source: NETTUTS

  • The BPDS newsletter