HTML Sections & Articles

Understanding HTML Sections & Articles

The HTML <section> and <article> elements organize meaningful groups of content, but they describe different relationships within a document.

A <section> groups content that belongs together as part of a larger subject, while an <article> represents self-contained content that can generally stand on its own.

The <section> Element

The <section> element represents a thematic grouping of related content within a document. It is useful when a larger subject can be divided into meaningful parts.

<section>
  <h2>HTML Basics</h2>
  <p>Learn the fundamental concepts used to create HTML documents.</p>
</section>

A tutorial, for example, might contain separate sections for syntax, examples, best practices, and a summary because each group contributes to the larger topic of the page.

Sections and Headings

A <section> should generally have a heading that identifies its subject. The heading helps explain why the content belongs together and makes the document structure easier to understand.

<section>
  <h2>HTML Elements</h2>
  <p>HTML elements define the structure and meaning of webpage content.</p>
</section>

<section>
  <h2>HTML Attributes</h2>
  <p>HTML attributes provide additional information about elements.</p>
</section>

If a group of content does not have a meaningful subject that could reasonably be identified by a heading, a semantic <section> may not be the appropriate container.

The <article> Element

The <article> element represents a self-contained composition that can generally be understood or distributed independently from the surrounding page.

<article>
  <h2>Getting Started with HTML</h2>
  <p>HTML provides the structure and meaning of webpage content.</p>
</article>

The word article does not mean the element is limited to traditional news or magazine articles. Its defining characteristic is that the content forms a meaningful, independent unit.

Common Article Examples

The <article> element can be appropriate for many types of self-contained content.

• News stories or magazine articles.
• Blog posts.
• Forum posts.
• User-submitted comments.
• Product listings or cards that can stand independently.
• Independent informational entries or posts.

A useful question is whether the content would still make sense if it were presented separately from the rest of the page. If so, <article> may be appropriate.

<section> vs <article>

The main difference between <section> and <article> is the relationship of the content to the surrounding document.

• Use <section> when the content represents a meaningful part of a larger subject.
• Use <article> when the content forms a self-contained unit that can generally stand on its own.

<section>
  <h2>HTML Tutorials</h2>

  <article>
    <h3>Introduction to HTML</h3>
    <p>Learn the basics of HTML...</p>
  </article>

  <article>
    <h3>HTML Document Structure</h3>
    <p>Learn how an HTML document is organized...</p>
  </article>

</section>

Here, the section groups the broader topic of HTML tutorials, while each article represents an individual tutorial entry that can be understood independently.

Sections Inside Articles

An <article> can contain multiple <section> elements when the self-contained article is divided into meaningful topics.

<article>
  <h1>Learning HTML</h1>

  <section>
    <h2>HTML Elements</h2>
    <p>Learn how elements structure content...</p>
  </section>

  <section>
    <h2>HTML Attributes</h2>
    <p>Learn how attributes provide additional information...</p>
  </section>

</article>

The article remains the independent piece of content, while the sections organize the topics within it.

Articles Inside Sections

A <section> can also contain multiple <article> elements when several independent pieces of content share a broader topic.

<section>
  <h2>Latest Tutorials</h2>

  <article>
    <h3>HTML Links</h3>
    <p>Learn how to create links in HTML.</p>
  </article>

  <article>
    <h3>HTML Images</h3>
    <p>Learn how to add images to webpages.</p>
  </article>

</section>

The section identifies the shared topic, while each article remains a separate piece of content within that group.

<section> vs <div>

The <section> element should not be used simply as a replacement for every <div>. A section carries semantic meaning, while a div is a generic container.

<section>
  <h2>Contact Information</h2>
  <p>Ways to contact our company...</p>
</section>

<div class="example-wrapper">
  ...
</div>

Use <section> when the grouped content forms a meaningful part of the document. Use <div> when you only need a generic container for styling, layout, scripting, or another purpose that does not require additional semantic meaning.

Sections and Articles Example

The following example uses a section to group several related tutorial entries, with each entry marked as an independent article. Experiment by adding another article or by placing sections inside one of the articles.

Sections and Articles Best Practices

• Use <section> for meaningful thematic groups of related content.
• Give sections meaningful headings that identify their subject.
• Use <article> for self-contained content that can generally stand on its own.
• Do not choose <article> simply because content looks like a rectangular card or box.
• Do not replace every generic <div> with a <section>.
• Nest sections inside articles when an independent piece of content contains several distinct topics.
• Nest articles inside sections when several independent items belong to the same broader topic.
• Choose elements according to the meaning of the content rather than their default appearance.

Summary

The HTML <section> element groups related content that forms a meaningful part of a larger subject, while <article> represents self-contained content that can generally stand independently.

Sections can contain articles, articles can contain sections, and both can be nested when the content structure calls for it. The correct choice depends on the relationship and purpose of the content rather than how it appears visually.