Techie BabajiLearn to Code. Build Real Skills.
HTML · Getting Started

Headings and Paragraphs

Headings and paragraphs are the bones of all written content. Used correctly, they make a page easy to scan for people, screen readers and Google.

Beginner 5 min Lesson 4 of 22 Runnable examplesFollows the WHATWG HTML Living Standard.
Before you start:HTML Elements and Tags
0/22 in HTML
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Use h1–h6 to build a logical outline
  • Write paragraphs and line breaks properly
  • Format text with strong, em, mark, small and code
  • Quote text with blockquote and preserve spacing with pre

Explanation#

There are six heading levels: <h1> is the most important, <h6> the least. Think of them as a table of contents: h1 is the book title, h2 the chapters, h3 the sections inside a chapter.

Do not skip levels (h2 → h4). Screen-reader users jump between headings, and a gap makes them think content is missing.

<p> holds a paragraph. Browsers collapse extra spaces and new lines in your code into a single space, so pressing Enter in your HTML does not create a new line on the page.

Text-level elements add meaning: <strong> = important, <em> = stressed emphasis, <mark> = highlighted, <small> = side comments, <code> = code.

Code example: A well-structured article#

HTMLA well-structured article Runnable
<h1>Learning to Cook</h1>
<p>Cooking is a skill <strong>anyone</strong> can learn.</p>


<h2>Breakfast</h2>
<h3>Poha</h3>
<p>Rinse the poha <em>gently</em>, then add <mark>turmeric</mark> and peanuts.</p>


<h2>Lunch</h2>
<blockquote>“Cook with love and the food will taste better.” — Grandma</blockquote>


<pre>
Step 1   Boil water
Step 2   Add rice
</pre>
<p><small>Recipes tested in 2026.</small></p>
Expected output
A page with a main title, two chapter headings, one sub-heading, formatted text, an indented quote and pre-formatted lines that keep their spacing.
Opens this example in the full playground

Step-by-step explanation#

  1. One <h1> names the whole page.
  2. <h2> “Breakfast” and “Lunch” are chapters; <h3> “Poha” is a section within Breakfast.
  3. <strong> and <em> add meaning, not just bold and italic looks.
  4. <mark> highlights a key word, like a highlighter pen.
  5. <blockquote> is for a quotation from another source.
  6. <pre> keeps every space and line break exactly as typed.

Real-world use case#

Blog posts, documentation and product descriptions all depend on a clean heading outline. Google uses headings to understand what each part of the page is about.

Common mistakes#

Choosing a heading for its size

Picking <h4> because it “looks the right size” breaks the outline. Pick the level by structure and change the size with CSS.

Empty paragraphs for spacing

<p></p> or <p>&nbsp;</p> just to add space is a hack. Use CSS margin.

Using <b> and <i> everywhere

<b> and <i> only change style. Prefer <strong> and <em> when the text is actually important or emphasised.

Best practices#

  • One <h1> per page
  • Never skip heading levels when going down
  • Keep paragraphs short — 2 to 4 sentences read best on screens
  • Use semantic text elements (strong, em) over purely visual ones (b, i)

Remember this#

Headings = table of contents. h1 book title → h2 chapters → h3 sections.

Browsers squash whitespace. Enter in code ≠ new line on page (except inside <pre>).

strong = “this matters”, em = “say this word differently”.

Practice exercise#

Your task: Create a mini recipe page: an h1 recipe name, an h2 “Ingredients”, an h2 “Method”, and a paragraph under each. Make one word important.

Need a hint?
Two h2 elements at the same level, because Ingredients and Method are both chapters of the recipe.
Show solution
HTML Runnable
<h1>Masala Chai</h1>
<h2>Ingredients</h2>
<p>Tea leaves, milk, water, ginger and cardamom.</p>
<h2>Method</h2>
<p>Boil the water with ginger, add tea, then milk. <strong>Do not</strong> let it boil over!</p>
Opens this example in the full playground

Mini quiz#

Headings and Paragraphs quizMultiple choice Question 1 of 3

How many <h1> elements should a typical page have?

Score so far: 0/0

Want more? Practise all HTML MCQs · HTML interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.