Sections & Articles

After this lesson, you can choose section, article, and aside according to content relationships and independence.

BEGIN WITH A QUESTION

Understanding begins with a question.

A page contains community news, a schedule, and additional notes. They are all parts of the page, but their roles may differ.

Choose section, article, and aside according to content relationships and independence.

UNDERSTAND THE CONCEPT

Section groups a theme

Use section when a group of content has a clear theme, usually with a heading. For example, an ‘Upcoming Activities’ section may contain several events. Do not choose section merely to create a styled box.

Article can stand on its own

Article suits an essay, review, or news item that makes sense independently of its page. A news section may contain several articles. This does not mean every paragraph needs an article wrapper.

Aside provides related, secondary content

Aside holds supplementary information, such as reading tips. It does not have to appear on the right side of the screen. Choose it according to the content relationship, rather than visual position. If a wrapper needs no particular meaning, div remains appropriate.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<main>
  <h1>Reading Garden News</h1>
  <section>
    <h2>Community Stories</h2>
    <article><h3>A New Book Corner</h3><p>We arranged a shelf for young readers.</p></article>
  </section>
  <aside><h2>Reading Tips</h2><p>Rest your eyes regularly.</p></aside>
</main>

BROWSER RESULT

Section groups the stories. Article contains an independent news item. Aside adds related tips outside the core story.

COMMON MISTAKES

<section><section><p>An ordinary sentence.</p></section></section>

A wrapper without a theme adds complexity. Use section for meaningful content groups, usually with a heading.

TRY TOGETHER

Practice clarifies understanding.

01 Which element best wraps a book review that could be published independently?

articlenavaside just because it appears on the left

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Arrange a garden bulletin

Create main with an h1. Inside it, create a section with the h2 ‘Garden News’, an article with an h3 and a paragraph about the harvest, and an aside with an h2 and additional tips.

<main>
  <h1>Garden Bulletin</h1>
  <!-- News and tips groups -->
</main>

index.htmlHTMLLn 1, Col 14 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

Section groups a theme.
Article is a self-contained content unit.
Aside contains supplementary information; visual position does not determine its meaning.

Semantic structureMeaningful text

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

Semantic HTML °Heading °Landmark °

Library: Three languages behind one page ↗

Next lesson →