HTML Tutorial

HTML Tag: <article>

The <article> tag represents a self-contained and independent piece of content that can stand alone, such as a blog post, news article, or product description.

Usage of <article>

  • Use <article> to structure a distinct section of content within a web page.
  • <article> elements can be nested within other sections, such as <header>, <section>, or <div>.

Attributes of <article>

  • id: A unique identifier for the article.
  • class: A class name to style the article.

Examples with <article>

<article>
  <header>
    <h1>News Article</h1>
  </header>
  <section>
    <p>...</p>
  </section>
</article>

<div class="container">
  <article id="blog-post-1">
    <header>
      <h1>Blog Post 1</h1>
    </header>
    <section>
      <p>...</p>
    </section>
  </article>
  <article id="blog-post-2">
    <header>
      <h1>Blog Post 2</h1>
    </header>
    <section>
      <p>...</p>
    </section>
  </article>
</div>

Exploring the <article> tag

<!DOCTYPE html>
<html>
<head>
  <title>Article Tag</title>
</head>
<body>
  <article>
    <header>
      <h1>Welcome to My Blog</h1>
    </header>
    <section>
      <p>This is my first blog post. I'm excited to share my thoughts and experiences with you.</p>
    </section>
  </article>
</body>
</html>