Skip to content
Lucia LADDERHTML Fundamentals Chapter 03Loading learning progress…
HTML-03-01 · LESSON 1 / 4 · ± 9 MINUTES
Headings & Paragraphs
After this lesson, you can arrange one main heading, nested subheadings, and paragraphs according to the content hierarchy.
BEGIN WITH A QUESTION
Understanding begins with a question.
When scanning a long article, you look for section headings first. Screen reader users can also navigate directly between headings.
Arrange one main heading, nested subheadings, and paragraphs according to the content hierarchy.
UNDERSTAND THE CONCEPT
Headings map the content
H1 through h6 indicate heading levels. For this simple page, use one h1 as the main heading, h2 for main sections, and h3 for subsections of h2. The number indicates depth, not a font-size preference.
A paragraph communicates one idea
Wrap each idea in p. Pressing Enter repeatedly in the code usually does not create a new paragraph: browsers collapse ordinary whitespace. Create another p element when the idea changes.
Choose levels by their relationships
If ‘Care’ is h2, ‘Watering’ within it makes sense as h3. Do not jump from h1 to h4 just to obtain smaller text. CSS controls presentation; content meaning determines the hierarchy.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<h1>Balcony Garden Guide</h1>
<p>Small spaces can also support growth.</p>
<h2>Preparation</h2>
<p>Choose a pot with drainage holes.</p>
<h2>Care</h2>
<h3>Watering</h3>
<p>Check the growing medium's moisture before watering.</p>BROWSER RESULT
The two h2 headings are peer sections; Watering is one level below Care.
TRY TOGETHER
Practice clarifies understanding.
<>Watering</h3>Show a hint
Go down one level from h2.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
Outline a reading guide
Arrange h1 ‘Comfortable Reading’, h2 ‘Preparation’, h2 ‘Habits’, and h3 ‘Brief Notes’ under Habits. Add at least two meaningful paragraphs.
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
- Arrange h1, h2, h2, then h3 in content order.
- Paragraphs do not change heading levels; place each after the heading it explains.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- Headings declare hierarchy, not size.
- Use p for a new paragraph.
- Keep heading levels consecutive to clarify content relationships.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.