Section, Article, Div, and Common Semantics

Introduction

Many beginners ask, "Should this be a section, an article, or a div?" The answer depends on meaning, not appearance. This chapter gives practical rules for choosing between semantic containers and generic wrappers, then introduces useful semantic elements like <time>, <address>, <figure>, <details>, <dialog>, and <data>.

Prerequisites

• Semantic HTML layout
• Text semantics and entities
• Basic comfort with headings and nested elements

The Decision Rule

Ask these questions in order:

1. Is this content independently reusable or distributable? Use <article>.
2. Is this a themed part of a larger page, usually with a heading? Use <section>.
3. Is this only a wrapper for styling, layout, or scripting? Use <div>.

Quick reference:

When to Use <article>

Use <article> for content that could make sense outside the page:

<article>
  <h2>How to Write Better Alt Text</h2>
  <p>Alt text should describe the useful information in an image.</p>
  <footer>
    <p>Published <time datetime="2026-05-25">May 25, 2026</time></p>
  </footer>
</article>

Good examples:

• blog post
• news story
• comment
• forum post
• product review
• documentation article

A list of blog cards can use one <article> per card:

When to Use <section>

Use <section> for a themed group inside a larger page:

<section>
  <h2>Features</h2>
  <p>Everything you need to build clean web pages.</p>
</section>

Good examples:

• "Features" area on a landing page
• "Pricing" area
• "FAQ" area
• chapter section in a long guide
• grouped settings on a dashboard

Bad use:

<!-- Not enough meaning; probably a div -->
<section class="wrapper">
  <button>Save</button>
</section>

If the only reason is styling, use <div>.

When to Use <div>

<div> is a generic block container. It carries no meaning by itself.

Use it for:

• layout wrappers
• grid/flex containers
• grouping elements for CSS
• JavaScript hooks when no semantic wrapper fits

Example:

Here <section> means "Features"; <div class="feature-grid"> only helps layout.

Over-Semantic Markup

Too much semantic markup can be as confusing as none:

Simpler:

<article class="card">
  <h2>Card title</h2>
  <p>Card text.</p>
  <button type="button">Open</button>
</article>

Use the element that adds real meaning. Do not wrap everything in every semantic tag you know.

<time>

<time> represents a date, time, or duration:

<p>
  Published on
  <time datetime="2026-05-25">May 25, 2026</time>.
</p>

datetime gives machines a standard value while visible text stays friendly.

Examples:

<time datetime="14:30">2:30 PM</time>
<time datetime="PT45M">45 minutes</time>
<time datetime="2026-05">May 2026</time>

Good for articles, events, release notes, and schedules.

<address>

<address> contains contact information for the nearest article or page:

<address>
  Contact the author at
  <a href="mailto:editor@example.com">editor@example.com</a>.
</address>

For a business page:

<address>
  Acme Tools<br>
  123 Market Street<br>
  Springfield, IL 62704<br>
  <a href="tel:+15551234567">+1 555 123 4567</a>
</address>

Do not use <address> for every postal address in arbitrary data. It is specifically contact information related to the page or article.

<figure> and <figcaption>

Use <figure> for content that has a caption and can be referenced as a unit:

<figure>
  <img
    src="images/form-layout.png"
    alt="Diagram showing labels beside form controls"
    width="800"
    height="450"
  >
  <figcaption>Figure 1. Labels should clearly identify each field.</figcaption>
</figure>

<figure> is not only for images. It can wrap code, charts, diagrams, or media:

<figure>
  <pre><code>&lt;button type="submit"&gt;Save&lt;/button&gt;</code></pre>
  <figcaption>A real button element for form submission.</figcaption>
</figure>

<details> and <summary>

Create an expandable disclosure widget without JavaScript:

<details>
  <summary>Why learn semantic HTML?</summary>
  <p>It improves accessibility, SEO, and maintainability.</p>
</details>

Open by default:

<details open>
  <summary>System requirements</summary>
  <p>Any modern browser is enough for this tutorial.</p>
</details>

Great uses:

• FAQ answers
• optional details
• advanced notes
• collapsible documentation sections

Do not hide essential content that users must read before acting.

<dialog>

<dialog> represents a modal or non-modal dialog:

<dialog id="confirm-delete">
  <h2>Delete item?</h2>
  <p>This action cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="delete">Delete</button>
  </form>
</dialog>

JavaScript opens it:

const dialog = document.querySelector("#confirm-delete");
dialog.showModal();

This element has improving browser support and better built-in semantics than custom modal <div> patterns. You still need careful focus management for production dialogs.

<data>

<data> connects visible text to a machine-readable value:

<p>
  Product:
  <data value="sku-12345">Wireless Keyboard</data>
</p>

Use it when the visible label differs from a backend identifier, SKU, or structured value. It is less common than <time>, but useful in catalogs and generated pages.

Practical Pattern: Article Card

The class exists for styling; the element names carry meaning.

Mini Exercise

Take a generic card layout and refactor it:

1. Use <article> for each card if it represents standalone content.
2. Use <section> for a group such as "Latest posts."
3. Keep one <div> wrapper only where layout needs it.
4. Add <time> to publication dates.
5. Use <details> / <summary> for one FAQ item.

FAQ

Is <section> always better than <div>?

No. <section> means a themed section, usually with a heading. If you only need a wrapper, use <div>.

Can <article> contain <section>?

Yes. A long article can have multiple sections, each with headings.

Can <section> contain <article>?

Yes. A "Latest posts" section can contain many article cards.

Is <details> accessible?

Modern browser support is good, and it is usually more accessible than custom JavaScript toggles. Still test keyboard and screen reader behavior for critical flows.

What comes next?

Accessibility basics — what accessibility means, why native HTML matters, and how to run simple checks.