Skip to content
Lucia LADDERHTML Fundamentals Chapter 02Loading learning progress…
HTML-02-03 · LESSON 3 / 4 · ± 10 MINUTES
Nesting & Void Elements
After this lesson, you can repair nesting and use void elements and boolean attributes correctly.
BEGIN WITH A QUESTION
Understanding begins with a question.
Imagine two nested boxes. Close the inner box before the outer one. HTML also needs orderly relationships to preserve meaning.
Repair nesting and use void elements and boolean attributes correctly.
UNDERSTAND THE CONCEPT
Parent and child
In <p>Bring <strong>water</strong>.</p>, p is the parent and strong is the child. Close strong before closing p. Strong marks the word as important; p still wraps the entire sentence. Indentation helps people read, but tags establish the relationship.
Not every element wraps content
Img, br, hr, input, and meta are void elements. They have neither child content nor closing tags. Br marks a meaningful line break, such as in an address; hr marks a thematic change. Do not use repeated br elements to create layout spacing.
A boolean attribute is enabled by its presence
Attributes such as disabled and required are enabled when present. Disabled="false" still disables a control because the attribute exists. Remove the attribute to turn that behavior off. Required is covered in the forms chapter.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<p>Remember: <strong>bring water</strong> before leaving.</p>
<hr>
<p>City Garden<br>8 Kenanga Street</p>
<input type="text" aria-label="Example disabled input" disabled>BROWSER RESULT
Strong closes before p. Hr, br, and input have no closing tags; disabled appears without a value.
TRY TOGETHER
Practice clarifies understanding.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
Repair the reminder
Repair strong nesting inside the paragraph and remove the br closing tag. Keep ‘gloves’ inside strong, one br for the address, and hr as a thematic break.
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.
Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.
STEP-BY-STEP HINTS
- Close inner elements first.
- The first part ends with </strong></p>. Write br simply as <br>.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- Close children before their parent.
- Void elements have neither children nor closing tags.
- Boolean attributes are enabled by being present, not by having the value true.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.