`<article>` - independent content block

<article> is a semantic tag in HTML5 used to define independent content blocks, suitable for marking content that can be distributed or reused independently, such as news articles, blog posts, or forum comments. Its design初衷 is to enhance document structure and accessibility.

Basic Definition of <article>

The <article> tag represents an independent content unit within a document, and its content should be self-contained. Even when taken out of context, users should still be able to understand its meaning. Typical use cases include:

• News or blog articles
• Forum posts
• User comments
• Product cards
• Interactive widgets

<article>
  <h2>How to Grow Succulents</h2>
  <p>Succulents thrive in sunny environments and require watering based on the "soak and dry" principle...</p>
</article>

Differences from Other Container Tags

Comparison with <div>

<div> is a generic container with no semantic value, whereas <article> explicitly denotes an independent content unit. Assistive technologies like screen readers prioritize recognizing <article>.

Comparison with <section>

<section> is used for thematic grouping, and its content may not be independent, whereas <article> content should stand alone. An <article> can contain multiple <section> elements:

<article>
  <h2>CSS Grid Layout Guide</h2>
  <section>
    <h3>Basic Concepts</h3>
    <p>Grid layout consists of rows and columns...</p>
  </section>
  <section>
    <h3>Common Properties</h3>
    <p>grid-template-columns defines column widths...</p>
  </section>
</article>

Nesting Guidelines

<article> supports multi-level nesting, making it suitable for scenarios like comment replies. Each nested level should maintain content independence:

<article class="blog-post">
  <h2>Principles of Responsive Design</h2>
  <p>Mobile-first is a core concept in modern web design...</p>
  
  <article class="comment">
    <h3>User A's Comment</h3>
    <p>The viewport units mentioned in the article are very practical...</p>
    
    <article class="reply">
      <h4>Author's Reply</h4>
      <p>Thanks for the addition—the vh unit indeed...</p>
    </article>
  </article>
</article>

Accessibility Enhancements

ARIA Role Supplement

By default, it carries role="article", so no additional declaration is needed. However, for dynamically loaded content, it's recommended to add the aria-live attribute:

<article aria-live="polite">
  <h2>Live Stock Updates</h2>
  <p>Alibaba (BABA): $89.23 ↑1.2%</p>
</article>

Heading Hierarchy Requirements

Each <article> should include a heading element (<h1>-<h6>), and it's advisable to follow a logical hierarchy:

<article>
  <h2>Main Title</h2>
  <article>
    <h3>Subsection Title</h3>  <!-- Increasing hierarchy -->
  </article>
</article>

Practical Use Cases

News Aggregation Page

<main>
  <article class="news-item">
    <header>
      <h2>Quantum Computer Reaches New Milestone</h2>
      <time datetime="2023-05-15">May 15, 2023</time>
    </header>
    <p>Researchers achieved stable operation with 1,000 qubits...</p>
    <footer>
      <a href="/news/123">Read more</a>
    </footer>
  </article>

  <article class="news-item">
    <h2>New Battery Charges 3x Faster</h2>
    <!-- Other content -->
  </article>
</main>

E-commerce Product Listing

<section class="products">
  <article class="product-card">
    <img src="phone.jpg" alt="Smartphone X">
    <h3>Smartphone X</h3>
    <p>6.7-inch AMOLED display, 5000mAh battery</p>
    <button>Add to cart</button>
  </article>
  
  <article class="product-card">
    <img src="laptop.jpg" alt="Ultrabook Pro">
    <!-- Other product details -->
  </article>
</section>

Microdata and SEO Optimization

Enhance search engine understanding with Schema.org markup:

<article itemscope itemtype="https://schema.org/BlogPosting">
  <h2 itemprop="headline">Detailed Guide to HTML5 Semantic Tags</h2>
  <p itemprop="author">By: Developer Li</p>
  <div itemprop="articleBody">
    <p>Semantic tags significantly impact SEO...</p>
  </div>
</article>

Dynamic Content Loading Example

Insert <article> elements dynamically via JavaScript:

fetch('/api/posts')
  .then(response => response.json())
  .then(posts => {
    const container = document.getElementById('posts-container');
    posts.forEach(post => {
      const article = document.createElement('article');
      article.innerHTML = `
        <h3>${post.title}</h3>
        <p>${post.excerpt}</p>
        <span>${new Date(post.date).toLocaleDateString()}</span>
      `;
      container.appendChild(article);
    });
  });

Browser Rendering Characteristics

<article> is displayed as a block-level element by default, with the following styling features:

article {
  display: block;
  margin: 1em 0;  /* Default in most browsers */
}

It's recommended to reset margins for cross-browser consistency:

article {
  margin: 0;
  padding: 0;
  border: 0;
}

Responsive Design Practices

Implement adaptive layouts with CSS Grid:

<style>
  .article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
</style>

<div class="article-grid">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</div>

Integration with Web Components

Use <article> as a Shadow DOM container in custom elements:

class NewsCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const article = document.createElement('article');
    article.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ddd;
        }
      </style>
      <slot name="title"><h3>Default Title</h3></slot>
      <slot name="content"><p>Default Content</p></slot>
    `;
    shadow.appendChild(article);
  }
}
customElements.define('news-card', NewsCard);