html · level 2 · unit 4 · lesson 2
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
holds one topic and starts with a heading.
A section is a part of a page about one topic, such as Opening times or Prices. Wrap it in <section> and start it with a heading that names the topic.
Headings inside sections still go in order. Under the page's <h1>, each section starts with an <h2>. A smaller topic inside a section starts with an <h3>.
A box that only groups things for looks is a <div>, not a section. A section with no heading is a sign that something is wrong.
<main>
<h1>Riverside Pool</h1>
<section>
<h2>Opening times</h2>
<p>Every day, 07:00 to 21:00.</p>
</section>
<section>
<h2>Prices</h2>
<p>Adults £5, children £3.</p>
<h3>Family tickets</h3>
<p>Two adults and two children for £14.</p>
</section>
</main>Press show my page to see it here.
An article is a whole piece. A section is one part of something bigger.
guess first
How does this page's outline read?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<h1>Sunny Day Nursery</h1>
<section>
<h2>Our rooms</h2>
<h3>Baby room</h3>
<h3>Toddler room</h3>
</section>
<section>
<h2>Fees</h2>
</section>your turn
Your turn. Add a section.
Add a second section about a topic of your choice, such as Parking. Fill the tag blanks, then give it a heading and a paragraph.
Press show my page to see it here.
- the page has two sectionsnot checked yet
- your section starts with a headingnot checked yet
- your section has a paragraphnot checked yet
fix it
One topic has no real heading. Can you fix it?
Press show my page to see it here.
- both sections start with a headingnot checked yet
- no bold words pretend to be headingsnot checked yet
- Facilities looks a bit like a heading, but is it one? Screen readers will not think so.
- Bold words are not a heading. Each section should start with an
<h2>. - Replace line 7 with
<h2>Facilities</h2>, then press run.
nailed it
your page is split into clear topics. :D
<section>holds one topic.- Start every section with a heading.
- Keep heading levels in order inside sections.
new words in your collection
- section
This lesson isn’t saved. A free account remembers every lesson you finish.