In short
A blog page is mostly text, which makes it the perfect place to get headings, articles, images and dates exactly right. Good structure here helps a lot with SEO later.
A static blog post layout with a title, byline, article body and related posts — practice for semantic `<article>`, headings, and long-form content styling. A good blog layout also needs readable typography, metadata, accessible navigation, responsive media, and a content structure that remains understandable when CSS is removed.
Think of it like this
The Sunday newspaper
A newspaper has a masthead on top, headlines, bylines with dates, photos with captions, and side columns for ads and weather. A blog page uses the same pattern, just with HTML tags instead of print columns.
Watch it happen
A blog page, newspaper style
1/4The site header is the masthead: logo and nav, same on every page.
The big ideas
What you need to know
Article with a header
Each post is an <article> with its own <header> holding the title, author and <time>.
Figures with captions
Wrap images in <figure> and add <figcaption>, just like photo captions in a newspaper.
Quotes and code
<blockquote> for quotes, <code> for inline code and <pre><code> for code blocks.
Sidebar is an aside
Related posts and an author bio go in <aside>, outside the main article.
How it works
Build plan
- 1
Write a real post
Pick a topic you know, like your first hackathon, and write 400 words.
- 2
Page skeleton
Header with nav, main with the article, aside for related posts, footer.
- 3
Mark up the post
Headings in order, paragraphs, a figure with caption, a quote.
- 4
Readable typography
Keep lines around 60 to 75 characters wide and the font size comfortable.
See it in code
Walk through the code
1<article>2 <header>3 <h1>What I Learnt at My First Hackathon</h1>4 <p>By Sneha · <time datetime="2026-02-14">14 Feb 2026</time> · 5 min read</p>5 </header>6 7 <p>We had 24 hours, three people and zero sleep...</p>8 9 <figure>10 <img src="team.webp" alt="Our team of three at the demo table" />11 <figcaption>Demo time, running on chai and hope.</figcaption>12 </figure>13 14 <blockquote>Ship something small that works.</blockquote>15</article>1/4The post's header holds the h1, author and a time tag with a machine-readable date.
The post's own <header> sits inside <article>, separate from the site's main <header>. A page can have both.
Save yourself the pain
Common mistakes
Oops
Using <br> tags to create paragraphs.
Do this instead
Each paragraph is its own <p>. Spacing is CSS's job.
Oops
Making the text span the full width of a big monitor.
Do this instead
Limit the content width (around 65ch) so lines stay easy to read.
Your mission
Publish one real post
Quick check
Where should a blog post's author name and publish date go?
Go deeper
- 1Use `<article>`, `<time>` and proper heading hierarchy for the post. Verify the behavior with realistic data and handle the failure or empty state as well.
- 2Practice comfortable reading-width typography (line-length, line-height). Test it with at least one normal case and one edge case so you can explain the behavior confidently.
- 3Add a simple 'related posts' section using semantic list markup.
More projects at this stop
Portfolio
Resume
Product Page
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
