HTML Tutorial
HTML Project: Blog Article
A single article with a header, byline, sections, a quote, and a related-links footer.
What you will build
One essay page: why a paper notebook still earns a place on a desk. The article has a header, a machine-readable date, three h2 sections, a blockquote, and a footer of related links.
This is not a home page of cards. It is one article that could be syndicated on its own. The page chrome stays thin so the reading column is the point.
Open examples in /html/try with Try it in HTML. You are checking headings and quotes, not running a script.
Tags you will use
| Tag | Job on this page |
|---|---|
article | The whole post |
header | Title, author, and date |
time | Visible date plus a datetime value |
h1 and h2 | Post title, then three section titles |
blockquote | A quoted line that is not your own prose |
footer | Related links for the post, not the whole site |
Build in slices
Start with the header. The datetime attribute is the canonical date. The text insidetime is what readers see.
Example
<article>
<header>
<h1>Why I still keep a paper notebook</h1>
<p>
By Imani Cole.
<time datetime="2026-03-12">12 March 2026</time>
</p>
</header>
</article>Then add one section and a quote. A blockquote is for someone else’s words, or for a line you want to set apart as a pull. Do not use it only to indent.
Example
<section>
<h2>The page does not ping</h2>
<p>
A notebook does not badge, refresh, or ask for a password. That silence is the feature.
</p>
<blockquote>
<p>Ink is slower than a cursor. Slower is the point.</p>
</blockquote>
</section>Three h2 headings should outline the post if you read them alone. If they do not, rename them before you style the column. Check the outline in /html/try.
Complete document
Header, three sections, quote, related footer. Narrow type, generous line height, a left rule on the quote.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Why I still keep a paper notebook</title>
<style>
body {
margin: 0;
background: #f7f4ee;
color: #1c1917;
font-family: Georgia, "Times New Roman", serif;
}
article {
max-width: 38rem;
margin: 0 auto;
padding: 1.6rem 1.2rem 2.4rem;
line-height: 1.6;
}
header p { color: #57534e; }
h2 { margin-top: 1.6rem; }
blockquote {
margin: 1.2rem 0;
padding: 0.2rem 0 0.2rem 1rem;
border-left: 4px solid #b45309;
color: #44403c;
}
footer {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #d6d3d1;
}
footer ul { padding-left: 1.1rem; }
a { color: #9a3412; }
</style>
</head>
<body>
<article>
<header>
<h1>Why I still keep a paper notebook</h1>
<p>
By Imani Cole.
<time datetime="2026-03-12">12 March 2026</time>
</p>
</header>
<section>
<h2>The page does not ping</h2>
<p>
A notebook does not badge, refresh, or ask for a password. That silence is the feature.
I can open a page in a queue and still be in the queue, not in a feed.
</p>
<blockquote>
<p>Ink is slower than a cursor. Slower is the point.</p>
</blockquote>
</section>
<section>
<h2>Search is worse, memory is better</h2>
<p>
I cannot grep a notebook. I can remember that the idea about river walls sat under a coffee ring
in March. Spatial memory is a real index. It is just not a search box.
</p>
</section>
<section>
<h2>What I refuse to copy out</h2>
<p>
Passwords stay out. Long quotes stay out. The notebook is for sentences I am still forming, not for
a backup of the internet. If a note matters later, I type it once, on purpose.
</p>
</section>
<footer>
<h2>Related</h2>
<ul>
<li><a href="#pens">Three pens that do not skip</a></li>
<li><a href="#margin">How I mark a margin</a></li>
<li><a href="#index">A homemade index page</a></li>
</ul>
</footer>
</article>
</body>
</html>A second complete article
Same landmarks, a different subject. Keep the date on time. Keep three sections and a related list.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The library hour I protect</title>
<style>
body { margin: 0; background: #0f172a; color: #e2e8f0; font-family: "Segoe UI", sans-serif; }
article { max-width: 36rem; margin: 0 auto; padding: 1.5rem; line-height: 1.55; }
time, header p { color: #94a3b8; }
blockquote { border-left: 3px solid #38bdf8; padding-left: 0.9rem; color: #cbd5e1; }
a { color: #7dd3fc; }
footer { border-top: 1px solid #334155; margin-top: 1.5rem; padding-top: 0.8rem; }
</style>
</head>
<body>
<article>
<header>
<h1>The library hour I protect</h1>
<p>By Noor Hale. <time datetime="2026-05-02">2 May 2026</time></p>
</header>
<section>
<h2>Arrive before the rush</h2>
<p>The reading room is honest at nine. Chairs are still cold. Nobody is performing focus yet.</p>
<blockquote><p>A reserved desk is a contract with yourself.</p></blockquote>
</section>
<section>
<h2>One bag rule</h2>
<p>Notebook, two pens, a bottle. If it does not fit, it does not come. Phones stay in the locker.</p>
</section>
<section>
<h2>Leave on the hour</h2>
<p>Stopping is part of the habit. I close the book mid-sentence so tomorrow has a hook.</p>
</section>
<footer>
<h2>Related</h2>
<ul>
<li><a href="#hours">Quiet floor hours</a></li>
<li><a href="#desks">Which desks get morning light</a></li>
</ul>
</footer>
</article>
</body>
</html>Common mistakes
- A visible date with no
datetime. “Last Tuesday” is not a value a machine can sort. - Using
h1again for each section. The post title is the onlyh1. - A blockquote with no quote inside, just styled text. If it is your voice, keep it in a
p. - Related links in the site footer only. Put post-specific links in the article footer.
- Skipping
articleand dumping the essay inbody. The post should be nameable.
Practice tasks
- Change the title, author, and
datetimeto a post you would actually write. - Rewrite the three
h2texts so they still form a three-beat outline. - Add a fourth related link in the footer. Preview the column at /html/try.