Headings & Text
Learn how to structure text with headings, paragraphs, and inline emphasis so your pages are readable, meaningful, and SEO-friendly.
Every document in the world — a newspaper, a textbook, a recipe — uses headings and paragraphs to guide the reader. HTML gives you the exact same power. When you mark up text correctly, browsers know what is a title, what is body copy, and what is especially important. So do search engines, screen readers, and every other tool that reads your page. Getting this right is one of the highest-leverage things you can learn.
#The Six Heading Levels
HTML provides six heading tags: <h1> through <h6>. Think of them as the outline of a book — <h1> is the book title, <h2> is a chapter, <h3> is a section inside a chapter, and so on. The number tells the browser (and everyone else) how important and high-level that heading is.
The Outline Analogy
Imagine a school essay outline:
1. Main Topic (h1) 1.1 First Point (h2) 1.1.1 Supporting detail (h3) 1.2 Second Point (h2)
Each level nests inside the one above it. HTML headings work exactly the same way.
<h1>Baking Sourdough Bread</h1>
<h2>Ingredients</h2>
<h3>For the Starter</h3>
<h3>For the Dough</h3>
<h2>Instructions</h2>
<h3>Mixing</h3>
<h3>Proofing</h3>
<h3>Baking</h3>One h1 Per Page
Use only one `<h1>` on each page. It represents the single main topic of that page — like the title of a book. Using multiple <h1> tags confuses search engines and screen readers. Every other heading level can appear as many times as needed.
#Paragraphs with <p>
Body text goes inside <p> tags. Each <p> creates its own paragraph — the browser automatically adds spacing above and below it. You do not need to add blank lines or spaces in your HTML to create that gap; the <p> tag handles it.
<h1>Why Cats Knock Things Over</h1>
<p>
Scientists believe cats swat objects off tables to test whether
they are alive. It is a hunting instinct left over from the wild.
</p>
<p>
It might also just be fun for them. We may never know.
</p>#Inline Emphasis: <strong> and <em>
Sometimes a word or phrase inside a paragraph deserves special attention. HTML gives you two inline elements for this:
- `<strong>` — marks text as important. Browsers render it bold by default. Use it when the reader must notice something.
- `<em>` — marks text as emphasized. Browsers render it italic by default. Use it for stress emphasis, like when you would change your tone of voice.
<p>
<strong>Warning:</strong> Never leave candles unattended.
</p>
<p>
She did not just like the movie — she <em>loved</em> it.
</p>Meaning Over Appearance
Use <strong> and <em> for their meaning, not just to make text bold or italic. If you only want a visual style change with no semantic meaning, use CSS (font-weight: bold or font-style: italic) instead. Screen readers can announce <strong> content with added emphasis — decorative styling does not need that treatment.
#Line Breaks with <br>
Sometimes you need a line break within a paragraph rather than starting a whole new one — for example, in an address or a poem. That is what <br> is for. It is a void element (self-closing, no closing tag needed) that inserts a single line break without adding paragraph spacing.
<p>
Acme Corporation<br>
123 Main Street<br>
Springfield, IL 62701
</p>Do Not Abuse <br>
Do not use <br><br> to create vertical space between sections — that is a job for CSS (margin or padding) or a new <p> element. Stacking <br> tags for spacing is an old habit that makes pages harder to maintain and style.
#Why Heading Structure Matters for SEO
Search engines like Google read your headings to understand what your page is about. A clear hierarchy — one <h1> describing the page topic, <h2> tags for major sections, <h3> for sub-topics — tells the algorithm exactly how your content is organized. Pages with good heading structure tend to rank better and appear more accurately in search results.
Accessibility tools (screen readers used by people with visual impairments) also rely on headings for navigation. A user can jump between <h2> sections the way a sighted user scans headlines. Skipping levels or using headings just to make text big breaks this experience entirely.
You are writing a blog post about coffee. Which heading should appear exactly once and represent the overall topic of the page?
Key takeaways
- Use <h1> once per page for the main topic; nest <h2>–<h6> to create a logical outline.
- <p> wraps body text into paragraphs — the browser handles spacing automatically.
- <strong> signals importance (bold); <em> signals vocal stress (italic) — choose by meaning, not looks.
- Use <br> only for intentional line breaks within content like addresses or poetry, never for layout spacing.
- Good heading hierarchy improves both SEO and accessibility for screen reader users.
How does the browser display this markup?
<h1>Baking Sourdough Bread</h1>
<h2>Ingredients</h2>
<h3>For the Starter</h3>This blog post is meant to have one main topic. What's wrong?
<h1>All About Coffee</h1>
<p>Coffee is a beloved morning ritual.</p>
<h1>Brewing Methods</h1>
<p>There are many ways to brew a cup.</p>Complete the tags so 'Warning:' is marked as important (bold) and 'loved' is marked as vocal stress (italic).
<p><>Warning:</strong> Never leave candles unattended.</p> <p>She did not just like it — she <>loved</em> it.</p>
Arrange these lines so the address renders on separate lines inside a single paragraph.
</p>
Acme Corporation<br>
Springfield, IL 62701
<p>
123 Main Street<br>
Build a short HTML page about your favorite hobby. It must include: one <h1> page title, at least two <h2> section headings, at least one <h3> sub-section, two or more <p> paragraphs, one use of <strong>, one use of <em>, and one <br> used appropriately (e.g. inside an address or a short list of items).
Try it live — edit the code and hit Run to see it rendered: