Content updated
By the end, you can…
- Choose heading levels that describe a hierarchy.
- Distinguish paragraphs, line breaks, and thematic breaks.
One idea at a time
A page is easier to understand when its structure matches its ideas. Think of a journal: it has a title, entries, and paragraphs within each entry. HTML describes these relationships so readers can scan the page before deciding which part to read.
Use h1 for the main topic of this small page and h2 for sections within that topic. An h3 belongs under an h2 when you need a smaller subsection. Choose the level by the relationship between ideas, rather than the size of the letters. CSS can change that size later.
Use a separate p element for each paragraph. Use br for a line break that belongs inside the same piece of content, such as an address or poem. An hr marks a thematic break, such as a change of scene. Do not repeat br elements to create layout spacing.
Choose tags by the meaning of the text
Headings describe an outline. Paragraphs hold the writing beneath each heading.
Choose the heading level
<h1>Main topic- Use it for this page's title.
<h2>Section- Two equal sections both use h2.
<h3>Subsection- Use it for a smaller topic within an h2 section. h4 through h6 continue that hierarchy.
<p>Paragraph- Give each separate paragraph its own opening and closing tags.
Use breaks for meaning
<br>Line break within content- Useful in an address or poem. A void element with no closing tag; do not repeat it for layout spacing.
<hr>Change of topic or scene- A thematic break, usually displayed as a line. It is also a void element.
Walk through an example
<h1>My learning journal</h1>
<p>A record of small discoveries.</p>
<h2>Day one</h2>
<p>I made my first page.</p>
<h3>What surprised me</h3>
<p>The browser gives headings a default appearance.</p>
<h2>Day two</h2>
<p>I organized my text into sections.</p>Put this fragment inside body. The h1 names the journal. Day one and Day two are sibling sections, so both use h2. What surprised me belongs inside Day one and uses h3. The paragraph after each heading supplies its content. A heading introduces the following text; it does not wrap that text.
See it happen: try a small change
Compare paragraphs alone with a main heading and a section heading.
Code to notice
<p>My learning journal</p>
<p>Day one</p>
<p>I made a page.</p>Live result
What changed: All three pieces are paragraphs. The title and section are not identified as headings.
Choose a heading by its place in the story
Imagine a notebook with a title, chapters, and smaller topics inside each chapter. Use one h1 for this page's title, h2 for its sections, and h3 for a subsection inside an h2. Sibling sections are topics at the same level in this outline. They use the same heading level; h3 follows h2 in the document rather than being nested between its opening and closing tags. Do not pick h3 just because you want smaller letters.
Compare Storage as a section of its own and as a topic inside Care. Read the headings in order.
Code to notice
<h1>Garden notebook</h1>
<h2>Care</h2>
<p>Water gently.</p>
<h2>Storage</h2>
<p>Keep tools dry.</p>Live result
What changed: Care and Storage are equal sections under Garden notebook: both use h2.
Try it in your browser
In your existing HTML file, replace only the content between the body tags with the journal fragment above. Keep head unchanged. Save and refresh, then read only the headings: Day one and Day two should have equal importance. Heading levels describe an outline; they do not put h3 inside the h2 element.
A common wrong turn
Using a bold paragraph instead of a heading can make the text look important without identifying a section. Do not skip heading levels just to get smaller letters. The h1 through h6 levels communicate a hierarchy; their default appearance can be changed later with styling.
Change one thing
Add a third day with the same heading level as the other days. Give it two paragraphs. Read just the headings aloud: they should describe a sensible outline. Then add a short two-line address in one paragraph using br and compare it with two separate paragraphs.
Your turn: organize a two-day journal
Create a learning journal with one main heading, Day one and Day two sections, and a paragraph in each. Add a smaller What I learned subsection inside Day one. Choose levels by their relationships, not their font sizes.
Try this task in your own HTML file, then save and open it in your browser. The separate practice comes later in the course.
Related practice in the course path
This practice appears in HTML fundamentals, step 9. Follow Continue below to reach it after its prerequisites.
For related guided practice, Structure a study plan gives you starter code, a live preview, hints, and checks. The task above is a separate variation to try in your own project.
- Write a main title, two day sections, and a smaller topic within Day one.
- Choose the heading levels by their relationships and give each topic its own paragraph.
- Read only the headings in order. Both days should have equal importance; the smaller topic should belong beneath Day one.
Go to the source
Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.