Headings & Paragraphs | Certeli | Certeli

Home/HTML & CSS/Headings & Paragraphs

Lesson 2✏️ Exercise+15 XP

Headings & Paragraphs

Organize text content with headings of different levels and paragraph tags

Headings & Paragraphs — Structuring Text

What Are Headings?

Headings are like the chapter titles and section headers in a book. HTML gives you 6 levels of headings, from

(most important) to

(least important). They help organize content, improve readability, and are critical for accessibility and SEO.

� SEO Tip: Search engines use headings to understand your page structure. Your main topic should be an `
`, subtopics `
`, and so on. Never skip levels!

Syntax

html

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>
<p>This is a paragraph of text. Paragraphs automatically 
have space above and below them.</p>
<p>This is another paragraph.</p>

Tag	Purpose	Size (default)
`<h1>`	Page title — use once per page	Largest
`<h2>`	Major sections	Large
`<h3>`	Subsections	Medium
`<h4>`-`<h6>`	Deep nesting	Small → Tiny
`<p>`	Body text / paragraphs	Normal

How It Works

html

<h1>My Blog</h1>
<p>Welcome to my blog about coding!</p>
<h2>Latest Articles</h2>
<p>Today we learned about HTML headings.</p>
<h3>Why Headings Matter</h3>
<p>Headings make content scannable...</p>

The browser renders this as a clear hierarchy:

**My Blog** (big, bold — the page title)

Welcome to my blog about coding! (normal text)

**Latest Articles** (section header)

Today we learned... (normal text)

**Why Headings Matter** (subsection header)

� **Key rule:** Only use ONE `

` per page. It's the main title. Use `

` and below for everything else.

Why Use Headings?

**Readability** — Break long content into scannable sections

**Accessibility** — Screen readers use headings to navigate

**SEO** — Search engines rank content under headings as more important

**Structure** — Creates a clear outline of your content

Common Mistakes

❌ Wrong	Why	✅ Right
`<H1>Title</H1>`	Tag names should be lowercase	`<h1>Title</h1>`
Multiple `<h1>` on one page	Confuses search engines and screen readers	One `<h1>`, rest `<h2>`+
`<h3>` then `<h1>` (skipping levels)	Shouldn't jump from h3 back to h1 — breaks hierarchy	Use `<h2>` between them
Using `<h1>` because it looks big	Headings are for structure, not just size	Use CSS to style text size

Your Turn!

Create a page with:

` main title: "My Learning Journal"

Two `

` sections: "About Me" and "My Goals"

A `

` paragraph under each section describing yourself

💡Need a hint? (3 available)

#1Use only ONE <h1> per page

#2<h2> is for major sections

#3Put your content in <p> tags, not headings

🔑Show solution (try it yourself first!)

<h1>My Learning Journal</h1>

<h2>About Me</h2>
<p>I'm learning HTML to build websites.</p>

<h2>My Goals</h2>
<p>I want to become a frontend developer.</p>

🌐 HTML Editor

🖼️ Live Preview

← Your First Web Page Next: Links & Images →