Detailed explanation
HTML’s <section>, <article>, and <aside> describe the purpose of content rather than its appearance. They help developers and assistive technologies interpret a page’s structure, but do not automatically create different visual layouts. The central distinction is editorial: an <article> stands on its own, a <section> groups a topic, and an <aside> contains supporting material outside the main narrative. Interviewers usually expect you to justify the choice from the content, not from where a box appears on screen.
Use <article> for a self-contained composition that could reasonably be reused or distributed independently, such as a blog post, news story, forum post, or user comment. A product card can qualify when it represents a meaningful standalone item, but not every card needs <article>; a decorative summary box may simply need <div>. Independence concerns meaning, not technical behaviour: the browser does not automatically make articles shareable or publish them separately. Articles may contain sections, and related independent contributions, such as comments, may be nested articles.
Use <section> for a thematic grouping within a document or application, normally identified by a heading. For example, a blog article might contain Introduction, Implementation, and Limitations sections. A section need not be independently meaningful, and it is not a generic replacement for <div>. If a wrapper exists only for styling, spacing, or scripting, <div> is usually more appropriate. Choose heading levels explicitly to reflect the hierarchy; placing an <h1> inside a section does not automatically establish a reliable heading hierarchy for assistive technologies.
Use <aside> for content tangentially related to its surrounding content, such as related links, a pull quote, or background notes. Inside an article, it usually supports that article; elsewhere, it can support the broader page. It need not look like a sidebar, and an essential explanation should remain in the main flow. In the supplied example, the article contains the complete post, the section groups its introduction, and the aside offers optional related reading. These elements expose semantics through the accessibility tree: aside typically provides a complementary landmark, while section becomes a region landmark when it has an accessible name.
Key points to remember
- <article> represents a self-contained composition suitable for independent reuse.
- <section> groups a distinct topic and normally has a descriptive heading.
- <aside> contains tangential supporting content, regardless of visual position.
- These elements can be nested according to their content relationships.
- Use <div> for non-semantic wrappers, and CSS to control layout.
Common mistakes candidates make
- Choosing <aside> simply because content appears in a sidebar, even when it is primary content.
- Replacing every <div> with <section> without identifying a distinct topic.
- Assuming semantic containers automatically fix heading levels or guarantee better search rankings.
Likely follow-up questions
Can a section contain articles, and can an article contain sections?
Yes, both arrangements are valid when they match the content. A Latest News section can contain several articles, while one article can contain sections for its introduction, findings, and conclusion.
Does adding a heading make a section an accessibility landmark?
A heading alone does not automatically give its parent section an accessible name. You can use aria-labelledby to reference the heading, making the named section expose a region landmark; reserve this for useful navigational regions.
Should a sidebar containing navigation use aside or nav?
Use <nav> when the content is a major navigation block, regardless of its position. An <aside> can contain a <nav> when that navigation is part of tangential supporting content, but a sidebar layout alone does not justify either element.
Interview tip: Explain the standalone-topic-supporting distinction first, then justify each element using the supplied blog example.