Web page regions

See more about:

This lesson’s goals

By the end of this lesson, you should:

  • Know what Web page regions are.
  • Know what Webers typically put in each region.

A region is a visual chunk of a Web page. It contains one or more elements. Regions are usually visually distinct from other regions on the page.

Common regions

Web pages are often divided into the following regions:

Regions

Figure 1. Regions

Different things are put in different regions.

  • The top region is often used for site branding (logo and site name). There might be a horizontal nav bar. The top region is often called the header.
  • The left region usually shows a vertical nav bar. The region is also called the left sidebar.
  • The right region might show ads, or more navigation. The right region is also known as the right sidebar.
  • The bottom region might have copyright information, and another nav bar. The region is often called the footer.
  • The main content of a page usually goes in the center region.

Not all sites are like this. CoreDogs isn’t, for example. CoreDogs is like this:

Regions in CoreDogs

Figure 2. Regions in CoreDogs

But the regions in Figure 1 are common.

Here’s a layout that uses three regions.

Regions example

Figure 3. Regions

The top region has the logo, the site name, and a nav bar. The center region has a page header and content. The bottom region has a nav bar. The left and right regions are not used.

Exercise: Finding regions

Web sites use some common layout patterns. Find at least two examples of each of the following. Enter the URLs in the solution area.

Five regions
Five regions

No right region
No right region

No left region
No left region

No right or left regions
No right or left regions

Put the URLs below, like this:

Five regions:

URL 1
URL 2

(Log in to enter your solution to this exercise.)

Summary

  • Web page regions are visual areas on a Web page, like top, left, and center.
  • Regions have common uses. For example, left regions are often used for nav bars.

What now?

Here’s a layout again:

Regions example

Figure 3 (again). Regions

To create this, you need to set the spacing around regions. Let’s see how you do that.


How to...

Lessons

User login

Log in problems? Try here


Dogs