Web Design
HTML Exercise #7

HTML Semantic Structural Tags: header, main, footer

Focus on:

Overview

You need to put the proper markup for semantic structure, document hierarchy and other necessary tags in each page. You'll then use an embedded style sheet to put background colors in the semantic structural elements (header, main, footer).

The heading tags will require you to replace paragraph tags in the markup. The structural semantic tags will just be added to the text to group content together.

Although these are all single pages, it is assumed that they would be part of a larger site (as per the menu). Be sure you pay attention to the menus, because they will help you make decisions about marking up the page.

Workflow

You have three documents to mark up: one about viburnums, one about UWM, and the last about a speculative fashion brand. Put in the appropriate heading tags for the site id, the page name, and any subtopics of content. Check the document outline to see if you have the correct hierarchical structure for the headings (shopping page is a screen shot of the current outliner we will be using, but the old screenshots show the correct outline, just a different utility tool).

Put header, main, footer into each page, and check to see if there is any other markup needed. The screenshots of the completed pages and the correct document outlines should help you see the other tags.

After the markup is complete, add your styles. You can use whatever background colors you like. You do not need to match the colors in the screenshot. You are writing embedded styles for header, main, footer. You will need to write the correct markup to embed your style sheet in the document head tag.

Validation

You want to be sure you've written valid markup. Use the online validator tools to check your work. If there are errors, read what the validators say about them and check the lines in your markup where the errors occur. Watch the validation videos for reminders about how the validators work and how to make corrections.

Helpful links: