Page Structure

Use Semantic Elements to Structure a Page.

The Primary Sections

Use HTML5 semantic elements to create three main blocks in the index.html page of your theme. Each of the additional pages of your theme, including the About page, should contain these elements.

This page is an example of a document with these three blocks. Each of the major blocks has its own background color. (In this document, also provide a background color for code, but that is a different subject.)

Header Place the main title here
Main Put the primary content, the body of the article, here.
Footer Put the footer, and links to home and/or about, here.

Keep your CSS simple. Define only the rules and declarations I ask you to define. I realize that we are still not creating beautiful pages, but I want us to build up our knowledge bit by bit.

The Header

We create this section with the <header> tag.

In the CSS, define the following properties for this element:

  • background-color
  • text-align

Define a special p tag for the teaser

    header p {
        font-weight: bold;
        color: blue;

Define a class called byline for your attribution:

<p class="byline">by Some Student</p>

In your css rule for this class, define the following declarations.

  • font-style
  • font-family
  • font-size


Use the <main> element for this section. This is the main section of your document, the place where you put most of your content.

In your CSS rule for this element, include only a background-color declaration.


Have at least one relatively small image float left or right. Wrap it in a figure element and include a figcaption element.

To float left:

    figure.left {
        float: left;

You can use the clear property on an element to make it move below and to the left of the image you have floated to the left or right. But you might not need to do that in this case.

Also use the doo-hickey in the developer tools or your phone to see that your site looks at least reasonable on a mobile device.

I may define a few more CSS rules that you can create for your theme documents.

Turn it in

To turn it in, just push your repository. I'll look in the your theme directory for your work.

I'm looking for at least two HTML files and one CSS file.

  • index.html
  • about.html
  • styles.css

The HTML files should all have the three part structure outlined in this document. In the footer, the two HTML files should link to one another with an anchor element embedded in an unordered list. You would create the element like this with emmet:


Like this:

        <li><a href=""></a></li>

In the code shown above, you need to complete the href attribute and the content of the anchor tag. The content will probably be either Home or About.