Section 38: Project — Semantic Multi-Page Website

Project Goal

Build a small website with Home, About, Courses and Contact pages. Use semantic HTML, consistent navigation, descriptive links and a clear document structure.

1. Suggested Folder Structure

my-website/
  index.html
  about.html
  courses.html
  contact.html
  css/
    style.css
  images/
    logo.svg

2. Shared Page Structure

Use the same navigation and overall structure across pages so visitors can move through the website consistently.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home | Codementrix Demo</title>
  <meta name="description" content="Explore web development courses and tutorials.">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <a href="index.html">
      <img src="images/logo.svg" alt="Codementrix Demo Home"
        width="160" height="48">
    </a>

    <nav aria-label="Main navigation">
      <a href="index.html" aria-current="page">Home</a>
      <a href="about.html">About</a>
      <a href="courses.html">Courses</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>

  <main>
    <h1>Learn Web Development</h1>
    <p>Build your skills through practical tutorials and projects.</p>
    <p><a href="courses.html">Explore our courses</a></p>
  </main>

  <footer>
    <p>Copyright Codementrix Demo</p>
  </footer>
</body>
</html>

3. About Page Content

Create about.html with a unique title, description and main heading.

<main>
  <h1>About Us</h1>
  <section>
    <h2>Our Mission</h2>
    <p>Our goal is to make web development easier to learn.</p>
  </section>
  <section>
    <h2>What We Teach</h2>
    <p>Explore HTML, CSS, JavaScript and backend development.</p>
  </section>
</main>

4. Courses Page Content

<main>
  <h1>Our Courses</h1>

  <section aria-labelledby="html-course">
    <h2 id="html-course">HTML Mastery</h2>
    <p>Learn HTML elements, forms and accessibility.</p>
    <a href="contact.html">Ask about this course</a>
  </section>

  <section aria-labelledby="css-course">
    <h2 id="css-course">CSS Fundamentals</h2>
    <p>Learn layouts, responsive design and styling.</p>
    <a href="contact.html">Ask about this course</a>
  </section>
</main>

5. Contact Page Content

<main>
  <h1>Contact Us</h1>
  <p>Send us a message with your question.</p>

  <address>
    Email: <a href="mailto:hello@example.com">hello@example.com</a>
  </address>

  <p><a href="index.html">Return to the home page</a></p>
</main>

Replace the sample email address with a real contact address before publishing.

6. Relative Paths

• href="about.html" links to a page in the same directory.
• href="css/style.css" links to a stylesheet in a subdirectory.
• href="../index.html" moves up one directory level.
• Absolute URLs include the full destination, such as https://example.com/about.

7. Semantic HTML Checklist

• Use header, nav, main and footer appropriately.
• Use sections with headings when grouping related content.
• Use article for self-contained content where appropriate.
• Use descriptive link text.
• Give each page its own title and meaningful description.
• Mark the current navigation link with aria-current="page" when appropriate.

Testing Checklist

1. Open every page and test every navigation link.
2. Check that images and stylesheets load.
3. Verify that each page has a unique title and a logical heading structure.
4. Test keyboard navigation and mobile layouts.
5. Validate every HTML file.

Practice Tasks

1. Add a Blog page with article links.
2. Add breadcrumbs to an inner page.
3. Include a useful footer navigation section.
4. Use the correct aria-current value on each page's active navigation link.
5. Add an accessible image and a descriptive caption to the Courses page.

Project Review Quiz

1. What is the purpose of the main element?
2. Why should each page have a descriptive title?
3. What is a relative URL?
4. What does aria-current="page" communicate?
5. Why should all navigation links be tested?

Answer Key

1. It identifies the main content of the page.
2. It helps identify the document in browser tabs and can help search engines understand the page.
3. A URL resolved relative to the current document's URL.
4. It identifies the current page in a related set of navigation links.
5. To find broken paths and ensure visitors can reach every page.