section — Complete Guide
section — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 36 of 100
section
Basics ✓ → Forms & semantics → APIs & performance → Projects
Forms & semantics · 2 — Forms, SEO, a11y · ~6 min · HTML — Semantic HTML & SEO
What is this?
section groups thematic content with a heading — not a generic styled box.
Why should you care?
MarkupVerse landing pages section Pricing, Features, and FAQ.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<section aria-labelledby="pricing-h">
<h2 id="pricing-h">Pricing</h2>
<p>Simple plans for growing teams.</p>
</section>
<section aria-labelledby="faq-h">
<h2 id="faq-h">FAQ</h2>
…
</section>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- If there’s no heading, ask whether a div is enough.
- aria-labelledby ties the section to its title.
Practice next
- Two sections with h2.
- aria-labelledby.
- Avoid section without heading.
- Add Features section.
- Collapse FAQ with details later.
Remember
Thematic groups. Need a heading. Prefer div for pure style.
MarkupVerse landing sections
Pricing + FAQ sections.
Outcome: Outline and landmarks clearer.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
