Key Point: Use <article> for content that could stand on its own, such as a blog post, news article, product review, forum post, tutorial, or other independent content.

1. What is the article Element?

The <article> element is a semantic HTML element used for independent and self-contained content.

<article>

    <h2>Introduction to HTML</h2>

    <p>
        HTML is used to structure web pages.
    </p>

</article>

Output

Introduction to HTML

HTML is used to structure web pages.

2. Purpose of the article Element

The main purpose of <article> is to identify content that can exist independently.

Common examples include:

Blog posts
News stories
Product reviews
Forum posts
Comments
Technical tutorials
Independent documentation content

3. Basic Article Example

<article>

    <h2>Learn HTML</h2>

    <p>
        Learn HTML from basic to advanced concepts.
    </p>

</article>

4. Article with Header

An article can contain a <header> for its introductory content.

<article>

    <header>

        <h2>Introduction to HTML</h2>

        <p>
            Published on October 1, 2026
        </p>

    </header>

    <p>
        HTML is the standard markup language for web pages.
    </p>

</article>

5. Article with Footer

An article can also contain a footer for information related specifically to that article.

<article>

    <header>

        <h2>HTML Basics</h2>

    </header>

    <p>
        Learn the fundamentals of HTML.
    </p>

    <footer>

        <p>
            Updated October 2026
        </p>

    </footer>

</article>

6. Article with Author Information

<article>

    <header>

        <h2>
            Learn HTML From Scratch
        </h2>

        <p>
            Author: Training Team
        </p>

    </header>

    <p>
        HTML provides the structure of a web page.
    </p>

</article>

7. Article with Publication Date

The <time> element can be used to represent the publication date.

<article>

    <header>

        <h2>
            Introduction to HTML
        </h2>

        <p>
            Published:
            <time datetime="2026-10-01">
                October 1, 2026
            </time>
        </p>

    </header>

    <p>
        HTML is used to structure web pages.
    </p>

</article>

8. Multiple Article Elements

A page can contain multiple independent articles.

<main>

    <article>

        <h2>HTML Basics</h2>

        <p>
            Learn HTML fundamentals.
        </p>

    </article>

    <article>

        <h2>HTML Forms</h2>

        <p>
            Learn how to create HTML forms.
        </p>

    </article>

    <article>

        <h2>Semantic HTML</h2>

        <p>
            Learn semantic HTML elements.
        </p>

    </article>

</main>

9. Article Inside Section

A section can contain multiple related articles.

<section>

    <h2>Latest Tutorials</h2>

    <article>

        <h3>HTML Basics</h3>

        <p>
            Learn HTML fundamentals.
        </p>

    </article>

    <article>

        <h3>HTML Forms</h3>

        <p>
            Learn HTML forms and validation.
        </p>

    </article>

</section>

10. Article Inside Main

Articles are commonly placed inside the main content area.

<main>

    <article>

        <h2>Introduction to HTML</h2>

        <p>
            HTML provides structure for web pages.
        </p>

    </article>

</main>

11. Nested Article Elements

Articles can contain related independent content when the document structure requires it.

<article>

    <h2>HTML Tutorial</h2>

    <p>
        Learn HTML step by step.
    </p>

    <article>

        <h3>Student Comment</h3>

        <p>
            The tutorial was easy to understand.
        </p>

    </article>

</article>

Note: Nested articles should only be used when the inner content is genuinely independent or represents a related standalone item, such as a comment associated with an article.

12. Article for a Blog Post

<article>

    <header>

        <h1>
            How to Learn HTML
        </h1>

        <p>
            Author: Web Development Team
        </p>

    </header>

    <p>
        HTML is the foundation of web page structure.
    </p>

    <p>
        Start by learning elements, attributes and forms.
    </p>

    <footer>

        <p>
            Category: Web Development
        </p>

    </footer>

</article>

13. Article for a News Story

<article>

    <header>

        <h2>
            New Web Development Course Announced
        </h2>

        <p>
            Published:
            <time datetime="2026-10-01">
                October 1, 2026
            </time>
        </p>

    </header>

    <p>
        A new web development learning program is now available.
    </p>

</article>

14. Article for a Product Review

<article>

    <h2>
        Product Review
    </h2>

    <p>
        This review covers the main features and usability
        of the product.
    </p>

    <p>
        Overall, the product provides useful features
        for everyday users.
    </p>

</article>

15. Article for a Forum Post

<article>

    <header>

        <h3>
            How do I create a form in HTML?
        </h3>

        <p>
            Posted by Student
        </p>

    </header>

    <p>
        I want to learn how to create HTML forms.
    </p>

</article>

16. Article with Image

<article>

    <h2>
        HTML Document Structure
    </h2>

    <img src="html-structure.png"
         alt="HTML document structure">

    <p>
        This diagram shows the basic structure of an HTML document.
    </p>

</article>

17. Article with Figure

<article>

    <h2>
        HTML Structure
    </h2>

    <figure>

        <img src="html.png"
             alt="HTML structure diagram">

        <figcaption>
            Basic HTML document structure
        </figcaption>

    </figure>

</article>

18. Article in a Blog Listing

<main>

    <section>

        <h2>
            Latest Posts
        </h2>

        <article>

            <h3>
                HTML Basics
            </h3>

            <p>
                Learn the basic concepts of HTML.
            </p>

            <a href="/html-basics">
                Read More
            </a>

        </article>

        <article>

            <h3>
                HTML Forms
            </h3>

            <p>
                Learn how to create HTML forms.
            </p>

            <a href="/html-forms">
                Read More
            </a>

        </article>

    </section>

</main>

19. Article vs Section

Element	Main Purpose
`<article>`	Represents independent, self-contained content.
`<section>`	Groups related content around a common theme.

20. Article vs div

Element	Meaning
`<article>`	Semantic element for independent content.
`<div>`	Generic container without a specific semantic meaning.

21. Article and Accessibility

Semantic article elements provide meaningful structure to independent content and can help assistive technologies understand the organization of a page.

<article>

    <h2>
        HTML Forms
    </h2>

    <p>
        Learn about HTML form controls.
    </p>

</article>

22. Complete Blog Example

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>
        My Blog
    </title>

</head>

<body>

    <header>

        <h1>
            My Web Development Blog
        </h1>

    </header>

    <nav>

        <a href="#">
            Home
        </a>

        <a href="#">
            Tutorials
        </a>

        <a href="#">
            About
        </a>

    </nav>

    <main>

        <section>

            <h2>
                Latest Articles
            </h2>

            <article>

                <header>

                    <h3>
                        HTML Basics
                    </h3>

                    <p>
                        Published:
                        <time datetime="2026-10-01">
                            October 1, 2026
                        </time>
                    </p>

                </header>

                <p>
                    Learn the fundamentals of HTML.
                </p>

                <footer>

                    <p>
                        Category: HTML
                    </p>

                </footer>

            </article>

        </section>

    </main>

    <footer>

        <p>
            © 2026 My Web Development Blog
        </p>

    </footer>

</body>

</html>

23. Common Mistakes

Mistake 1: Using article for every content block

Not every content block needs to be an article. Use <article> when the content can be considered independent or self-contained.

Mistake 2: Using article instead of section

If content is simply a thematic grouping within the current document and is not independently distributable, a <section> may be more appropriate.

Mistake 3: Using div for independent content

When a content block represents a self-contained article, using <article> communicates its purpose more clearly than a generic <div>.

24. Best Practices

Use <article> for self-contained content.
Give articles meaningful headings.
Use a header when an article needs introductory information.
Use a footer for article-specific supporting information when appropriate.
Use <section> when the content is grouped by theme rather than independence.
Do not use <article> only for visual styling.

25. Practice Example

Create a blog page containing two independent articles. Each article should have a title, author, publication date, content, and footer information.

<main>

    <section>

        <h2>
            Latest Articles
        </h2>

        <article>

            <header>

                <h3>
                    Introduction to HTML
                </h3>

                <p>
                    Author: Web Team
                </p>

                <p>
                    Published:
                    <time datetime="2026-10-01">
                        October 1, 2026
                    </time>
                </p>

            </header>

            <p>
                Learn the fundamentals of HTML.
            </p>

            <footer>

                <p>
                    Category: HTML
                </p>

            </footer>

        </article>

        <article>

            <header>

                <h3>
                    HTML Forms
                </h3>

                <p>
                    Author: Web Team
                </p>

            </header>

            <p>
                Learn how to create and validate HTML forms.
            </p>

            <footer>

                <p>
                    Category: HTML Forms
                </p>

            </footer>

        </article>

    </section>

</main>

Summary

The HTML <article> element represents independent and self-contained content such as blog posts, news stories, product reviews, tutorials, and forum posts. Articles can contain headers, footers, headings, images, dates, and other related content. Use <article> when the content can stand on its own, and use <section> for meaningful thematic grouping.

← Previous: Section Next: Aside →