Blog Post Page

The goal of this project is to teach you how to mark up long-form content in HTML. You will build a single blog post page that uses semantic regions, the right text elements for each kind of content, and real links. Do not style the page; styling will be addressed in a later project. Focus here on the structure that a reader, a screen reader, and a search engine will all see.

1. **Page regions**: Use `<header>` for the site name and primary navigation, `<main>` containing a single `<article>` for the post itself, and `<footer>` for closing content like copyright.
2. **One **`**<h1>**` for the post title. Use `<h2>` and `<h3>` for sub-sections inside the article — do not skip levels.
3. **Real text elements**: Use `<p>` for paragraphs, `<ul>` or `<ol>` for lists, `<blockquote>` (with `<cite>` for the source) for quoted text, and `<code>` or `<pre>` for any inline code or code blocks.
4. **Emphasis with meaning**: Use `<em>` for stress and `<strong>` for importance. Avoid using them just to make text italic or bold.
5. **Descriptive link text** on every link. No "click here" or "read more" — the link should describe where it goes.
6. **One image inside the article** wrapped in `<figure>` with a `<figcaption>`. Set a useful `alt` on the `<img>` and remember the caption is not a replacement for the alt text.
7. **Head metadata**: Set `<title>`, `<meta charset>`, `<meta viewport>`, and a meta description summarising the post.

• A single HTML page with header, main, article, and footer regions.
• One `<h1>` for the post title, with `<h2>` and `<h3>` used for real subsections.
• Lists, quotes, and code elements used semantically.
• Descriptive link text on every link.
• A `<figure>` with `<img alt>` and `<figcaption>`.
• Head metadata set, including a meta description.