HTML Tag <article>: Description, Usage and Examples

Introduction

The <article> tag is an essential component in HTML used to define self-contained, reusable content within a web page. Whether it’s a blog post, news story, forum post, or another type of site element, the <article> tag ensures semantic structure and clarity, making it an invaluable tool in web design and development.

Designed to encapsulate independent pieces of information, content within the <article> tag is meaningful and can stand alone. For example, an article can be syndicated to other platforms or used as a reference without losing its context.

The <article> tag is a cornerstone of semantic HTML, offering a structured way to present self-contained content. Its simplicity, versatility, and accessibility make it ideal for a wide range of applications, from blogging platforms to news websites.

By leveraging the <article> tag thoughtfully, developers can create modern, engaging, and optimized webpages that meet the demands of today’s digital landscape.

Syntax

The syntax for the <article> tag is simple and straightforward:

<article>
  Content
</article>

Key Characteristics:

Attributes: The <article> tag does not support any specific attributes. However, it can include global attributes like class, id, style, and title for customization and accessibility.
Closing Tag: A closing tag is required, as it defines the content boundary.

Best Practices for <article> Usage

Independent Content: The content within <article> should be self-contained and capable of being repurposed elsewhere. Examples include:
- Blog posts
- News articles
- Product reviews
- Forum discussions
Hierarchical Nesting: <article> elements can contain additional nested articles. For instance, a primary article can include user comments or related articles nested within it.
Global Attributes: Utilize global attributes like id and class to apply styling or identify specific articles for JavaScript manipulation. The aria-label attribute can enhance accessibility by clearly describing the article’s purpose.

Examples of <article> in Action

1. Basic Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Article Example</title>
</head>
<body>
  <article>
    <h2>Exploring the Depths of the Ocean</h2>
    <p>The ocean remains one of the most mysterious and unexplored parts of the planet. From its diverse ecosystems to its role in climate regulation, there is much to learn about the world beneath the waves.</p>
  </article>
</body>
</html>

2. Nested Articles

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Nested Articles</title>
</head>
<body>
  <article>
    <h2>Innovations in Technology</h2>
    <p>Technology continues to evolve, impacting every aspect of our lives.</p>
    <article>
      <h3>Artificial Intelligence</h3>
      <p>AI is transforming industries by automating processes and enhancing decision-making.</p>
    </article>
    <article>
      <h3>Renewable Energy</h3>
      <p>From solar panels to wind turbines, renewable energy technologies are paving the way for a sustainable future.</p>
    </article>
  </article>
</body>
</html>

3. Blog Post with Comments

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Blog Example</title>
</head>
<body>
  <article>
    <h2>Top Travel Destinations in 2025</h2>
    <p>Discover the best places to explore this year, from tropical beaches to bustling cityscapes.</p>
    <footer>
      <p>Published: January 15, 2025</p>
    </footer>
    <article>
      <h3>Comment by Sarah</h3>
      <p>I love this list! Planning to visit Bali this summer.</p>
    </article>
    <article>
      <h3>Comment by James</h3>
      <p>Great suggestions! Can you write about budget travel tips next?</p>
    </article>
  </article>
</body>
</html>

Styling the <article> Tag

article {
  border: 1px solid #ccc;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

article h2, article h3 {
  font-family: 'Arial', sans-serif;
  color: #333;
}

article p {
  font-size: 16px;
  line-height: 1.6;
}

Accessibility Considerations

The <article> tag is inherently semantic, making it accessible for assistive technologies like screen readers. Here are some tips to enhance accessibility further:

ARIA Roles: Use role="article" explicitly for older browsers with limited support for semantic HTML5 tags.
Descriptive Titles: Ensure each article has a unique, descriptive title to provide context.
Skip Navigation Links: Include skip links to allow users to navigate directly to specific articles.

LUXDAD

A platform dedicated to fostering creativity, sharing knowledge, and bring ideas to life. With ideas and creativity through quality content and innovative solutions, we strive to create meaningful experiences that resonate with modern world.

Read About Us

LINKS

About Us Sitemap Crawler