The HTML <article> Element

Publish in HTML Tutorial el 23/05/2025 15:30

The <article> element represents a self-contained composition in a document, page, application, or site that is independently distributable or reusable. This could be a forum post, a magazine or newspaper article, a blog entry, a product card, or any other independent item of content.

Key characteristics of <article>:

Should make sense on its own
Can be independently distributed or syndicated
Typically contains a heading (<h1>-<h6>) as a child
Can be nested (e.g., blog comments can be articles within the main article)

Basic Syntax

When to Use <article>

Use <article> for content that could stand alone in a different context. For example:

Blog posts
News stories
Forum posts
Product cards
User comments

Examples of <article> Usage

Example 1: Basic Blog Post

A simple blog post structure using <article>:

Play Code

<article>
  <h2>The Future of Web Development</h2>
  <p>Published on <time datetime="2023-05-15">May 15, 2023</time></p>
  <p>Web development continues to evolve rapidly with new frameworks and tools emerging...</p>
  <footer>
    <p>Written by: Jane Doe</p>
  </footer>
</article>

Example 2: News Article

A news article with multiple sections:

Play Code

<article>
  <h2>Major Breakthrough in Renewable Energy</h2>
  <section>
    <h3>Introduction</h3>
    <p>Scientists have achieved a major milestone in solar panel efficiency...</p>
  </section>
  <section>
    <h3>Technical Details</h3>
    <p>The new technology increases efficiency by 25% compared to previous models...</p>
  </section>
</article>

Example 3: Product Card

An e-commerce product card using <article>:

Play Code

<article class="product-card">
  <img src="https://placehold.co/600x200" style="width:100%" alt="Wireless Headphones">
  <h3>Premium Wireless Headphones</h3>
  <p>Experience crystal-clear sound with our noise-cancelling headphones.</p>
  <div class="price">$199.99</div>
  <button>Add to Cart</button>
</article>

Example 4: Article with JavaScript Interaction

An article with a "Read More" button that expands content:

Play Code

<article id="expandable-article">
  <h2>The History of the Internet</h2>
  <p class="summary">The internet has revolutionized communication...</p>
  <div class="full-content" style="display:none;">
    <p>Detailed history content here...</p>
    <p>More details about internet evolution...</p>
  </div>
  <button onclick="toggleContent()">Read More</button>
</article>

<script>
function toggleContent() {
  const content = document.querySelector('.full-content');
  const button = document.querySelector('#expandable-article button');
  
  if (content.style.display === 'none') {
    content.style.display = 'block';
    button.textContent = 'Read Less';
  } else {
    content.style.display = 'none';
    button.textContent = 'Read More';
  }
}
</script>

Example 5: Dynamic Article Loading with JavaScript

Loading articles dynamically from an array:

Play Code

<div id="article-container"></div>

<script>
const articles = [
  {
    title: "Understanding CSS Grid",
    content: "CSS Grid is a powerful layout system...",
    author: "John Smith"
  },
  {
    title: "JavaScript ES6 Features",
    content: "ES6 introduced many new features to JavaScript...",
    author: "Sarah Johnson"
  }
];

function renderArticles() {
  const container = document.getElementById('article-container');
  
  articles.forEach(article => {
    const articleEl = document.createElement('article');
    articleEl.innerHTML = `
      <h2>${article.title}</h2>
      <p>${article.content}</p>
      <footer>By ${article.author}</footer>
    `;
    container.appendChild(articleEl);
  });
}

renderArticles();
</script>

Best Practices and Tips

Nesting: Articles can be nested when appropriate (e.g., comments within a blog post article)
Headings: Each article should typically have its own heading
Semantics: Use <article> only for content that is independently distributable
Accessibility: Articles help screen readers identify independent content sections
Styling: Use CSS to visually distinguish articles when multiple appear on a page