Assignment 2: Build a Semantic Page Outline
Course: HTML5 Fundamentals • Due: • Points: 25
Assignment Brief
Create a complete HTML5 page that demonstrates proper use of semantic sectioning elements, a logical heading hierarchy, accessible navigation, and at least one data table with appropriate scope attributes.
Requirements
- Use
header,nav,main,section,article,aside, andfooter - Include a breadcrumb navigation using an ordered list
- Contain at least one
figurewithfigcaption - Include a
details/summarydisclosure widget - Use
progressormeterto display a measurement - Pass W3C HTML validation with zero errors
Grading Rubric
| Criterion | Excellent (4) | Good (3) | Fair (2) | Poor (1) | Weight |
|---|---|---|---|---|---|
| Semantic Structure | All elements used correctly | Minor semantic issues | Some non-semantic markup | Mostly non-semantic | 30% |
| Heading Hierarchy | Perfect h1–h6 nesting | One level skip | Multiple level skips | No logical hierarchy | 20% |
| Accessibility | Full ARIA and labels | Most labels present | Some missing labels | No accessibility features | 25% |
| Code Quality | Clean, validated HTML | Minor validation warnings | Several errors | Invalid HTML | 25% |