Build a Multi-Page Website with Semantic HTML

Module 3 Weekend Project

Introduction

Welcome to your first substantial project in our web development journey! This weekend, you'll be putting all the HTML skills you've learned throughout Module 3 into practice by building a multi-page website with proper semantic structure and accessibility features. This project will serve as the foundation for later modules where we'll add CSS styling and JavaScript functionality.

Think of this project as building the skeleton of a house - while it may not look beautiful yet (that comes with CSS), having a strong, well-organized structure is essential for everything that follows.

Project Overview

You will create a multi-page website for a fictional business or organization of your choice. The website should demonstrate your understanding of semantic HTML elements, proper document structure, accessibility best practices, and the various HTML features we've covered.

flowchart TD A[Project Planning] --> B[Create Site Structure] B --> C[Develop Home Page] C --> D[Create Secondary Pages] D --> E[Implement Navigation] E --> F[Add Media Elements] F --> G[Create Forms] G --> H[Enhance Accessibility] H --> I[Validate HTML] I --> J[Final Review]

Approaching the Project Using Polya's Method

Step 1: Understand the Problem

Before writing any code, let's clearly define what we're trying to accomplish:

Step 2: Devise a Plan

Here's a structured approach to building our website:

  1. Choose a website theme/topic (business, portfolio, blog, etc.)
  2. Create a site map outlining all pages and their relationships
  3. Design a consistent page structure with header, navigation, main content, and footer
  4. Start with the homepage, establishing the core structure
  5. Develop secondary pages following the same structural pattern
  6. Create navigation elements connecting all pages
  7. Add forms and interactive elements where appropriate
  8. Implement accessibility features (ARIA attributes, alt text, etc.)
  9. Validate HTML to ensure code quality
  10. Test navigation and links

Step 3: Execute the Plan

We'll cover this in the detailed implementation guidance below.

Step 4: Review and Reflect

After completing the website, we'll review our work, check for errors, and identify areas for improvement.

Project Requirements

Required Pages

Required HTML Elements

Accessibility Requirements

Site Structure Visualization

Here's a typical multi-page website structure:

graph TD A[index.html
Home Page] --> B[about.html
About Page] A --> C[services.html
Services/Products] A --> D[contact.html
Contact Form] A --> E[blog.html
Blog/News] B --> A C --> A D --> A E --> A B --- C C --- D D --- E E --- B F[Common Elements] --> G[Header with Logo] F --> H[Navigation Menu] F --> I[Main Content Area] F --> J[Footer with Copyright]

Detailed Implementation Guide

Step 1: Project Setup

Start by creating a new folder for your project and setting up the basic files:

project_folder/
  ├── index.html
  ├── about.html
  ├── services.html
  ├── contact.html
  ├── blog.html (or another page of your choice)
  └── images/
      ├── logo.png
      └── (other image files)

Step 2: Creating the Base HTML Structure

Each HTML file should follow this basic structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title | Site Name</title>
  <meta name="description" content="Brief description of the page">
</head>
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>
  
  <header>
    <!-- Logo and site title -->
    <nav>
      <!-- Navigation menu -->
    </nav>
  </header>
  
  <main id="main-content">
    <!-- Main content sections -->
  </main>
  
  <footer>
    <!-- Footer content -->
  </footer>
</body>
</html>

Step 3: Building the Homepage (index.html)

Your homepage should serve as an introduction to your website:

<!-- Inside main content -->
<section class="hero">
  <h1>Welcome to [Business Name]</h1>
  <p>Compelling tagline or brief description</p>
  <img src="images/hero-image.jpg" alt="Descriptive text about the image">
</section>

<section class="features">
  <h2>Our Key Features</h2>
  <div class="feature-cards">
    <article>
      <h3>Feature 1</h3>
      <p>Description of the feature</p>
    </article>
    <article>
      <h3>Feature 2</h3>
      <p>Description of the feature</p>
    </article>
    <article>
      <h3>Feature 3</h3>
      <p>Description of the feature</p>
    </article>
  </div>
</section>

<section class="testimonials">
  <h2>What Our Customers Say</h2>
  <blockquote>
    <p>Customer testimonial text.</p>
    <cite>— Customer Name</cite>
  </blockquote>
</section>

Step 4: Creating Navigation

Implement consistent navigation across all pages:

<nav aria-label="Main Navigation">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="blog.html">Blog</a></li>
  </ul>
</nav>

Step 5: About Page Implementation

The about page should tell the story of your business:

<section class="company-intro">
  <h1>About [Business Name]</h1>
  <p>Detailed introduction to the company</p>
</section>

<section class="our-story">
  <h2>Our Story</h2>
  <p>Company history and background</p>
  <figure>
    <img src="images/company-history.jpg" alt="Historical image of the company">
    <figcaption>Our first office in 2010</figcaption>
  </figure>
</section>

<section class="team">
  <h2>Meet Our Team</h2>
  <div class="team-members">
    <article>
      <h3>Team Member Name</h3>
      <img src="images/team-member1.jpg" alt="Photo of [Name]">
      <p>Role: Position Title</p>
      <p>Brief bio description</p>
    </article>
    <!-- Add more team members as needed -->
  </div>
</section>

Step 6: Services/Products Page

Display your offerings with details:

<h1>Our Services</h1>
<section class="services-overview">
  <p>Introduction to services offered</p>
</section>

<section class="service-list">
  <article class="service">
    <h2>Service 1</h2>
    <img src="images/service1.jpg" alt="Image representing Service 1">
    <p>Detailed description of the service</p>
    <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
    </ul>
  </article>
  
  <!-- Add more services as needed -->
</section>

<section class="pricing">
  <h2>Our Pricing</h2>
  <table>
    <caption>Service Pricing Options</caption>
    <thead>
      <tr>
        <th scope="col">Service Package</th>
        <th scope="col">Features</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Basic</th>
        <td>Feature 1, Feature 2</td>
        <td>$99</td>
      </tr>
      <tr>
        <th scope="row">Premium</th>
        <td>Feature 1, Feature 2, Feature 3</td>
        <td>$199</td>
      </tr>
      <tr>
        <th scope="row">Enterprise</th>
        <td>All Features</td>
        <td>Contact us</td>
      </tr>
    </tbody>
  </table>
</section>

Step 7: Contact Page with Form

Create an accessible contact form:

<h1>Contact Us</h1>
<section class="contact-info">
  <h2>Get in Touch</h2>
  <address>
    123 Business Street<br>
    City, State ZIP<br>
    <a href="tel:+11234567890">(123) 456-7890</a><br>
    <a href="mailto:info@business.com">info@business.com</a>
  </address>
</section>

<section class="contact-form">
  <h2>Send Us a Message</h2>
  <form action="#" method="post">
    <div class="form-group">
      <label for="name">Your Name:</label>
      <input type="text" id="name" name="name" required aria-required="true">
    </div>
    
    <div class="form-group">
      <label for="email">Email Address:</label>
      <input type="email" id="email" name="email" required aria-required="true">
    </div>
    
    <div class="form-group">
      <label for="subject">Subject:</label>
      <input type="text" id="subject" name="subject">
    </div>
    
    <div class="form-group">
      <label for="service">Service Interested In:</label>
      <select id="service" name="service">
        <option value="">-- Select a Service --</option>
        <option value="service1">Service 1</option>
        <option value="service2">Service 2</option>
        <option value="service3">Service 3</option>
      </select>
    </div>
    
    <div class="form-group">
      <fieldset>
        <legend>Preferred Contact Method:</legend>
        
        <div class="radio-option">
          <input type="radio" id="contact-email" name="contact-method" value="email">
          <label for="contact-email">Email</label>
        </div>
        
        <div class="radio-option">
          <input type="radio" id="contact-phone" name="contact-method" value="phone">
          <label for="contact-phone">Phone</label>
        </div>
      </fieldset>
    </div>
    
    <div class="form-group">
      <label for="message">Your Message:</label>
      <textarea id="message" name="message" rows="5" required aria-required="true"></textarea>
    </div>
    
    <div class="form-group">
      <input type="checkbox" id="newsletter" name="newsletter">
      <label for="newsletter">Subscribe to our newsletter</label>
    </div>
    
    <button type="submit">Send Message</button>
  </form>
</section>

<section class="location">
  <h2>Our Location</h2>
  <!-- Embed a map or provide an image of your location -->
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" title="Business Location Map"></iframe>
</section>

Step 8: Footer Implementation

Create a consistent footer across all pages:

<footer>
  <div class="footer-content">
    <div class="company-info">
      <img src="images/logo.png" alt="Company Logo" width="100">
      <p>[Business Name]</p>
      <p>Brief company description</p>
    </div>
    
    <div class="quick-links">
      <h3>Quick Links</h3>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="blog.html">Blog</a></li>
      </ul>
    </div>
    
    <div class="social-media">
      <h3>Connect With Us</h3>
      <ul>
        <li><a href="https://facebook.com">Facebook</a></li>
        <li><a href="https://twitter.com">Twitter</a></li>
        <li><a href="https://instagram.com">Instagram</a></li>
        <li><a href="https://linkedin.com">LinkedIn</a></li>
      </ul>
    </div>
  </div>
  
  <div class="copyright">
    <p>&copy; 2025 [Business Name]. All rights reserved.</p>
    <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
  </div>
</footer>

Step 9: Enhancing Accessibility

Implement these additional accessibility features:

  1. Skip navigation link: 
    <a href="#main-content" class="skip-link">Skip to main content</a>
  2. ARIA landmark roles (if needed for backward compatibility): 
    <header role="banner">
<nav role="navigation">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">
  3. Image accessibility: 
    <!-- For informative images -->
<img src="path/to/image.jpg" alt="Descriptive text about the image content">

<!-- For decorative images -->
<img src="path/to/decorative-image.jpg" alt="">

<!-- For complex images like charts -->
<figure>
  <img src="chart.jpg" alt="Brief description">
  <figcaption>Detailed description of what the chart represents</figcaption>
</figure>
  4. Descriptive link text: 
    <!-- Avoid this -->
<a href="services.html">Click here</a> to learn about our services.

<!-- Better approach -->
<a href="services.html">Learn about our services</a>.

Adding Advanced HTML Features

Embedding Video

<section class="promo-video">
  <h2>See Our Work in Action</h2>
  <video controls width="640" height="360" poster="images/video-thumbnail.jpg">
    <source src="videos/promotional-video.mp4" type="video/mp4">
    <source src="videos/promotional-video.webm" type="video/webm">
    <track kind="captions" src="videos/captions.vtt" srclang="en" label="English">
    <p>Your browser doesn't support HTML5 video. Here's a <a href="videos/promotional-video.mp4">link to the video</a> instead.</p>
  </video>
</section>

Embedding Audio

<section class="testimonial-audio">
  <h2>Hear from Our Customer</h2>
  <audio controls>
    <source src="audio/testimonial.mp3" type="audio/mpeg">
    <source src="audio/testimonial.ogg" type="audio/ogg">
    <p>Your browser doesn't support HTML5 audio. Here's a <a href="audio/testimonial.mp3">link to the audio</a> instead.</p>
  </audio>
  <details>
    <summary>Read Transcript</summary>
    <p>Full transcript of the audio testimonial...</p>
  </details>
</section>

Definition List Example

<section class="faq">
  <h2>Frequently Asked Questions</h2>
  <dl>
    <dt>Question 1?</dt>
    <dd>Answer to question 1...</dd>
    
    <dt>Question 2?</dt>
    <dd>Answer to question 2...</dd>
    
    <dt>Question 3?</dt>
    <dd>Answer to question 3...</dd>
  </dl>
</section>

Progress Indicator Example

<section class="project-status">
  <h2>Project Completion Status</h2>
  <div class="progress-container">
    <label for="project-progress">Phase 1 (75% Complete)</label>
    <progress id="project-progress" value="75" max="100">75%</progress>
  </div>
</section>

Validation and Testing

Before submitting your project, ensure you:

  1. Validate all HTML pages using the W3C Markup Validation Service
  2. Check accessibility with tools like WAVE Web Accessibility Evaluation Tool
  3. Test navigation and links to ensure they work correctly
  4. Review heading hierarchy and document structure
  5. Test tab navigation to ensure keyboard accessibility
  6. Check form functionality and accessibility

Common Issues and Solutions

Issue: Improper Heading Hierarchy

Incorrect:

<h1>Page Title</h1>
<h3>First Section</h3> <!-- Skipped h2 -->
<p>Content...</p>

Correct:

<h1>Page Title</h1>
<h2>First Section</h2> <!-- Proper sequence -->
<p>Content...</p>

Issue: Missing Alt Text

Incorrect:

<img src="team.jpg"> <!-- Missing alt text -->

Correct:

<img src="team.jpg" alt="Company team members at annual retreat">

Issue: Non-Semantic Structure

Incorrect:

<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

Correct:

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Issue: Unlabeled Form Controls

Incorrect:

<input type="text" name="name" placeholder="Your Name"> <!-- No label -->

Correct:

<label for="name">Your Name:</label>
<input type="text" id="name" name="name">

Real-World Application

This project mirrors the actual process of creating the foundational structure for a professional website. In real-world web development, HTML forms the skeleton upon which all other aspects of design and functionality are built. Businesses rely on well-structured, accessible websites to:

By mastering semantic HTML and accessibility best practices now, you're developing skills that are essential throughout your web development career. These foundational elements remain important regardless of changes in design trends or JavaScript frameworks.

Semantic HTML Cheat Sheet

Element Purpose Example Usage
<header> Introductory content, navigation Site logo, main navigation, site title
<nav> Navigation links Main menu, pagination, breadcrumbs
<main> Main content of the page The central content area (only one per page)
<article> Self-contained content Blog post, news article, product card
<section> Thematic grouping of content Chapters, tabbed content areas
<aside> Tangentially related content Sidebars, pull quotes, related links
<figure> and <figcaption> Self-contained content with caption Images, illustrations, diagrams with descriptions
<footer> Footer information Copyright info, contact details, secondary links
<address> Contact information Email, phone number, physical address
<time> Time or date Publication dates, event times

Accessibility Checklist

Additional Resources

Submission Guidelines

  1. Create a ZIP file containing all HTML files and any media assets (images, videos, etc.)
  2. Ensure all file paths are relative and working correctly
  3. Include a README.txt file with:
    • Your name and contact information
    • Brief description of your website's purpose and target audience
    • Any special features or elements you've implemented
    • Any resources or references you used
  4. Submit the ZIP file through the course portal by Sunday at 11:59 PM

Conclusion

This weekend project is an important milestone in your web development journey. You're now applying the HTML fundamentals you've learned to create a complete, structured, accessible website. This foundation will be essential as we move forward with styling (CSS) and interactivity (JavaScript) in upcoming modules.

Remember, professional web developers always prioritize structure and accessibility before aesthetics. By focusing on semantic HTML now, you're building good habits that will serve you throughout your career.

Good luck with your project! I'm excited to see what you create.