Article and Section Distinction

The previous lesson used section as a named section, showed article in the landmark table, but did not open up the distinction between them. The choice between the two is the most frequently misjudged decision in semantic markup — because it has no visible outcome, and a wrong choice produces no error.

The distinction has a single test, and this lesson defines that test.

The Independence Test

The article element marks a unit of content that is independently distributable. The test is this: if this content got taken out of the document it is in and published on its own somewhere else — in a feed, a list, a reading app — would it keep its meaning?

If it keeps its meaning, article; if not, section.

The test has nothing to do with the content’s type. A newspaper piece can be article; so can a product card, a comment, a log entry, a search result. Conversely, a long document’s “Method” section is not article: taken out, what it is the method of gets lost.

The section element, though, is a thematic grouping. It sets apart a part of the document; its meaning comes from its relationship to the document as a whole. Every part that would form a table-of-contents entry is a candidate for this element.

A Section Must Have a Heading

If a section element has no heading, what it sets apart never got declared. This is the reason for the previous lesson’s rule: a section with no name does not show up in the landmark list, and the element stays functionless.

The script below scans the sectioning elements in a document and reports whether they carry a heading.

// sections.mjs - heading check for sectioning elements
const doc = `
<main>
  <section id="summary">
    <h2>Station Summary</h2>
    <p>The North Slope station is installed at 1840 meters.</p>
  </section>
  <section id="notice">
    <p>Data flow may pause for maintenance.</p>
  </section>
  <article id="record-2">
    <h2>Calibration Record</h2>
    <p>Humidity sensor readjusted.</p>
  </article>
</main>`;

const SECTIONING = new Set(["section", "article", "nav", "aside"]);
const pattern = /<(\/?)([a-z0-9]+)([^>]*)>/g;
const stack = [];
let match;
while ((match = pattern.exec(doc)) !== null) {
  const [, closing, tag, attrs] = match;
  if (closing) {
    if (SECTIONING.has(tag)) {
      const item = stack.pop();
      console.log(
        (item.tag + (item.id ? "#" + item.id : "")).padEnd(18),
        item.heading ? "has heading" : "NO HEADING",
      );
    }
    continue;
  }
  if (SECTIONING.has(tag)) {
    const id = attrs.match(/id="([^"]*)"/)?.[1] ?? "";
    stack.push({ tag, id, heading: false });
  } else if (/^h[1-6]$/.test(tag) && stack.length > 0) {
    stack[stack.length - 1].heading = true;
  }
}

section#summary    has heading
section#notice     NO HEADING
article#record-2   has heading

The second section reports a defect. Its content is a notice, and it is not a thematic section; the right element for a notice block would be div, or — if the notice is meant to be a structural section — a section with a heading added.

This check is not a style preference. An unheaded section does not show up in the previous lesson’s landmark list; while it looks like it splits the document into sections, it does nothing at all.

Nested Articles

An article can contain another article, and this is valid: the inner article relates to the outer one but is also meaningful on its own — comments under a post are the typical example.

<article>
  <h2>Humidity Sensor Calibration</h2>
  <p>The sensor showed a two percent deviation from the reference value.</p>

  <section>
    <h3>Observer Notes</h3>
    <article>
      <h4>Morning measurement</h4>
      <p>Internal condensation was observed.</p>
    </article>
    <article>
      <h4>Evening measurement</h4>
      <p>The deviation did not recur.</p>
    </article>
  </section>
</article>

The structure declares two levels. The outer article is a calibration record; the inner ones are notes taken on that record, and each is readable on its own. The section element connecting the two is not independent — taken out, the information “notes for which record” gets lost.

Heading levels need attention: nesting does not change the heading level on its own. As stated in the Heading Hierarchy lesson, this course counts levels across the document as a whole; inside an article, level does not restart at h1.

An Article’s Metadata

Independent distributability requires the article to carry its own byline: taken out, when it was written and by whom has to go with it. Two elements make this information machine-readable.

The time element marks a date or a duration. The visible text can be written freely; the datetime attribute carries the same value in a defined format.

<article>
  <h3>Humidity sensor readjusted</h3>
  <p>A two percent deviation from the reference value was corrected.</p>
  <footer>
    <p>Record date: <time datetime="2024-03-12T07:30">March 12 morning</time></p>
    <address>Observer: A. Fisher</address>
  </footer>
</article>

datetime’s value has a defined format: the date gets written as YYYY-MM-DD, the time as HH:MM, and the two get joined with T. This format is needed because a free-form writing like “March 12 morning” cannot be sorted or compared.

The address element is not an address, it is contact information: it marks the way to reach the article’s author (or, at the top level, the document’s). It does not get used to mark a postal address.

Decision Criteria

A sequential check resolves most cases.

Question	Answer if yes
Is the content meaningful on its own once taken out?	article
Is it a named section setting apart one of the document’s topics?	section
Is it a supplement that can get detached from the main content, indirectly related?	aside
Is it a grouping purely for presentation?	div

If the first three questions all get answered “no,” the element is unnecessary. Adding a semantic element is not always an improvement: a wrong declaration is more harmful than none, because the tool reading the document trusts it.

Another common mistake is replacing every div element with section. This fills the landmark list with meaningless entries, or, being unnamed, adds nothing and only grows the source.

In the Station Document

Both structures sit together on the measurement station page.

<main id="main-content">
  <h1>North Slope Measurement Station</h1>

  <section aria-labelledby="measured-quantities">
    <h2 id="measured-quantities">Measured Quantities</h2>
    <ul>
      <li>Temperature</li>
      <li>Relative humidity</li>
    </ul>
  </section>

  <section aria-labelledby="calibration-records">
    <h2 id="calibration-records">Calibration Records</h2>

    <article>
      <h3>Humidity sensor readjusted</h3>
      <p>A two percent deviation from the reference value was corrected.</p>
      <footer><p>Observer: A. Fisher</p></footer>
    </article>

    <article>
      <h3>Anemometer bearing replaced</h3>
      <p>Sticking had been observed at low speeds.</p>
      <footer><p>Observer: A. Fisher</p></footer>
    </article>
  </section>
</main>

“Measured Quantities” is a section: taken out, which station’s quantities they are gets lost. Each calibration record, though, is an article: along with its date, action, and observer information, it can get published on its own in another document.

The inner footer elements, as noted in the previous lesson, are not the document’s footer; they are the footer of the article they are in, and do not enter the landmark list.

Summary

• article is a unit of content that keeps its meaning once taken out of the document; the test is not content type, it is independent distributability.
• section is a thematic grouping that sets apart one of the document’s topics, and takes its meaning from its relationship to the document.
• A section with no heading does not show up in the landmark list and declares nothing about what it sets apart.
• Articles can nest; the inner article is related to the outer one, but is also meaningful on its own.
• The wrong semantic element is more harmful than writing none; groupings that fail the first three tests get written with div.

Next Step

The document is sectioned, but it still consists of nothing but text. The measurement station page’s location has to get told with an image, and that image has to carry a counterpart for the reader who cannot see it too. The next lesson takes up the image element: what alternative text should say, how a size declaration affects layout, and how the same image gets served at different sizes for different screens.