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.