HTML
Project final - Site skeleton
Link all pages to each other and document the structure.
Linking pages with relative URLs
In a multi-page site, pages link to each other with <a> tags. When pointing to pages in the same folder, you use a relative URL: href="about.html". It has no leading /, so the link opens the file next to the current page.
Because nav links are the same on every page, using relative URLs keeps the site working even if the folder is moved. The home page is usually named index.html.
Document the structure with comments
As the page grows, finding what each region does gets harder. HTML comments (<!-- ... -->) label sections; the browser doesn't show them, but they're readable in the source.
In Cheese Magazine a short comment sits before each landmark: <!-- Top menu -->, <!-- Main content -->, <!-- Side content -->, <!-- Bottom info -->. This doesn't affect screen readers but guides the developer.
Exercise Switch nav to relative URLs, add aside and comments
Change the nav links to relative URLs: index.html, articles.html, about.html, contact.html. Add an <aside> after main with an <h2> and at least two links. Add <!-- ... --> comments before the header, main, aside and footer explaining the structure.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cheese Magazine</title>
</head>
<body>
<!-- Top menu -->
<header>
<nav>
<a href="index.html">Cheese Magazine</a>
<a href="articles.html">Articles</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<!-- Main content -->
<main>
<h1>Cheese Magazine</h1>
<p>Articles, recipes and maker stories about cheese culture.</p>
<section>
<h2>Latest articles</h2>
<article>
<h3>Ezine cheese</h3>
<p>We examined the production stages of Thrace's white cheese.</p>
</article>
<article>
<h3>Van herb cheese</h3>
<p>We met the herbs used in Eastern Anatolia's herb cheese.</p>
</article>
</section>
<section>
<h2>About</h2>
<article>
<h3>Our story</h3>
<p>Cheese Magazine has been sharing local makers' stories since 2018.</p>
<address>
Cheese Magazine, Brooklyn, NY
</address>
</article>
</section>
<section>
<h2>Contact</h2>
<form action="/contact" method="post">
<label for="name">Your name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Your message</label>
<textarea id="message" name="message" placeholder="Write your message here"></textarea>
<button type="submit">Send</button>
</form>
</section>
</main>
<!-- Side content -->
<aside>
<h2>Recommended</h2>
<ul>
<li><a href="articles.html">All articles</a></li>
<li><a href="about.html">About</a></li>
</ul>
</aside>
<!-- Bottom info -->
<footer>
<address>
Cheese Magazine, Brooklyn, NY
</address>
<p>(c) 2026 Cheese Magazine</p>
</footer>
</body>
</html>
Project done: Site skeleton
In this project we built a multi-page site skeleton for Cheese Magazine. Every page has a consistent header and footer; the main holds page-specific content split into sections and articles. An aside carries side content and address carries contact details.
Pages are linked with relative URLs and the structure is documented with comments. Next you'll learn to style this skeleton with CSS.
Test yourself
-
Which href is a correct relative URL to about.html?
- href="/about.html"
- href="about.html"
- href="http://about.html"
- href="#about"
Show answer
href="about.html" — Correct. A filename without a leading / is a relative URL; it opens the file in the same folder.
-
Complete the comment tag
<!-- ____ menu -->
Show answer
<!-- Top menu -->
-
Match the page file to its purpose
- index.html
- Home page
- articles.html
- Article list
- about.html
- About
- contact.html
- Contact form
Next lesson: Challenge - Advanced text
