Headings & Paragraphs

🌐 HTML5 🟢 Chapter 4 of 37 📂 Phase 02: Syntax & Text 📅 2026 Edition

📌 Covered in this chapter: Headings <h1> through <h6> · Paragraph <p> · Line Breaks <br> · Horizontal Rule <hr> · Document Outline Hierarchy · White Space Collapse

Welcome to Phase 2 (Chapter 4): Headings & Paragraphs! Headings and paragraphs form the structural backbone of written web content. In this chapter, we explore heading hierarchy (<h1> through <h6>), paragraph text blocks (<p>), line breaks (<br>), horizontal rules (<hr>), white space collapsing, and document outline SEO best practices.

1Heading Hierarchy (<h1> to <h6>)

HTML provides 6 levels of headings. <h1> represents the most important top-level page heading, while <h6> is the lowest sub-heading:

HTML — Headings Hierarchy ▶ Run in HTML Editor

<h1>Heading 1 — Main Page Title</h1>
<h2>Heading 2 — Major Section Title</h2>
<h3>Heading 3 — Subsection Title</h3>
<h4>Heading 4 — Sub-subsection Title</h4>
<h5>Heading 5 — Minor Header</h5>
<h6>Heading 6 — Lowest Level Header</h6>

📌 Heading SEO Best Practices

Use exactly one <h1> per page: Reserve <h1> for the main title of your webpage.
Do not skip levels: Do not jump from <h2> directly to <h4>. Maintain sequential nesting.
Do not use headings for text sizing: Use headings for structural meaning, not to make text big or bold. Use CSS for visual styling!

2Paragraphs (<p>) & White Space Collapsing

Paragraphs are defined using the <p> tag. Browsers automatically add vertical margin before and after every paragraph block.

White Space Collapsing: HTML browsers automatically collapse multiple consecutive spaces, tabs, and line breaks into a single space character:

HTML — White Space Collapse Example ▶ Run in HTML Editor

<!-- Browser renders this with single space between words -->
<p>
  This text has       multiple spaces
  and multi-line       breaks in code.
</p>

3Line Breaks (<br>) & Horizontal Rules (<hr>)

Line Break (<br>): Forces a line break within a paragraph without starting a new paragraph block (e.g. addresses or poetry lines).

Horizontal Rule (<hr>): Represents a thematic break or transition between topics, rendered as a horizontal divider line.

HTML — Line Breaks & Horizontal Rules ▶ Run in HTML Editor

<p>
  Our Compiler HQ<br>
  123 Tech Park Avenue<br>
  San Francisco, CA
</p>

<hr>

<p>Next topic begins after the horizontal rule above.</p>

❓ Frequently Asked Questions (FAQ)

Q1: Should I use <br> tags to create vertical space between paragraphs?

No! Do not stack multiple <br><br><br> tags to create layout spacing. Use CSS margins and padding for layout spacing instead.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on HTML5 Standards · Last updated August 2026