Elements, attributes, and nesting

What you will build

Add a progress card and read parent-child relationships from indentation.

Understand the idea first

The hard part is often seeing where an element ends. Think in boxes: an element contains text or other elements. Align siblings and indent children by two spaces.

Build it step by step

<section id="progress" aria-labelledby="progress-title">
  <h2 id="progress-title">Learning progress</h2>
  <p>Now learning: <strong>HTML basics</strong></p>
  <p>Completed: <progress value="2" max="12">2 / 12</progress></p>
</section>

1. Place the code after h1 and before the closing body tag.
2. Trace from <section> to </section>, then check each paragraph.
3. Change the progress value to 3 and update its fallback text too.
4. Temporarily remove a closing paragraph tag, observe browser error recovery, then restore it.

Read the important lines

• section is the parent; the heading and paragraphs are children.
• Attributes live in the opening tag. An id must be unique.
• strong conveys importance rather than merely bold styling.

Common mistakes and what to check

Practice without copying

Add a sibling paragraph with data-status="learning" and mark “practising consistently” as important.

Completion check

• My page contains the required new content
• I can explain the key tags or attributes without the answer
• I deliberately created and fixed at least one error