An editorial publication that travels

The brief

A local walking group needs a small publication that remains understandable with images unavailable, styles disabled, and pages opened directly from a downloaded folder. Build an issue index and an article about three neighborhood walks. The supplied distances are fictional exercise data, not route advice.

Constraints

• Deliver index.html and walks.html. All internal links must work from the same local folder and when served beneath a subdirectory.
• Give each page a specific title and a meaningful heading hierarchy. An article must make sense outside the index.
• Present the fictional route data as a real table with a caption and explicit row/column headers: Canal loop 2 km, Library loop 1 km, Park loop 3 km.
• Use a text-based route description as the essential content. An optional illustration must add value rather than carry the only directions.
• Include a machine-readable publication date, an in-page contents list, and a corrections/contact section without inventing a working contact form.

1. Model the publication

Semantic HTML describes editorial relationships. An article is independently meaningful; a section groups content under a heading; a navigation landmark provides a route through the publication. Choosing tags by their default appearance hides those relationships.

Your task

Sketch the index and article outline. Identify the main landmark, independent article, route sections, and footer. Give both pages distinct titles and decide which headings belong in the contents list.

Evidence to keep

A page outline with heading levels and a one-sentence rationale for using article instead of a generic container.

2. Make links portable

A root-relative path starts at the host root. A document-relative path follows the file's directory. A fragment points to a unique ID within the selected document. These distinctions matter when the same site is deployed under /newsletter/ or opened from disk.

Your task

Use walks.html from the index, index.html from the article, and fragments such as walks.html#canal for deep links. Give links descriptive text rather than repeating 'read more'.

Evidence to keep

Test every navigation link from both pages, then move the folder beneath another directory and repeat. List the links that would fail if you had used leading slashes.

3. Keep data understandable

A table communicates relationships across two dimensions; a sequence of styled paragraphs does not. scope=col and scope=row identify how a header relates to a cell. A caption identifies the dataset, while prose explains its limitations.

Your task

Create a comparison table from the fictional distances. Include a caption, column headers, route-name row headers, and a paragraph that explicitly identifies the numbers as exercise data.

Evidence to keep

Read one distance in context using its row and column headers. Explain why this table is appropriate for data but inappropriate for laying out the whole page.

4. Audit media and long-form reading

Alternative text is a replacement for an image's purpose in context, not a filename. A detailed map needs equivalent route information in nearby text. A caption can credit or contextualize an image without duplicating its alternative text.

Your task

Write the route descriptions first. For an optional image, write its intended purpose and choose meaningful alt text or empty alt for genuinely decorative content. Keep the reference's text-only baseline usable. If you add a local image, include that asset when publishing your own project.

Evidence to keep

Hide images and styles. Check that the article retains its heading order, route data, and usable navigation. Record the media decision even if you decide no image is necessary.

5. Perform a release audit

Valid markup is only one release criterion. A correct document can still have broken links, unclear titles, misleading factual claims, or keyboard traps introduced by later styling.

Your task

Check titles, language, unique IDs, fragment targets, table headers, fictional-data disclosure, and navigation. Record a keyboard pass and a narrow-viewport check. Submit both HTML files with a self-review and a question about a design decision.

Evidence to keep

A release checklist with observed results—not only checked boxes—and a note about what HTML alone cannot guarantee.

Review rubric

• Information architecture: distinct page titles, one main landmark per page, and headings that reflect editorial structure.
• Portability: all relative page and fragment links resolve from disk and a nested deployment path.
• Data semantics: a caption, column headers, row headers, and an explicit fictional-data disclosure.
• Resilience: route information remains understandable without imagery or CSS; any optional image has a justified text alternative.
• Editorial quality: descriptive link text, a machine-readable date, consistent naming, and a transparent corrections route.

This rubric supports a self-review or a human review. It is not a verified certificate or an automated pass.

Starter files

Download each file into the same folder. Keep your working copy locally; these starter downloads never overwrite your saved course work.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Neighborhood Notes · Issue 1</title>
</head>
<body>
<!-- Build the issue navigation here. -->
</body></html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Three neighborhood walks</title>
</head>
<body>
<!-- Build an independent article, comparison table, and route sections. -->
</body></html>

Reference implementation

Try your own design first. Then compare the decisions, not just the markup.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Neighborhood Notes · Issue 1</title>
</head>
<body>
<header><p>Neighborhood Notes</p></header><main>
<h1>Issue 1: Explore nearby</h1><p>A fictional publication for HTML practice.</p>
<nav aria-label="In this issue"><ul><li><a href="walks.html">Three neighborhood walks: compare the routes</a></li>
<li><a href="walks.html#canal">Go directly to the Canal loop description</a></li></ul></nav>
</main><footer><p>Training content; not real walking directions.</p></footer></body></html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Three neighborhood walks · Neighborhood Notes</title>
</head>
<body>
<a href="#main">Skip to article</a><header><a href="index.html">Neighborhood Notes · Issue 1</a></header>
<main id="main"><article><header><h1>Three neighborhood walks</h1>
<p>Published <time datetime="2026-09-01">1 September 2026</time> · Editorial team</p>
<p>All routes and distances below are fictional exercise data, not travel advice.</p></header>
<nav aria-label="Article contents"><ul><li><a href="#comparison">Compare distances</a></li><li><a href="#canal">Canal loop</a></li><li><a href="#library">Library loop</a></li><li><a href="#park">Park loop</a></li></ul></nav>
<section id="comparison"><h2>Compare the routes</h2>
<table><caption>Fictional neighborhood route distances</caption>
<thead><tr><th scope="col">Route</th><th scope="col">Distance</th></tr></thead><tbody>
<tr><th scope="row">Canal loop</th><td>2 km</td></tr>
<tr><th scope="row">Library loop</th><td>1 km</td></tr>
<tr><th scope="row">Park loop</th><td>3 km</td></tr>
</tbody></table></section>
<section id="canal"><h2>Canal loop</h2><p>In this fictional route, start at the footbridge, follow the canal path to the lock, and return along the opposite bank.</p></section>
<section id="library"><h2>Library loop</h2><p>Start at the library entrance, continue around the town square, and return past the community garden.</p></section>
<section id="park"><h2>Park loop</h2><p>Enter at the north gate, follow the perimeter path past the pond, and return through the central avenue.</p></section>
<footer><h2>Corrections and contact</h2><p>This is a training publication. Replace the placeholder contact editor@example.test with a real editorial contact before publishing a real issue.</p></footer>
</article></main><footer><p><a href="index.html">Back to Issue 1</a></p></footer></body></html>

Take it further

• Add a third article and audit the index again. Avoid a flat list of indistinguishable 'Read more' links.
• Add a local illustration with a figure, credit caption, and nearby text equivalent. Compare the experience with the image blocked.
• Write a translated issue: update document language, link labels, date presentation, and text direction when applicable.