HTML Blog Page Project

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.

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>

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>

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 ]

<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>

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

<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>

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

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

Choose the option that lists all and only the correct statements.

1. Using with descriptive alt text
2. Optimizing image size for fast loading
3. Using CSS to resize large images without optimization
4. Including captions where relevant

Choose the option that lists all and only the correct statements.

1. Sticky navigation bar for easy access
2. Clear and concise anchor text
3. Using inline styles for menu appearance
4. Providing a search feature within the menu

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