How to use the article and section elements in HTML5

The article element is used for self-contained, reusable content like blog posts or comments, while the section element groups thematically related content with a heading; article should be used when content can stand alone, such as in syndication, and section when organizing a document into logical parts, like ingredients or instructions in a recipe; they can be nested, with articles inside sections on news pages or sections inside an article for long-form content, but should not be used interchangeably or for styling purposes, as their purpose is to reflect meaning rather than layout.

The article and section elements in HTML5 help structure content more meaningfully than generic div tags. They improve accessibility, SEO, and maintainability by clearly defining the purpose of different parts of a web page.

When to use the article element

The article element represents a self-contained composition that can be distributed or reused independently. Think of it as a standalone piece of content.

Use <article></article> when:

• The content makes sense on its own, even outside the context of the page
• It could be syndicated (like in an RSS feed)
• It could be copied and pasted into another document and still be meaningful

Common examples include:

• Blog posts
• News stories
• Forum posts
• Product listings
• User comments

<article>
  <h2>How to Bake Bread</h2>
  <p>Published on <time datetime="2024-04-01">April 1, 2024</time></p>
  <p>This is a complete recipe that stands on its own.</p>
</article>

Each comment on a blog post can also be an article, since it's a self-contained unit:

<article>
  <p>Great recipe! I tried it yesterday and it turned out perfect.</p>
  <footer>— Jane Doe</footer>
</article>

When to use the section element

The section element groups related content thematically. It’s a semantic container for parts of a document.

Use <section> when:

• You’re dividing content into logical sections
• The group of content has a heading
• It helps organize a long article or page

A section should typically have a heading (h1–h6) to describe its purpose.

<section>
  <h2>Ingredients</h2>
  <ul>
    <li>Flour</li>
    <li>Water</li>
    <li>Yeast</li>
  </ul>
</section>

<section>
  <h2>Instructions</h2>
  <ol>
    <li>Mix the ingredients...</li>
  </ol>
</section>

Don’t use section just for styling or layout. For that, a div is still appropriate.

How article and section work together

They can be nested. An article can contain multiple sections, and a section can contain articles if each article fits that section’s theme.

Example: a news page

<main>
  <section>
    <h2>Today's Top Stories</h2>

    <article>
      <h3>Local Bakery Wins National Award</h3>
      <p>A small-town bakery just took first place...</p>
    </article>

    <article>
      <h3>City Council Approves New Park</h3>
      <p>The council voted unanimously...</p>
    </article>
  </section>
</main>

Here, the section groups the news articles under a common theme ("Top Stories"), and each article is a standalone news item.

Alternatively, a single long-form article might be divided into sections:

<article>
  <h1>The History of Bread</h1>

  <section>
    <h2>Ancient Origins</h2>
    <p>Bread dates back to prehistoric times...</p>
  </section>

  <section>
    <h2>Medieval Developments</h2>
    <p>During the Middle Ages, bread became...</p>
  </section>
</article>

Key differences at a glance

• article: Independent, reusable content. Ask: “Could this stand alone?”
• section: Thematic grouping. Ask: “Does this group related content under one heading?”

Avoid using them interchangeably. If in doubt, ask whether the content is self-contained (article) or just a thematic part of a larger whole (section).

Basically, think in terms of content meaning, not layout. That’s what semantic HTML is all about.

The above is the detailed content of How to use the article and section elements in HTML5. For more information, please follow other related articles on the PHP Chinese website!