Protected Learning Content

AICPE Gurukul content is created for learning purposes. Printing, copying and unauthorized reuse are restricted.

AICPE Learning Hub HTML with CSS
Chapter 5
Headings, Paragraphs & Formatting
Previous Tags, Elements & Attributes Next Lists, Links & Images
Chapter 5 | Text & Content

Headings, Paragraphs & Formatting

Text is the heart of every webpage. In this chapter, you will learn how to use headings, paragraphs, line breaks, horizontal rules and formatting tags to make content clear and meaningful.

Start Learning Try Code

<h1> to <h6>

Used to create content headings and page structure.

<p>

Used to write paragraph text on a webpage.

<strong>, <em>, <mark>

Used to add meaning and emphasis to important words.

<sub> and <sup>

Used for formulas like H₂O and powers like x².

Learning Objectives

After This Chapter, You Will Understand

This chapter helps you write readable and well-structured webpage content.

Headings

Use h1 to h6 headings in correct order.

Paragraphs

Write clear paragraphs using the p tag.

Formatting

Apply bold, italic, mark, small, delete and insert formatting.

Sub & Sup

Write formulas and powers using subscript and superscript.

HTML Headings

Heading Tags: h1 to h6

Headings organize content and help users understand the page structure.

1 What are Headings?

HTML provides six heading levels from <h1> to <h6>. The h1 tag is the most important heading and h6 is the least important.

<h1>Main Page Heading</h1>
<h2>Section Heading</h2>
<h3>Sub Section Heading</h3>
<h4>Small Heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

Main Page Heading

Section Heading

Sub Section Heading

Small Heading

Minor Heading
Smallest Heading
SEO & Structure Tip: Use headings to organize content, not just to make text big. A page should have a clear heading hierarchy.
Paragraphs & Breaks

Paragraph, Line Break and Horizontal Rule

These tags help you write readable body content.

2 Paragraph Tag

The <p> tag is used to write paragraph text.

<p>This is a paragraph.</p>

3 Line Break

The <br> tag is used to break a line.

Line one<br>
Line two

4 Horizontal Rule

The <hr> tag creates a horizontal line.

<h2>About Us</h2>
<hr>
Note: Do not use too many <br> tags for layout spacing. Later, we will use CSS margin and padding for spacing.
Text Formatting

Common HTML Text Formatting Tags

Formatting tags help highlight and present text with better meaning.

Tag Use Example Output
<b> Makes text bold visually Bold Text
<strong> Shows important text with meaning Important Text
<i> Makes text italic visually Italic Text
<em> Shows emphasized text with meaning Emphasized Text
<mark> Highlights text Marked Text
<small> Shows smaller text Small Text
<del> Shows deleted text Old Price
<ins> Shows inserted text New Text
<sub> Subscript text H2O
<sup> Superscript text x2
Practice Task: Write one sentence using strong, em, mark, sub and sup tags.
Professional Understanding

Visual Formatting vs Semantic Formatting

Some tags only change appearance, while some tags also add meaning.

Visual Formatting

These tags mostly affect appearance.

  • <b> makes text bold
  • <i> makes text italic
  • <u> underlines text

Semantic Formatting

These tags add meaning to the content.

  • <strong> means important text
  • <em> means emphasized text
  • <mark> means highlighted text
Professional Tip: Use <strong> instead of <b> when the word is truly important. Use <em> instead of <i> when you want to add emphasis.
Try It Yourself

Practice Headings and Formatting

Edit the code and click Run Code to see the output.

HTML Code Edit and run
Output Preview Browser result
Practice Task: Create a webpage about your institute using one h1, two h2 headings, three paragraphs, one highlighted word and one horizontal line.
Common Mistakes

Mistakes Students Should Avoid

Correct heading and text structure makes your page professional.

Wrong Habits

  • Using h1 only to make text large
  • Skipping heading levels randomly
  • Writing long content without paragraphs
  • Using br tags repeatedly for spacing
  • Using bold everywhere without purpose

Correct Habits

  • Use h1 for main page topic
  • Use h2 for major sections
  • Use p tag for paragraph content
  • Use CSS later for spacing
  • Use strong and em for meaningful emphasis
Remember: Headings are for structure. Paragraphs are for readable content. Formatting should support meaning.
Quick Quiz

Test Your Understanding

Select the correct answers and check your score.

1. Which heading tag is the most important?

The h1 tag is the most important heading on a page.

2. Which tag is used for paragraph text?

The p tag is used to write paragraph text.

3. Which tag means important text?

The strong tag means important text and usually appears bold.

4. Which tag is used for subscript?

The sub tag is used for subscript text, such as H₂O.

5. Which tag creates a horizontal line?

The hr tag creates a horizontal line.
Quick Revision

Remember These Points

Revise these before moving to Chapter 6.

Headings

HTML has six heading levels from h1 to h6.

Paragraph

The p tag is used to write paragraph content.

Line Break

The br tag is used to move content to the next line.

Horizontal Rule

The hr tag creates a horizontal line.

Strong & Em

Strong shows importance, and em shows emphasis.

Sub & Sup

Subscript and superscript are used for formulas and powers.

Previous Chapter Next Chapter: Lists, Links & Images