Headings & Paragraphs
Today we look at headings and paragraphs, the outline and the reading text of a page: one main title, section titles under it, and paragraphs for the words people actually read.
- 1
Headings and paragraphs
Last lesson we put extra facts on a tag with attributes. Today we write the text people actually read. A page needs a clear title, section titles under it, and paragraphs of sentences. Those pieces are headings and paragraphs.
Headings use
<h1>through<h6>. Paragraphs use<p>. In the example below you will see oneh1, oneh2, and one paragraph. - 2
The Wall-of-Text Problem: Why Content Needs Scannable Structure
If every line on a page looks the same, nobody can tell what the topic is and where a new section starts. A newspaper solves this with a big headline, then smaller section titles, then the story in paragraphs.
HTML does the same job with signs.
<h1>marks the main title of the page.<h2>marks a section under that title.<p>holds a block of sentences. The browser, and assistive tools, can follow that outline. - 3
How Browsers & Screen Readers Parse the Heading Outline
The browser draws headings larger by default, and it puts space around each paragraph. More important than the look is the meaning: one
h1for the whole page, thenh2, thenh3if you need a smaller section. Do not jump fromh1straight toh4just to change the size. Size is CSS. Order is HTML.Inside a paragraph you may need a new line without starting a new paragraph. That is what
<br>is for. It is an empty element, like the<hr>you saw earlier. In the example, the second sentence starts on a new line because of<br>. - 4
Hands-On: Architecting a Clear Article Outline
Read the short guide below once, then look at the browser pane. You are looking at the same outline: title, section, paragraph.
- 5
The Golden Rule: Headings Are for Structure, Not Sizing
Do not put a heading inside a paragraph. They sit next to each other as separate pieces. And do not use
h1only because you want big bold text. If you need bigger text with no new section, that is a styling job for later, with CSS.
Represents a logical table of contents. Search engines and screen readers rely on this outline to navigate content. Never skip levels (e.g. h1 straight to h4).
Contains body copy. Use <br> only for genuine line breaks within one thought (like addresses or poetry), not to create vertical paragraph gaps.
What you'll learn
- 1Headings h1–h6 are the outline of the page
- 2One h1 as the main title
- 3Paragraphs hold the reading text with p
- 4br makes a new line inside the same paragraph
- 5Do not skip heading levels for size
Line by line
<h1>Train Ticket Guide</h1>The main title of the whole page. Best practice is one
h1per page.<h2>How to book a seat</h2>A section title under the
h1. If you need a smaller title inside this section later, useh3, not a jump toh4.<p> ... </p>A paragraph element. It is a block of sentences. The browser adds space above and below it.
<br>An empty element that starts a new line inside the same paragraph. It is not a new
<p>. A new paragraph would add its own spacing as a separate piece.
Try it yourself
Write a tiny page about a hobby: one <h1> for the hobby name, one <h2> for why you like it, and two <p> tags. Put one <br> inside the second paragraph.
Hint: Do not wrap a heading inside a paragraph. Keep them as separate elements.
Common mistakes
- 1.Using
<h1>only because you want big bold text. Headings are structure. Size is CSS. - 2.Skipping levels, such as
h1thenh4. Keep the outline in order:h1→h2→h3.
Interview prep (Click to reveal)
Q: How many <h1> tags should an accessible webpage have?↓
Standard web accessibility and SEO best practice recommends exactly one <h1> per page representing the overall topic or headline, followed hierarchically by <h2> and <h3> subsections.
Q: What is the semantic difference between <br> and <p>?↓
<p> defines a distinct paragraph of thought with automatic structural margins. <br> produces a forced line break within an existing paragraph (for poems, postal addresses, or lyrics) without splitting the semantic block.
Q: Why is skipping heading levels (e.g. h1 straight to h4) considered an anti-pattern?↓
Heading tags form the document outline. Screen readers generate an interactive table of contents based on this hierarchy. Skipping levels confuses non-sighted users and breaks the logical tree. Use CSS to adjust visual font sizes rather than choosing incorrect heading tags.