Understanding the <article> Element

Hi, I'm Ahbab. In this article, I'll teach you about the semantic <article> element in HTML, why it's important, and how to use it effectively in your web pages.

What is the <article> Element?

The <article> element is a semantic HTML5 tag used to represent a self-contained piece of content that could be distributed and reused independently, such as a blog post, news story, forum post, or user comment.

Why Use <article>?

Example: Blog Post with <article>

<article>
    <h2>My First Blog Post</h2>
    <p>This is the content of my blog post.</p>
</article>

In this example, the entire blog post is wrapped in an <article> tag, making it clear that this section is a standalone piece of content.

When Should You Use <article>?

Practice: Try It Yourself

  1. Project: Blog Home Page
    Create a page with three different <article> elements, each representing a different blog post. Give each post a title and a short paragraph.
  2. Project: News Section
    Build a news section for a website using <article> for each news item. Add a headline, date, and summary for each.

Continue Learning

Quick Check

The <article> element is used for a self-contained piece of content that can be reused independently. True or False?