Headings, Paragraphs, and Text

Introduction

Most web pages are built from headings and paragraphs. Used well, they create a clear outline for readers and search engines. This chapter covers <h1> through <h6>, <p>, line breaks, horizontal rules, and the mistake of using headings only for font size.

Prerequisites

Heading Hierarchy

HTML provides six heading levels:

html
<h1>Page topic</h1>
<h2>Major section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<h5>Minor detail</h5>
<h6>Fine-grained label</h6>

Headings form an outline, not a styling menu. Screen readers and SEO tools use them to understand document structure.

One Main h1 per Page

A typical page has one <h1> that describes the whole page:

Using multiple <h1> elements is allowed in HTML5 in some cases (for example, separate <article> regions), but beginners should stick to one page-level h1 until the layout is more advanced.

Do Not Skip Levels

Bad outline:

html
<h1>Products</h1>
<h4>Pricing</h4>

Better:

html
<h1>Products</h1>
<h2>Pricing</h2>

Skipping from h2 to h4 confuses assistive technology that builds a table of contents from headings.

Warning

Headings Are Not Font Sizes

If you want smaller text, use CSS later. Do not pick <h4> because it “looks right.” Pick the heading level that matches the section depth.

Paragraphs

The <p> element wraps a paragraph of text:

html
<p>HTML describes structure. CSS describes presentation.</p>
<p>JavaScript adds behavior.</p>

Each <p> starts on its own line in the browser’s default style. Paragraphs are for blocks of prose, not for every line break you want visually.

When to Start a New Paragraph

Start a new <p> when you begin a new thought:

html
<p>We ship updates every month.</p>
<p>Read the changelog for details.</p>

Do not use empty <p></p> tags for spacing. Use CSS margin when you learn layout.

Line Breaks with <br>

<br> forces a line break inside flowing text:

html
<p>
  123 Main Street<br>
  Springfield, IL 62704
</p>

Good uses:

  • postal addresses
  • poetry lines
  • short labeled lines where a full paragraph is wrong

Avoid chains of <br> for vertical spacing:

html
<!-- Bad: fake spacing -->
<p>Title<br><br><br>Subtitle</p>

Use CSS for layout spacing instead.

Horizontal Rules with <hr>

<hr> represents a thematic break between sections:

html
<section>
  <h2>Chapter 1</h2>
  <p>Introduction to HTML.</p>
</section>
 
<hr>
 
<section>
  <h2>Chapter 2</h2>
  <p>Links and navigation.</p>
</section>

Browsers draw a horizontal line by default. CSS can restyle or hide it. Semantically, it says “what follows is a separate topic,” not merely “add a line here.”

Combining Headings and Paragraphs

A readable article pattern:

Notice how each heading introduces a section and each paragraph carries one idea.

Common Mistakes

Using headings for bold labels

html
<!-- Incorrect: not a real heading -->
<h3>Email:</h3>
<p>you@example.com</p>

If “Email” is a label, not a document section, use strong text or a description list:

html
<p><strong>Email:</strong> you@example.com</p>

Putting headings inside paragraphs

html
<!-- Incorrect -->
<p><h2>Section</h2></p>

Headings are block-level section titles. Close the paragraph first, then add the heading.

Giant walls of text

Break long copy into paragraphs and subheadings. Readers scan headings first; give them meaningful signposts.

Mini Exercise

Expand your practice page:

  1. One <h1> for the page topic
  2. Two <h2> sections with <p> content under each
  3. One <h3> under the second section
  4. One address or poem-style block using <br>
  5. One <hr> between two themed sections

Preview in the browser and use DevTools to confirm the heading outline looks logical.

FAQ

Can I use only h1 and h2?

Yes. You do not need all six levels. Use only the depths your content actually has.

Is <h1> the same as <title>?

No. <title> is metadata in <head>. <h1> is the visible main heading in <body>. They can share similar wording but serve different roles.

How many paragraphs per section?

As many as you need. One short paragraph is fine; long tutorials may have dozens under one h2.

Should <br> replace <p>?

No. <br> is for exceptions inside a paragraph-like flow. Normal text blocks belong in <p>.

What comes next?

Text semantics and entities — strong, emphasis, code, quotes, and special characters.