Open navigation menu

Article with Rich Content

Structures a blog article with semantic elements including header, time, figure, blockquote, and proper heading hierarchy for content rich pages.

HtmlData Fetching

Code

snippet
<article>
  <header>
    <h1>Understanding Modern Web Development</h1>
    <p class="subtitle">A comprehensive guide to building accessible websites</p>
    <p class="meta">
      By <a href="/authors/jane" rel="author">Jane Doe</a>
      on <time datetime="2025-01-15T10:00:00-05:00">January 15, 2025</time>
      <span class="reading-time">8 min read</span>
    </p>
  </header>

  <p>The web has evolved significantly over the past decade. Let's explore the key concepts.</p>

  <h2>Why Semantic HTML Matters</h2>
  <p>Semantic elements provide meaning to content structure.</p>

  <figure>
    <img src="diagram.png" alt="Diagram showing semantic HTML structure" width="800" height="400">
    <figcaption>Figure 1: Semantic HTML document structure</figcaption>
  </figure>

  <blockquote cite="https://www.w3.org/TR/html52/">
    <p>HTML is the World Wide Web's core markup language.</p>
    <cite>W3C HTML 5.2 Specification</cite>
  </blockquote>

  <h2>Best Practices</h2>
  <ol>
    <li>Use semantic elements over generic divs</li>
    <li>Ensure proper heading hierarchy</li>
    <li>Provide alt text for images</li>
    <li>Use ARIA attributes when needed</li>
  </ol>

  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="/articles/css-grid">CSS Grid Layout</a></li>
      <li><a href="/articles/flexbox">Flexbox Guide</a></li>
    </ul>
  </aside>

  <footer>
    <p>Tags: <a href="/tags/html" rel="tag">HTML</a>, <a href="/tags/a11y" rel="tag">Accessibility</a></p>
  </footer>
</article>

Related Examples