Book 3 · Chapter Eight — The Article Page

Part One

What You Will Build

By the end of this chapter, you will have a complete HTML article page — the kind that any news publication could host. It will include every element a professional online article contains:

A publication header with logo and section label
A headline, deck (standfirst), and byline with date
A hero image with caption and photo credit
Structured body text with section headings
A pull quote from a source
An embedded map or video
A key facts box (aside)
Hyperlinks to sources throughout the text
A footer with topic tags

The playground below contains a fully working article template. Your job is to replace every piece of placeholder content with your own real or imaginary story. Use any topic you like — local news, environment, politics, culture, technology.

Tip: Work section by section. Replace the headline first and run it. Then replace the body text. Then swap the image. Build confidence before tackling the embed. There is no time pressure — this editor saves nothing, so keep a copy of your HTML in a text file as you work.

Part Two

The Template — Edit Everything

HTML · Your article — replace all placeholder content

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Your Headline Here</title>
</head>
<body>

<header class="site-header">
  <p class="publication-name">Your Publication Name</p>
  <p class="section-label">Section · e.g. Environment</p>
</header>

<article>

<header class="article-header">
    <h1>Your Main Headline Goes Here</h1>
    <p class="deck">A one-sentence summary that draws the reader in. It expands on the headline and tells the reader why this story matters.</p>
    <p class="byline">
      By <strong>Your Name</strong>  · 
      <time datetime="2026-03-04">4 March 2026</time>
    </p>
  </header>

<figure class="hero">
    <img
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Acropolis_of_Athens_01361.jpg/800px-Acropolis_of_Athens_01361.jpg"
      alt="Describe your photo here — who, what, where"
    />
    <figcaption>
      Your photo caption. Include the essential context and a credit.
      <span class="credit">Photo: Photographer Name / Source</span>
    </figcaption>
  </figure>

<section>
    <p class="lead">Your opening paragraph — the most important paragraph in the article. It should answer the key questions: who, what, when, where, why. Make it strong enough to stand alone.</p>

<p>Your second paragraph expands on the opening. Add context, background, and detail. Link to your <a href="https://example.com" target="_blank" rel="noopener noreferrer">primary source</a> here.</p>

<p>A third paragraph. Continue developing the story. Add a specific fact or statistic: <strong>42% of respondents</strong> said they supported the measure, according to a poll published on <time datetime="2026-03-01">1 March</time>.</p>
  </section>

<blockquote class="pull-quote">
    <p>"This is the direct quote from your source. It should be punchy, specific, and newsworthy — not generic."</p>
    <footer>— Source Name, Title, Organisation</footer>
  </blockquote>

<section>
    <h2>Background</h2>
    <p>Provide the context your reader needs to understand the story. What led to this moment? What has happened before?</p>
    <p>Use <em>italics</em> for titles of publications, films, or foreign-language terms. Use <strong>bold</strong> for key terms you are introducing for the first time.</p>
  </section>

<aside class="fact-box">
    <p class="fact-box-title">Key facts</p>
    <ul>
      <li>Replace this with a key number or statistic</li>
      <li>Another important fact from the story</li>
      <li>A third data point or key date</li>
    </ul>
  </aside>

<section>
    <h2>Where It Happened</h2>
    <p>Use this section for a map, video, or data visualisation that adds context to your story.</p>

<figure>
      
      <iframe
        src="https://www.openstreetmap.org/export/embed.html?bbox=23.70,37.95,23.75,37.99&layer=mapnik"
        width="100%"
        height="280"
        title="Map of the story location"
        style="border: 1px solid #ddd;">
      </iframe>
      <figcaption>Caption for your map or video. Source: OpenStreetMap contributors.</figcaption>
    </figure>
  </section>

<section>
    <h2>What Happens Next</h2>
    <p>Your penultimate section. What are the consequences? What will readers want to follow up on? Who will be affected?</p>
    <p>Add a second quote or a paraphrase of another source's views. Always attribute: <em>according to [source]</em>, or <em>[source] told [publication]</em>.</p>
  </section>

<footer class="article-footer">
    <p class="tags">Tags:
      <a href="#">Tag One</a>  · 
      <a href="#">Tag Two</a>  · 
      <a href="#">Tag Three</a>
    </p>
    <p class="corrections">Corrections: If you spot an error, contact corrections@yourpublication.com</p>
  </footer>

</article>

<footer class="page-footer">
  <p>Your Publication Name  ·  All rights reserved  ·  <time datetime="2026">2026</time></p>
</footer>

</body>
</html>

CSS

/* ── Reset and base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.8;
  color: #111;
  background: #fff;
}

/* ── Publication header ── */
.site-header {
  border-top: 4px solid #111;
  border-bottom: 1px solid #ddd;
  padding: 14px 24px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.publication-name {
  font-family: Georgia, serif;
  font-size: 1.1em;
  font-weight: bold;
  margin: 0;
  letter-spacing: -0.01em;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #888;
  margin: 0;
}

/* ── Article layout ── */
article {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* ── Article header ── */
.article-header {
  padding: 36px 0 0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 24px;
}

h1 {
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -0.025em;
}

.deck {
  font-size: 1.1em;
  line-height: 1.5;
  color: #444;
  margin: 0 0 16px;
  font-style: italic;
}

.byline {
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
  color: #888;
  margin: 0 0 20px;
}

/* ── Hero image ── */
.hero {
  margin: 0 -24px 28px;
}

.hero img {
  width: 100%;
  height: auto;
  display: block;
}

.hero figcaption {
  font-size: 0.8em;
  color: #777;
  line-height: 1.5;
  padding: 8px 24px 0;
  font-family: Arial, Helvetica, sans-serif;
}

.credit {
  display: block;
  color: #aaa;
  margin-top: 2px;
}

/* ── Body text ── */
section { margin-bottom: 8px; }

p { margin: 0 0 22px; }

.lead {
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.7;
}

h2 {
  font-size: 1.25em;
  font-weight: 700;
  margin: 36px 0 10px;
  padding-top: 28px;
  border-top: 1px solid #e0e0e0;
  letter-spacing: -0.01em;
}

a {
  color: #111;
  text-underline-offset: 3px;
}

/* ── Pull quote ── */
.pull-quote {
  border-top: 2px solid #111;
  border-bottom: 2px solid #111;
  margin: 32px 0;
  padding: 20px 0;
  text-align: center;
}

.pull-quote p {
  font-size: 1.3em;
  line-height: 1.4;
  font-style: italic;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.pull-quote footer {
  font-size: 0.82em;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
  color: #666;
}

/* ── Fact box ── */
.fact-box {
  background: #f7f5ef;
  border-left: 3px solid #111;
  padding: 16px 20px;
  margin: 28px 0;
}

.fact-box-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #555;
  margin: 0 0 10px;
}

.fact-box ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.92em;
  line-height: 1.65;
}

.fact-box li { margin-bottom: 5px; }

/* ── Embeds ── */
figure {
  margin: 24px 0;
}

figure iframe {
  display: block;
}

figcaption {
  font-size: 0.8em;
  color: #888;
  margin-top: 6px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

/* ── Article footer ── */
.article-footer {
  border-top: 1px solid #e0e0e0;
  margin-top: 40px;
  padding-top: 18px;
  font-size: 0.83em;
  font-family: Arial, Helvetica, sans-serif;
  color: #888;
}

.tags a {
  color: #555;
  text-decoration: none;
}

.tags a:hover { text-decoration: underline; }

.corrections { margin-top: 8px; color: #bbb; }

/* ── Page footer ── */
.page-footer {
  text-align: center;
  border-top: 1px solid #e0e0e0;
  padding: 28px 24px;
  font-size: 13px;
  color: #bbb;
  font-family: Arial, Helvetica, sans-serif;
}

Live Preview

Part Three

Final Checklist

Before you consider your article page complete, go through this list:

Headline — is it specific, accurate, and does it answer "what happened"?
Deck — does it add information the headline alone does not contain?
Byline — does it include your name, a date, and a <time datetime> attribute?
Hero image — does it have a descriptive alt attribute, a caption, and a photo credit?
Body text — is there at least one hyperlink to an external source? Are all quotes attributed?
Pull quote — is it the most powerful line from a source, not a paraphrase?
Fact box — does it contain specific, verifiable numbers?
Embed — does the map or video have a title attribute and a <figcaption> with a source credit?
Tags — do the tags accurately reflect the content of the story?
Semantics — have you used <article>, <header>, <section>, <aside>, and <footer> appropriately?

Congratulations. You have completed Book 3 — HTML, CSS Basics. You now know how to build a complete, structured, styled article page from scratch — the same building blocks used by every major news website in the world. The next step is to save your HTML as a .html file and open it in a browser, or publish it using a free service like GitHub Pages.

Part Four

Working Locally — VS Code & Live Server

The playground is great for learning, but your real workflow as a journalist-developer will be to write HTML in a proper code editor on your own computer. The industry standard, free editor is Visual Studio Code (VS Code). Pair it with the Live Server extension and your browser will refresh automatically every time you save a file — just like this playground, but for files you actually own.

Step 1 — Download and install VS Code

Go to code.visualstudio.com and click the download button for your operating system.

Mac: Open the downloaded .dmg file, drag the VS Code icon into your Applications folder, then launch it from there.
Windows: Run the downloaded .exe installer and keep all the default options. Make sure "Add to PATH" is checked — it will save you time later.

Step 2 — Install the Live Server extension

Extensions add features to VS Code. You need two minutes to install Live Server:

Open VS Code.
Press Cmd + Shift + X (Mac) or Ctrl + Shift + X (Windows) to open the Extensions panel.
Search for Live Server.
Find the one by Ritwick Dey — it has several million installs — and click Install.

Step 3 — Open your article in VS Code

Click Download in the playground above to get your my-article.zip.
Unzip it — you will find index.html and style.css inside a folder.
In VS Code, go to File → Open Folder and open the unzipped folder. Always open the whole folder, not just a single file — this is important for Live Server to work correctly and for the CSS file to link properly.

Step 4 — Preview with Live Server

In the VS Code file explorer (left panel), right-click index.html.
Select "Open with Live Server".
Your default browser opens the page at http://127.0.0.1:5500.
Now edit and save the file — the browser refreshes automatically every time you press Cmd + S (Mac) or Ctrl + S (Windows).

Two more extensions worth installing while you are there:

Prettier (by Prettier) — automatically formats and indents your HTML and CSS on save, so your code always looks clean.
HTML CSS Support (by ecmel) — autocompletes class names as you type, which speeds up styling significantly.

Publishing online for free

Once your article is saved locally, you can share it with anyone. Two free options require no server knowledge:

Netlify Drop — drag your project folder onto the page and get a public URL in seconds. No account required to try it.
GitHub Pages — free hosting for any HTML files in a GitHub repository. Gives you a permanent, professional URL and a full history of every change you have ever made.

Setting up GitHub Pages — step by step

What is GitHub? GitHub is a platform where you can store files online — code, HTML, CSS, and anything else. Think of it as Google Drive, but designed specifically for web projects. Each project lives in a repository, which is just a folder on GitHub's servers.

What is GitHub Pages? It is a feature built into GitHub that takes the HTML files in a repository and turns them into a live website with a real public URL. You do not need to buy hosting or configure a server — GitHub handles all of that for free.

Why must the file be called index.html? When a browser visits a URL like https://yourusername.github.io/my-article, it does not know which file to show unless you tell it. Web servers are configured to look for a file called index.html by default and display it automatically. If your file is called article.html or anything else, the browser will show a blank error page instead. The Download button above already names the file index.html for you — do not rename it.

How does the repository name affect the URL? The name you give your repository becomes part of the web address. If your GitHub username is mariap and you create a repository named my-article, your page will be published at https://mariap.github.io/my-article. Choose the name carefully — it will be visible in the URL you share with editors and readers.

Create a free account at github.com. Use a professional username — it will appear in the URL of everything you publish.
Create a new repository. Click the + icon in the top-right corner and choose "New repository". Give it a short, descriptive name — for example housing-report or my-articles. Set the visibility to Public (required for GitHub Pages on a free account), then click "Create repository".
Upload your files. On the repository page, click "Add file" → "Upload files". Drag and drop index.html and style.css from your folder onto the upload area. Once they appear in the list, scroll down and click "Commit changes". Your files are now stored on GitHub.
Turn on GitHub Pages. Go to the Settings tab of your repository. In the left sidebar, click Pages. Under Source, select "Deploy from a branch". Set the branch to main and the folder to / (root). Click Save.
Wait one to two minutes, then refresh the Settings → Pages page. A banner will appear with your live URL — something like https://yourusername.github.io/housing-report. Click it to see your published article in the browser, exactly as any reader would.

Updating your article: go back to your repository on github.com, click index.html, then click the pencil icon (Edit this file) to make changes directly in the browser. Click "Commit changes" when done. GitHub Pages will republish automatically within a minute or two. Alternatively, you can upload a new version of the file using "Add file → Upload files" and it will overwrite the old one.

You are ready. HTML and CSS are not just technical skills — they are editorial tools. The ability to write, preview, and publish your own story without relying on a CMS gives you a form of independence that matters in journalism.

Chapter Navigation

You have reached the end of Book 3.

Previous: Chapter 7 Back to All Books