HTML Project: Blog Page

HTML Project: Blog Page

Whether you’re writing about apples, AI, or adventures in coding, a blog page gives your voice a home. In this project, we’ll build a semantic, clean, and SEO-ready blog page using just HTML — perfectly suited for beginners.

1. Base Structure and Meta Setup

Let’s start with a standard HTML boilerplate that includes semantic markup and essential metadata.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FruitBlog - Simple Posts About Sweet Things</title>
  <meta name="description" content="A beginner HTML blog layout with posts about apples, bananas, cherries, and more.">
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
</html>

2. Navigation Menu

Use a semantic <nav> block inside your header to guide users to key sections of your site.

<header>
  <h1>FruitBlog</h1>
  <nav>
    <a href="/">Home</a>
    <a href="#about">About</a>
    <a href="#posts">Blog Posts</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

3. Article Sections (Main Blog Layout)

Each blog post should live in its own <article> element. This improves structure and accessibility.

<main id="posts">
  <article>
    <h2>The Best Apple for Baking?</h2>
    <p>Posted on <time datetime="2024-08-12">August 12, 2024</time> by Jane Doe</p>
    <img src="apple-thumb.jpg" alt="A fresh green apple" width="300">
    <p>When it comes to baking, Granny Smith apples are a tart favorite...</p>
    <a href="/posts/apple-baking.html">Read more</a>
  </article>
</main>

[ Clean structure allows each blog post to be independently styled and indexed ]

4. Author Details (Optional Sidebar or Below Article)

<section class="author-box">
  <h3>About the Author</h3>
  <img src="jane.jpg" alt="Jane Doe portrait" width="100">
  <p>Jane writes about seasonal fruits, baking tips, and digital storytelling. She loves cherries.</p>
</section>

5. Responsive Layout Tips

While we’re not using CSS here, your HTML structure should prepare for responsiveness:

  • Wrap articles in a <main> block
  • Use <section> or <aside> for sidebars
  • Group navigation inside <nav> and limit nesting
  • Add alt attributes to all images for accessibility and fallback

6. Multiple Posts Example

<article>
  <h2>Banana Bread Secrets</h2>
  <p>Posted on <time datetime="2024-08-05">August 5, 2024</time> by John Smith</p>
  <img src="banana-thumb.jpg" alt="Sliced banana bread" width="300">
  <p>Banana bread is best with overripe bananas — the browner, the better...</p>
  <a href="/posts/banana-bread.html">Read more</a>
</article>

<article>
  <h2>Why Cherries Are a Summer Superfood</h2>
  <p>Posted on <time datetime="2024-07-30">July 30, 2024</time> by Jane Doe</p>
  <img src="cherry-thumb.jpg" alt="Cherries in a bowl" width="300">
  <p>Rich in antioxidants and flavor, cherries pack a powerful punch...</p>
  <a href="/posts/cherry-superfood.html">Read more</a>
</article>

7. Footer and Contact Section

<footer id="contact">
  <p>© 2024 FruitBlog</p>
  <a href="mailto:hello@fruitblog.com">Email Us</a> |
  <a href="/about.html">About</a>
</footer>

8. Summary

By completing this blog page, you’ve practiced:

  • Using <article> and <section> tags semantically
  • Organizing blog posts with thumbnails and dates
  • Structuring navigation for usability and SEO
  • Preparing for responsive layouts using clean HTML

What’s Next?

Next, we’ll apply CSS styling to this blog layout to enhance typography, spacing, and responsiveness. Ready to bring your blog to life?

QUIZ

Question 1:Which HTML tag is best suited to wrap each individual blog article section for semantic clarity?

Question 2:Including author information within an

Question 3:Which of the following are important considerations when using image thumbnails on a blog page?

Question 4:What is the main benefit of a responsive layout on a blog page?

Question 5:A navigation menu should use semantic elements like

Question 6:Which of the following practices improve a blog’s navigation usability?