Headings and Paragraphs
1. Introduction
Headings and paragraphs are the most fundamental content elements in HTML — together they form the readable backbone of almost every web page. HTML offers six levels of headings for creating clear document hierarchy, while the paragraph element wraps blocks of text. This lesson shows you how to use them correctly for both accessibility and SEO.
2. Concept
The Six Heading Levels
HTML headings range from <h1> (most important) to <h6> (least important). They communicate document outline to browsers, assistive technologies, and search engines. Use them in order — do not skip from <h1> to <h4>.
Headings vs Paragraphs vs Divs
| Element | Semantic Meaning | Typical Use |
|---|---|---|
<h1>–<h6> |
Section headings (hierarchy) | Titles, subtitles, section labels |
<p> |
Paragraph of text | Body copy, descriptions |
<div> |
Generic container (no semantic meaning) | Layout grouping only |
<h1> per page. It should describe the main topic of that page and ideally include the primary keyword for SEO.<h3> just because it is the right font size breaks accessibility.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Headings Demo</title>
</head>
<body>
<h1>Web Development Guide</h1> <!-- One per page -->
<h2>Chapter 1: HTML Basics</h2>
<p>
HTML is the foundation of every web page. It provides
structure and meaning to raw content.
</p>
<h3>1.1 Document Structure</h3>
<p>
Every HTML file starts with a DOCTYPE declaration followed
by the root html element.
</p>
<h3>1.2 Elements and Tags</h3>
<p>
Elements are the building blocks. Tags mark where each
element begins and ends.
</p>
<h2>Chapter 2: CSS Basics</h2>
<p>CSS controls how HTML elements look on screen.</p>
</body>
</html>
4. How It Works
Step 1 — The H1 Anchors the Page
<h1> is the single most important heading. Search engines give it significant ranking weight, and screen reader users often jump directly to it to understand the page topic.
Step 2 — H2 for Major Sections
<h2> elements act like chapter titles. They divide the page into major regions. A table of contents would list these.
Step 3 — H3 for Sub-sections
<h3> sits inside an <h2> section. Continue the pattern with <h4>–<h6> for deeper nesting, but rarely go beyond <h4> in practice.
Step 4 — Paragraphs Carry Body Text
Each <p> is a discrete block of text. Browsers add default top and bottom margins, creating comfortable reading rhythm without any CSS.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Node.js Tutorial | Getting Started</title>
</head>
<body>
<h1>Getting Started with Node.js</h1>
<p>
Node.js is a JavaScript runtime built on Chrome's V8 engine.
It allows you to run JavaScript on the server side, enabling
full-stack JavaScript development.
</p>
<h2>Prerequisites</h2>
<p>Before starting, make sure you have a basic understanding of JavaScript and the command line.</p>
<h2>Installation</h2>
<h3>Windows</h3>
<p>Download the Windows installer from the official Node.js website and follow the setup wizard.</p>
<h3>macOS</h3>
<p>Use Homebrew: run <code>brew install node</code> in your terminal.</p>
<h3>Linux</h3>
<p>Use your distro's package manager, e.g. <code>sudo apt install nodejs npm</code> on Ubuntu.</p>
<h2>Your First Node.js Script</h2>
<p>Create a file named <code>app.js</code> and write <code>console.log('Hello from Node!');</code> then run it with <code>node app.js</code>.</p>
</body>
</html>
6. Common Mistakes
❌ Multiple <h1> elements on one page
<h1>Welcome</h1>
<h1>About Us</h1>✓ One <h1>; use <h2> for subsequent sections
<h1>Welcome</h1>
<h2>About Us</h2>❌ Skipping heading levels
<h1>Main Title</h1>
<h4>Sub-section</h4>✓ Step down one level at a time
<h1>Main Title</h1>
<h2>Sub-section</h2>7. Try It Yourself
8. Quick Reference
| Element | Level / Purpose | Default Size (browser) |
|---|---|---|
<h1> |
Most important heading; one per page | 2em bold |
<h2> |
Major section | 1.5em bold |
<h3> |
Sub-section | 1.17em bold |
<h4> |
Sub-sub-section | 1em bold |
<h5> |
Rarely used | 0.83em bold |
<h6> |
Least important heading | 0.67em bold |
<p> |
Body paragraph | 1em; auto margins top/bottom |