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>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Page Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header>
        <h1>My Main Heading</h1>
    </header>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="page2.html">Page2</a></li>
            <li><a href="page3.html">Page3</a></li>
        </ul>
    </nav>
    <div class="main">
        <!-- page content goes here -->
    </div>
    <footer>
        <!-- footer content goes here -->
    </footer>
</body>
</html>

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

Color

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

h2{
    color:#ff3300;
}

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

nav{
    background-color:#000;
}

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.

Line

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

header{
    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:

footer{
    border-top: 3px solid black;
}

You can set all four borders separately:

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

Space

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:

footer{
    margin-top:50px;
}

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

Leave a Reply