Headings & Paragraphs — Module 01 | Frontend Learning Roadmap

1. Introduction

Text is the most common type of content on the web. Almost every web page has headings and paragraphs — they are as fundamental to web pages as they are to books and newspapers.

HTML gives you a set of text elements that do more than just display words. They give your content meaning and hierarchy. Search engines, screen readers, and browsers all use this meaning to understand your content.

2. Theory

Heading Elements: h1 to h6

HTML has six levels of headings — from <h1> (most important) to <h6> (least important). They form a hierarchy, like chapters and subchapters in a book.

Tag	Role	Use Case
`<h1>`	Main page heading	Page title — use only once per page
`<h2>`	Major section heading	Section titles
`<h3>`	Subsection heading	Subsections within a section
`<h4>`	Sub-subsection	Deeper subsections
`<h5>`	Minor heading	Rarely used
`<h6>`	Least important heading	Very rarely used

Browsers display headings in decreasing size by default. But do not choose headings based on size — choose them based on hierarchy. CSS controls the visual size.

Paragraph Element: <p>

The <p> element defines a block of text (a paragraph). Browsers automatically add space above and below each paragraph.

Inline Text Formatting

Inside paragraphs, you can emphasise or format specific words using inline elements:

Tag	Meaning	Default Appearance
`<strong>`	Important text	Bold
`<em>`	Emphasised text	Italic
`<mark>`	Highlighted text	Yellow background
`<small>`	Small print	Smaller text
`<del>`	Deleted text	Strikethrough
`<ins>`	Inserted text	Underline
`<code>`	Computer code	Monospace font
`<sub>`	Subscript	H₂O
`<sup>`	Superscript	x²

Line Break and Horizontal Rule

<br> — inserts a single line break. Use sparingly. Do not use multiple <br> tags to add space — use CSS margin instead.

<hr> — inserts a horizontal divider line. Use to separate thematic sections of content.

3. Real World Example

Look at a Wikipedia article. It has:

One big title at the top — this is the <h1>
Section titles like "History", "Characteristics" — these are <h2>
Subsection titles within those sections — <h3>
Paragraphs of text under each heading — <p>
Bold and italic words within paragraphs — <strong> and <em>

This heading hierarchy also helps Google understand your page structure and display it correctly in search results.

4. Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>About Elephants</title>
</head>
<body>

  <h1>Elephants</h1>
  <p>Elephants are the <strong>largest land animals</strong> on Earth. They are known for their <em>intelligence</em> and strong family bonds.</p>

  <h2>Types of Elephants</h2>
  <p>There are <mark>three species</mark> of elephants alive today.</p>

  <h3>African Bush Elephant</h3>
  <p>The largest of the three species. Found in sub-Saharan Africa.</p>

  <h3>African Forest Elephant</h3>
  <p>Smaller than the bush elephant. Lives in the rainforests of Central Africa.</p>

  <h3>Asian Elephant</h3>
  <p>Found across Asia. Has smaller ears than African elephants.</p>

  <hr>

  <h2>Interesting Facts</h2>
  <p>Elephants can live up to <strong>70 years</strong> in the wild.<br>
  They communicate using infrasound — sounds too low for humans to hear.</p>

  <p><small>Source: Wildlife Foundation, 2024</small></p>

</body>
</html>

5. Code Breakdown

Code	What It Does
`<h1>Elephants</h1>`	The single main title of the page. Large and bold by default.
`<strong>largest land animals</strong>`	Makes this phrase bold AND marks it as important (semantic meaning).
`<em>intelligence</em>`	Italicises the word AND marks it as emphasised.
`<mark>three species</mark>`	Highlights the text with a yellow background.
`<hr>`	A horizontal line separating the two main sections. Self-closing — no content inside.
`<br>`	Line break within a paragraph. The next word starts on a new line without a gap.
`<small>`	Smaller text — used for disclaimers, fine print, captions.

6. Common Mistakes

Mistake 1 — Using multiple <h1> tags

Each page should have exactly one <h1> — the main title. Multiple <h1> tags confuse search engines and screen readers. Use <h2> for section headings.

Mistake 2 — Skipping heading levels

Do not jump from <h1> straight to <h4>. Maintain a logical hierarchy: h1 → h2 → h3. Screen readers navigate pages using heading levels.

Mistake 3 — Using <b> and <i> instead of <strong> and <em>

<b> makes text visually bold. <strong> makes it bold AND marks it as important. Prefer semantic tags (<strong>, <em>) — they communicate meaning to search engines and assistive technology.

Mistake 4 — Using <br> for spacing

Do not use <br><br><br> to add vertical space. Use CSS margin instead. <br> is for line breaks within content (like an address or poem).

7. Best Practices

One <h1> per page — it is the most important heading and search engines weight it heavily.

Keep heading hierarchy logical — h1 → h2 → h3 in order. Never skip levels.

Use semantic tags — prefer <strong> over <b>, <em> over <i>. Both look the same but semantic tags carry meaning.

Keep paragraphs short — online readers scan pages. Short paragraphs (3–5 sentences) are easier to read than large walls of text.

8. Practice Exercise

Create a file called article.html and build a short article about any topic you like. It must include:

One <h1> — the article title
At least two <h2> sections
One <h3> inside one of the sections
At least three <p> paragraphs
At least one use of <strong>, one <em>
One <hr> divider
A <small> footer with the source or date

9. Assignment

Build a "Recipe Page" with proper HTML text structure. Requirements:

<h1> — Recipe name
<h2> — "Description" section with a paragraph
<h2> — "Ingredients" section (we will add the list in the next lesson)
<h2> — "Instructions" section with numbered steps as paragraphs for now
Use <strong> to highlight important quantities (e.g. "2 cups")
Use <em> for tips
An <hr> before a "Notes" section at the bottom

10. Interview Questions

Q1: What is the difference between <h1> and <h6>?

Answer: <h1> is the highest-level heading — most important, largest by default. <h6> is the lowest-level heading — least important, smallest by default. They define a hierarchical structure for content. Search engines and screen readers use this hierarchy to understand page structure.

Q2: How many <h1> tags should a page have?

Answer: One. The <h1> represents the main topic of the page. Having multiple <h1> tags is considered poor practice for SEO and accessibility, though HTML5 does technically allow it within sectioning elements. Best practice remains one <h1> per page.

Q3: What is the difference between <strong> and <b>?

Answer: Both render as bold text by default, but they have different meanings. <b> is purely presentational — "make this bold". <strong> is semantic — "this content is important". Screen readers may announce <strong> content differently. Always prefer <strong> when the text is genuinely important.

Q4: What is the difference between <br> and <p>?

Answer: <br> inserts a single line break within content. <p> creates a new paragraph with automatic spacing above and below. Use <p> for separate paragraphs of text. Use <br> only for intentional line breaks within the same paragraph — like lines of an address or a poem.

11. Additional Resources

MDN — Heading Elements (h1–h6)
MDN — The Paragraph Element
MDN — The Strong Element
WebAIM Screen Reader Survey — Understand how screen readers navigate headings