section
A thematic part of a page, usually with a heading.
Platform under construction
HTML Section Elements
Learn section, article, aside as part of the HTML element system: when to use it, how it fits inside a document and what mistakes to avoid.
Sections
Sectioning elements group content by meaning.
section, article and aside help divide content into meaningful blocks. They should not be used only because you need a box for CSS.
A section usually needs a heading. An article should make sense as a standalone piece. An aside should be related but secondary.
Element group:
section, article, aside. Meaningful content regions instead of neutral wrappers. Syntax in context
Choose the sectioning element based on the content relationship.
If the content is a major page part, use section. If it can stand alone, consider article. If it is secondary, use aside.
<section> <h2>Frontend fundamentals</h2> <p>HTML, CSS and JavaScript work together.</p> </section> <article> <h2>New lesson: HTML sections</h2> <p>This update can stand on its own.</p> </article>
Good versus weak
The difference is usually meaning, not only syntax.
Good
<section> <h2>Frontend fundamentals</h2> <p>HTML, CSS and JavaScript work together.</p> </section> <article> <h2>New lesson: HTML sections</h2> <p>This update can stand on its own.</p> </article>
Weak
<section>
<section>
<section>Random wrapper for spacing</section>
</section>
</section>
Rules that matter
Use these rules before publishing real HTML.
Heading first
A section without a heading is often just a div in disguise.
Article stands alone
Use article when the block could be reused independently.
Aside is secondary
Do not put primary page content in aside.
Div is still valid
Use div when you only need a neutral styling wrapper.
Production thinking
HTML is also for accessibility, SEO, security and maintenance.
Why does this matter?
These elements exist so a document can explain its own structure. A section groups one theme, an article can stand on its own and an aside marks supporting content that is related but not the main flow.
Accessibility
Clear section headings help users scan the page and understand where one topic ends and another begins.
Production note
Sectioning elements are excellent in content-heavy pages, documentation, blogs, courses and dashboards with meaningful panels.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Group content by meaning
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?