HTML Code
<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset=UTF-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <title>Blog Posts Example</title>
  <style>*{box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background:#f1f5f9;color:#334155;margin:0;padding:1.5rem}h1{max-width:640px;margin:0 auto 1.25rem;font-size:1.75rem;color:#0f172a}main{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}article{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:1.25rem;box-shadow:0 2px 8px rgba(15,23,42,.04);transition:box-shadow .2s,border-color .2s}article:hover{border-color:#cbd5e1;box-shadow:0 6px 20px rgba(15,23,42,.08)}article h2{margin:0 0 .35rem;font-size:1.125rem;color:#1e40af}article p{margin:0 0 .75rem;line-height:1.6;font-size:.9375rem}.post-meta{font-size:.8125rem;color:#64748b;margin:0 0 .5rem}article a{color:#2563eb;text-decoration:none;font-weight:600;font-size:.875rem}article a:hover{text-decoration:underline}</style>
</head>
<body>
  <h1>My Blog</h1>
  <main>
    <article>
      <p class=post-meta>June 5, 2026</p>
      <h2>First Blog Post</h2>
      <p>This is the content of the first blog post. The &lt;article&gt; element wraps independent pieces of content.</p>
      <a href=#>Read more</a>
    </article>
    <article>
      <p class=post-meta>June 6, 2026</p>
      <h2>Second Blog Post</h2>
      <p>This is the content of the second blog post. Each post is contained in its own &lt;article&gt; element.</p>
      <a href=#>Read more</a>
    </article>
    <article>
      <p class=post-meta>June 7, 2026</p>
      <h2>Third Blog Post</h2>
      <p>Here goes the third blog post. Search engines and assistive technologies understand your site structure better with semantic markup.</p>
      <a href=#>Read more</a>
    </article>
  </main>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML article Tag — Multiple Blog Posts
