Project: Blog Article Page

Introduction

A blog article page combines many HTML skills: semantic layout, headings, dates, anchors, code blocks, quotes, images, and SEO metadata. This project builds a realistic article page that can later be styled with CSS or generated by a static site system.

Prerequisites

Project Goal

Build an article page with:

  • article as the main content container
  • time for publication date
  • a table of contents using anchor links
  • headings with logical hierarchy
  • code blocks
  • a block quote
  • an image with caption
  • previous/next navigation
  • title and meta description
  • optional Open Graph tags

Suggested folder:

text
blog-page/
├── article.html
└── images/
    └── semantic-html-diagram.png

Document Head

Start with SEO-friendly metadata:

Use absolute URLs for og:image and og:url when the page is deployed.

Page Shell

The header and footer are site-wide. The article belongs inside <main>.

Article Header

html
<article>
  <header>
    <h1>Why Semantic HTML Matters</h1>
    <p>
      Published
      <time datetime="2026-05-26">May 26, 2026</time>
      by Alex Chen
    </p>
  </header>
</article>

datetime gives machines a standard date. Visible text stays friendly.

Table of Contents

Use page anchors:

html
<nav aria-label="Table of contents">
  <h2>On this page</h2>
  <ol>
    <li><a href="#meaning">Meaning before styling</a></li>
    <li><a href="#accessibility">Accessibility benefits</a></li>
    <li><a href="#example">Example markup</a></li>
  </ol>
</nav>

Targets:

html
<section id="meaning">
  <h2>Meaning before styling</h2>
  <p>HTML elements should describe the role of content.</p>
</section>

Article Sections

Keep sections focused and headings specific.

Code Blocks

Escape HTML examples inside code:

html
<section id="example">
  <h2>Example markup</h2>
  <p>Compare generic wrappers with semantic structure:</p>
 
  <pre><code>&lt;article&gt;
  &lt;h1&gt;Why Semantic HTML Matters&lt;/h1&gt;
  &lt;p&gt;Structure communicates meaning.&lt;/p&gt;
&lt;/article&gt;</code></pre>
</section>

Use pre + code for multi-line code. Escape < and > as &lt; and &gt;.

Quote and Figure

Captions should add visible context; alt should describe the image's useful content.

Previous and Next Navigation

html
<nav aria-label="Article">
  <a href="previous-article.html">Previous: HTML Forms</a>
  <a href="next-article.html">Next: Accessible Navigation</a>
</nav>

This navigation belongs near the end of the article, not in the global site menu.

Complete Article Body

Validation Checklist

  • One page-level <h1>
  • Publication date uses <time datetime="">
  • Table of contents links jump to matching IDs
  • Code examples escape < and >
  • Image has useful alt
  • Figure has a caption when needed
  • Previous/next links are descriptive
  • Meta description matches article topic

FAQ

Should the table of contents be inside the article?

Usually yes if it navigates the article itself. A site-wide sidebar table of contents can also be outside the article in an <aside>.

Can an article contain sections?

Yes. Long articles commonly use sections with h2 headings.

Do I need Open Graph for every blog post?

Public posts benefit from it because shared links look better. Private notes do not need it.

Should code blocks be images?

No. Use real text in pre and code. It is searchable, selectable, and accessible.

What comes next?

Project: product landing page — build a marketing page with hero content, features, comparison table, CTA, and FAQ.