Basic Page Sections

Basic Page Sections

A basic web page usually has these sections:

  • Header: This identifies the site, usually has an h1 element and maybe a logo if one is used
  • Navigation: so you can move throughout pages in the site
  • Content: this is where the main content for the page goes
  • Footer: this let’s people know they’ve reached the end of the page and also often has info about who created the site, copyright info and, if pages are long a smaller version of the navigation.

Here is a diagram

In HTML5 elements were added to help us define some of these sections: header, nav, footer. For the content it is common to add a div with a class or ID on it that wraps all content. Two other HTML5 elements, article and section are also used, but we will cover them later. Here is a basic page with sections that you can use:

<!doctype html5>
    <meta charset="UTF-8">
    <title>My Page Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
        <h1>My Main Heading</h1>
            <li><a href="index.html">Home</a></li>
            <li><a href="page2.html">Page2</a></li>
            <li><a href="page3.html">Page3</a></li>
    <div class="main">
        <!-- page content goes here -->
        <!-- footer content goes here -->

Styling the Page

When you are styling the page you want to use some of the graphic design basics to help identify the diffferent sections of the page:

  • Color
  • Line
  • Space


When you want to set the color of text, you use the color property:


When you want to set the background color of an element use the background-color property:


If you do set the background color, also make sure you set the color of the text so it contrasts with the background-color and is readable.


The simplest way to add lines to define and separate elements with borders.

    border:1px solid #333;

Sometimes you don’t want a border all the way around. So you can just set one, like here adding a border above the footer:

    border-top: 3px solid black;

You can set all four borders separately:

  • border-top
  • border-right
  • border-bottom
  • border-left


Adding space between elements is another way to separate them. When you’re trying to add space between elements, margin is the way to go first:


Like border you can set all four separately or at once if you just use margin:30px

Leave a Reply