HTML Articles

The HTML <article> element represents independent, self-contained content on a webpage. It is commonly used for blog posts, news articles, tutorials, forum posts, and product reviews.

The <article> element is a semantic HTML element that helps browsers, developers, and assistive technologies understand the purpose of the content. It also makes webpage structures easier to read and maintain.

What Is the HTML Article Element?

The <article> element defines content that can be understood independently of the rest of the webpage. For example, a blog post should make sense even when it is displayed separately from the website’s homepage.

Here is the basic syntax:

<article>
    <h2>Introduction to HTML</h2>
    <p>HTML is used to structure content on webpages.</p>
</article>

In this example, the article contains a heading and a paragraph about HTML.

HTML Article Example

The following example demonstrates how to use the <article> element in a webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML Article Example</title>
</head>
<body>

    <header>
        <h1>Web4Learners</h1>
    </header>

    <main>
        <article>
            <h2>What Is HTML?</h2>
            <p>HTML stands for HyperText Markup Language.</p>
            <p>It provides the structure for webpages.</p>
        </article>

        <article>
            <h2>What Is CSS?</h2>
            <p>CSS controls the appearance and layout
               of webpages.</p>
        </article>
    </main>

</body>
</html>

In this example, two separate <article> elements represent independent educational topics. Each article has its own heading and content.

When Should You Use the Article Element?

The <article> element is useful when content forms an independent unit.

Common examples include:

• Blog posts: Individual articles published on a blog.
• News stories: Separate news reports on a news website.
• Tutorials: Independent lessons explaining programming concepts.
• Forum posts: Individual discussions or user submissions.
• Product reviews: Self-contained reviews of products or services.

You can also include a <header> inside an <article> for its title and publication details, and a <footer> for author information or related details.

HTML Article vs Section

Both <article> and <section> are semantic HTML elements, but they serve different purposes.

<article>	<section>
Represents independent content	Groups related content
Can stand alone	Usually represents a thematic part of a page
Suitable for blog posts and news stories	Suitable for chapters and topic groups

For example, an entire blog post can use <article>, while its individual topics can use <section>.

Learn more about HTML main content to understand how articles fit within the primary content of a webpage.

HTML Article FAQs

Can a webpage contain multiple article elements?

Yes. A webpage can contain multiple articles, such as several blog posts displayed on a homepage.

Is the article element necessary?

No. A webpage can work without it, but using <article> provides clearer semantic structure when the content is independent.

Can an article contain other HTML elements?

Yes. An article can contain headings, paragraphs, images, lists, sections, headers, footers, and other appropriate HTML elements.

Does the article element improve SEO?

It helps describe the structure and meaning of webpage content, but using <article> alone does not guarantee better search rankings.