This page is not about HTML or CSS. See the HTML and CSS section.
Certain distinct regions, or areas, commonly appear on Web pages:
To some degree, these regions have been inherited from print design. However, some elements from the print world (such as table of contents, page numbers, and indices) are not as useful in digital design.
The simple list above should be useful if you are designing a new site. Ask yourself if you need all of the regions. Then determine what each region should contain.
The only region on the list that is essential is the Main Content area. Every page on the site has it.
However, the contents of the Main Content area (or container) will be different on each and every page. One task for the designer is to determine how much variation there will be in the unique contents of all the pages. For example, if some pages hold very long text articles, the designer will be concerned about line length and font size so that the text is very legible in spite of the quantity. On a page displaying a map, we are concerned about displaying the map at a size as large as possible while still accommodating the wide variation in users' viewing environments (i.e., Web browser window width and height).
The Main Contert area can contain a lot of very different assets, including videos, fill-in forms, interactive graphics, games, photographs with captions, lists of links, and all kinds of text items.
In general, this area (or container) will hold the identification of the site -- such as The New York Times nameplate, the title of a Weblog, or the Microsoft corporate logo. It might also include a tag line (as recommended in Steve Krug's book Don't Make Me Think) and the search box (ideally in the upper right corner, for languages that are read from left to right).
It may or may not hold the primary navigation for the site (see Sidebars, below).
Will the Header be exactly the same on every page in the site? This is a question to answer during the design process.
Can the site work well without a consistent header? It's a very rare site that can function well if it's "headless."
The Header area usually extends across the entire top edge of the HTML page.
The Footer area usually holds copyright or Creative Commons information, identification of the author(s) of the site and/or identification of the corporate owners of the site, and links to the site's privacy policy, "About Us," and contact information.
Ask yourself the same questions that you answered for the Header region: Will the footer be exactly the same on every page in the site? Can the site work well without a consistent footer?
Usually we DO NOT duplicate the items appearing in the Header region. The footer contains different items.
The Footer area usually extends across the entire bottom edge of the HTML page.
A Sidebar is a vertical region that is distinct from the Main Content area.
On sites that use a vertical stack of navigation links, or buttons, the primary navigation appears in a sidebar. If your navigation is in a horizontal array, then it belongs in the Header region.
BBC News, for example, has primary navigation links in a sidebar on the left side of the main page. The same navigation sidebar appears on the left side of all story pages too. Story pages also have an additional sidebar on the right side of the page. The right-side sidebar contains links to related materials, including videos and background information.
The Main Content area on a BBC News story page appears between the two sidebars.
Some sites use two parallel sidebars side-by-side; some use one sidebar; some sites have no sidebar at all. Sidebars can contain a wide variety of different assets, and their contents might change (thanks to script operating in the background) based on what is appearing in the Main Content area on the same page.
When you set out to plan and design a new Web site, or content package, your task can be simplified if you start by thinking about these four divisions of the page. For simple content packages, it is often possible to create one single page design that will work well for every page in the package. Only the arrangement within the Main Content area will need to change.
This work is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License. To attribute this work, include my name, Mindy McAdams, and a link to this page.
Journalists' Toolkit > Home