Web Design
HTML Exercise #8 (Part I)

HTML5 Sectioning Tags

Focus on:

Overview

You have two pages to mark up: 1-pets.html and 2-uwm-page.html. You'll need to validate them and check them in the document outliner. Screenshots of the browser presentation and the document outliner will help you with this work.

If possible, we will work in assigned pairs on this exercise during class. If that is not possible, the exercise will be done outside of class.

Workflow

On the pets page, you are required to put in all necessary HTML5 semantic structural tags (header, main, footer, article, section, nav, aside). Not all will be necessary.

On the UWM page, you are required to put in all the necessary HTML5 semantic structural tags (header, main, footer, article, section, nav, aside), as well as needed heading tags. You'll be using h1, h2, h3. Be sure you are using them in the proper locations. Currently the markup has paragraph tags, and you'll have to replace some of those with heading tags. Not all structural tags will be necessary.

On both pages, write an embedded style sheet to put background colors in the sectioning tags only. You do NOT need to style the non-sectioning structural tags. The screen shots of the completed pages will clarify this. You may use any background colors you like.

Validation

You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur. Watch the validation video for reminders about how the validator works and how to make corrections. Most errors in your markup show up as several errors in the validator because of a sort of cascading effect. Once you fix an error, several of the validator errors will probably be resolved.