--- title: 'Article and Section Distinction' source: 'https://academia.sh/en/courses/web-fundamentals-and-html/article-and-section-distinction' course: 'Web Fundamentals and HTML' language: en updated: '2026-08-17T18:09:32+00:00' license: 'CC BY-SA 4.0' --- # Article and Section Distinction Choosing between article and section with the independent-distributability test, the problem with an unheaded section, and the structure of nested articles. 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. ```js // sections.mjs - heading check for sectioning elements const doc = `

Station Summary

The North Slope station is installed at 1840 meters.

Data flow may pause for maintenance.

Calibration Record

Humidity sensor readjusted.

`; 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. ```html

Humidity Sensor Calibration

The sensor showed a two percent deviation from the reference value.

Observer Notes

Morning measurement

Internal condensation was observed.

Evening measurement

The deviation did not recur.

``` 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. ```html

Humidity sensor readjusted

A two percent deviation from the reference value was corrected.

``` `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. ```html

North Slope Measurement Station

Measured Quantities

Calibration Records

Humidity sensor readjusted

A two percent deviation from the reference value was corrected.

Observer: A. Fisher

Anemometer bearing replaced

Sticking had been observed at low speeds.

``` "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.