5 Different Structures of Web Page Design

A Web page has standard structural elements that give basic information about the website, its operator and the content. It may also display ads, aggregated content or links to other material that is less relevant to the site's visitors. The five main structures that accomplish these functions have forms, sizes and locations that reflect their importance on the particular Web page, while reflecting the website structure and the informational architecture of the overall site.

  1. Header

    • The header, across the top of the Web page, contains the title of the website, and possibly information about the identity of the site operator. It repeats on each page of the website, and usually contains a link back to the home page, often in the form of the website logo. In addition to a link home, it may have additional major links to related sites or major site sections. The site search box is often located in the header, as are links to a shopping cart.


    • The navigation section of the Web page contains the links to other pages. Designers may locate this section on the left or right side of the Web page, but a menu down the left side is the most common form. For small sites, the menu will remain the same for all pages, except that the designer may make the current page's link change color or shape, to help in navigation. For larger sites, the menu will change to reflect which section of the site the visitor is exploring.

      The navigational structure of the website must reflect the informational hierarchy and architecture of the site. Sites may be organized geographically, chronologically, by task or topic, or according to various target audiences. Mixed structures, for example a link to a section for children in North America, using audience and geographical criteria, are also possible.

    Main Content

    • The content, centrally located, is the focus of interest. The page title must be prominent. Earlier tendencies toward colorful backgrounds and elaborate fonts have yielded to a clear and simple presentation of the information for most sites. In addition to displaying the content, the content section should make its location in the site's structure clear. Breadcrumbs, or a line of text giving the current Web page's location within the website, is the preferred solution. The content may also include internal links to other site pages giving more information about a particular subject, and it may incorporate ads for advertising-supported sites. In line with the structure of the navigation, the informational structure of the content must be consistent.

    Peripheral Content

    • With a menu structure on the left, the right side of the Web page is often reserved for secondary content. Designers place ads, links to other websites and additional information about the subject of the main content section here. While ad placement at the right side of the page is common, the effectiveness of this location is questionable, since visitors often ignore right-side vertical banner ads.


    • The footer, at the bottom of the Web page, contains information that is consistent for all pages, but not of primary interest to the visitor. It contains legal matters and housekeeping information. Typical elements are copyright notices, authors, publication dates and links to privacy policies. A link back to the top of the Web page is a thoughtful addition.

Related Searches


  • Photo Credit Comstock/Comstock/Getty Images

Related Ads

Check It Out

Can Microsoft Force You to Upgrade?