Web Development Zero to Advanced — Class 08 of 120
HTML Headings, Paragraphs & Text Formatting
In Class 07, you learned the basic structure of an HTML document.
Now we will start adding real content to a web page.
In this class, you will learn:
• HTML headings
• Paragraphs
• Line breaks
• Horizontal rules
• Bold and important text
• Italic and emphasized text
• Highlighted text
• Small text
• Deleted and inserted text
• Subscript and superscript
• Proper heading hierarchy
• Common text-formatting mistakes
By the end of this class, you will be able to create and organize text content inside an HTML page.
What Is Text Content in HTML?
Most websites contain text.
For example:
• Website titles
• Product names
• Blog articles
• Product descriptions
• Prices
• Contact information
• Instructions
• News
• Reviews
• Frequently asked questions
HTML provides different elements to give this content structure and meaning.
HTML Headings
HTML provides six levels of headings:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Example:
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<h1> represents the highest heading level.
<h6> represents the lowest heading level.
Heading Hierarchy
Headings should be used to create a logical content structure.
Example:
<h1>Computer Shop</h1>
<h2>Laptops</h2>
<h3>Gaming Laptops</h3>
<h3>Business Laptops</h3>
<h2>Desktop Computers</h2>
<h3>Gaming PCs</h3>
<h3>Office PCs</h3>
The structure is:
Computer Shop
→ Laptops
→ → Gaming Laptops
→ → Business Laptops
→ Desktop Computers
→ → Gaming PCs
→ → Office PCs
Why Is Heading Structure Important?
Good heading structure helps:
• Users scan content
• Screen-reader users navigate content
• Developers organize pages
• Search engines understand page structure
• Content remain easier to maintain
Do not choose heading levels simply because of their default visual size.
Use headings according to the structure and meaning of the content.
CSS will later be used to control appearance.
What Is <h1>?
<h1> represents a top-level heading.
Example:
<h1>Learn Web Development</h1>
For a simple article page, the main article title may be represented using <h1>.
Example:
<h1>How to Learn HTML</h1>
Then major sections can use <h2>.
<h2> and Subsections
Example:
<h1>HTML Tutorial</h1>
<h2>What Is HTML?</h2>
<h2>HTML Elements</h2>
<h2>HTML Attributes</h2>
If a section needs its own subsection, you can use <h3>.
Example:
<h2>HTML Elements</h2>
<h3>Heading Elements</h3>
<h3>Paragraph Elements</h3>
What Is a Paragraph?
HTML uses the <p> element for paragraphs.
Example:
<p>This is a paragraph.</p>
Another example:
<p>HTML is used to structure content on web pages.</p>
You can create multiple paragraphs:
<p>I am learning HTML.</p>
<p>HTML is the foundation of web page structure.</p>
<p>Next, I will learn CSS and JavaScript.</p>
Heading and Paragraph Example
<h1>Web Development</h1>
<p>Web development is the process of building websites and web applications.</p>
<h2>Frontend Development</h2>
<p>Frontend development focuses on the user-facing part of a website.</p>
<h2>Backend Development</h2>
<p>Backend development handles server-side application logic.</p>
This creates a structured document containing headings and paragraphs.
HTML Whitespace
Suppose you write:
<p>Hello World</p>
Browsers normally collapse consecutive whitespace in ordinary HTML text.
The displayed result will usually look like:
Hello World
Similarly, adding multiple line breaks in the source code does not automatically create multiple visible lines inside normal text.
HTML elements should be used to define the intended structure.
Line Break — <br>
The <br> element creates a line break.
Example:
<p>
Dinajpur IT Company<br>
Bangladesh<br>
Web Development Services
</p>
Expected output:
Dinajpur IT Company
Bangladesh
Web Development Services
When to Use <br>
<br> is useful when the line break itself is meaningful.
Examples may include:
• Postal addresses
• Poems
• Song or verse formatting
• Text where specific line breaks matter
Do not use many <br> elements simply to create visual spacing between sections.
CSS should normally be used for layout and spacing.
Horizontal Rule — <hr>
The <hr> element represents a thematic break between sections of content.
Example:
<h2>About Us</h2>
<p>We provide professional web development services.</p>
<hr>
<h2>Contact Us</h2>
<p>Email: contact@example.com</p>
Browsers commonly display <hr> as a horizontal line by default.
However, its semantic purpose is to represent a thematic break.
Bold Text — <b>
The <b> element draws attention to text without indicating that the text has extra importance.
Example:
<p>This is <b>bold text</b>.</p>
Important Text — <strong>
The <strong> element indicates strong importance, seriousness, or urgency.
Example:
<p><strong>Important:</strong> Save your work before closing the editor.</p>
Browsers commonly display <strong> text in bold by default.
But its semantic meaning is more important than its default appearance.
<b> vs <strong>
<b>:
Draws attention to text without adding strong importance.
<strong>:
Indicates strong importance.
Example:
<p>Product: <b>Gaming Laptop</b></p>
<p><strong>Warning:</strong> Do not share your password.</p>
Use elements according to meaning rather than appearance alone.
Italic Text — <i>
The <i> element represents text in an alternate voice or mood or text that is conventionally offset from normal prose.
Example:
<p>The term <i>responsive design</i> is common in web development.</p>
Emphasized Text — <em>
The <em> element represents stress emphasis.
Example:
<p>You <em>must</em> practice HTML regularly.</p>
Browsers commonly display <em> text in italics.
<i> vs <em>
<i>:
Represents text offset from surrounding prose for reasons such as terminology or alternate voice.
<em>:
Represents stress emphasis.
Example:
<p>The term <i>frontend</i> refers to the user-facing part.</p>
<p>You should <em>practice</em> instead of only reading.</p>
Highlighted Text — <mark>
The <mark> element represents text highlighted or marked for reference.
Example:
<p>Remember to learn <mark>HTML, CSS and JavaScript</mark>.</p>
Browsers commonly display marked text with a highlighted background.
Small Text — <small>
The <small> element represents side comments or small-print information.
Example:
<p>Price: $500</p>
<p><small>Terms and conditions apply.</small></p>
Deleted Text — <del>
The <del> element represents content that has been deleted from a document.
Example:
<p>Old Price: <del>$600</del></p>
Browsers commonly display it with a line through the text.
Inserted Text — <ins>
The <ins> element represents content that has been inserted into a document.
Example:
<p>New Price: <ins>$500</ins></p>
Browsers commonly underline inserted text.
Using <del> and <ins> Together
Example:
<p>
Price:
<del>$600</del>
<ins>$500</ins>
</p>
This can communicate that one value was removed and another was inserted.
Subscript — <sub>
The <sub> element represents subscript text.
Example:
<p>H<sub>2</sub>O</p>
Expected output:
H₂O
Another example:
<p>CO<sub>2</sub></p>
Superscript — <sup>
The <sup> element represents superscript text.
Example:
<p>2<sup>3</sup> = 8</p>
Expected output:
2³ = 8
Another example:
<p>x<sup>2</sup></p>
Combining Text Elements
HTML text elements can be combined when appropriate.
Example:
<h1>Gaming Laptop Offer</h1>
<p>
Get our <strong>special offer</strong> on selected gaming laptops.
</p>
<p>
Old Price: <del>$1000</del><br>
New Price: <strong>$850</strong>
</p>
<p>
<mark>Limited-time offer</mark>
</p>
<p>
<small>Terms and conditions apply.</small>
</p>
Complete HTML Example
Create:
index.html
Write:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Text Practice</title>
</head>
<body>
<h1>Web Development Course</h1>
<p>
Welcome to my web development course.
</p>
<h2>About This Course</h2>
<p>
This course teaches <strong>web development</strong>
from beginner to advanced level.
</p>
<h2>What Will You Learn?</h2>
<h3>HTML</h3>
<p>
HTML is used to structure web content.
</p>
<h3>CSS</h3>
<p>
CSS is used to control presentation and layout.
</p>
<h3>JavaScript</h3>
<p>
JavaScript adds programming logic and interactivity.
</p>
<hr>
<p>
<mark>Practice every day.</mark>
</p>
<p>
You should <em>write the code yourself</em>.
</p>
<p>
<small>Web Development Zero to Advanced</small>
</p>
</body>
</html>
Expected Output
The page will contain:
Web Development Course
Welcome to my web development course.
About This Course
This course teaches web development from beginner to advanced level.
What Will You Learn?
HTML
HTML is used to structure web content.
CSS
CSS is used to control presentation and layout.
JavaScript
JavaScript adds programming logic and interactivity.
A thematic break will appear.
“Practice every day.” will be highlighted by default.
“write the code yourself” will normally appear emphasized.
The final line will appear as small-print text.
Practical Example: Product Page
Suppose you are creating a product page for a computer shop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gaming PC</title>
</head>
<body>
<h1>Gaming PC</h1>
<p>
Powerful gaming computer for modern games and professional work.
</p>
<h2>Price</h2>
<p>
Regular Price: <del>$1200</del>
</p>
<p>
Offer Price: <strong>$999</strong>
</p>
<p>
<mark>Limited Stock Available</mark>
</p>
<h2>Specifications</h2>
<p>
AMD Ryzen Processor<br>
16GB RAM<br>
1TB SSD<br>
Dedicated Graphics
</p>
<hr>
<p>
<small>Product specifications and availability may change.</small>
</p>
</body>
</html>
This example demonstrates how basic HTML text elements can be used in a real product page.
Practical Example: Blog Article
<article>
<h1>How to Start Web Development</h1>
<p>
Web development becomes easier when you learn the fundamentals in the correct order.
</p>
<h2>Start with HTML</h2>
<p>
HTML teaches you how web content is structured.
</p>
<h2>Learn CSS</h2>
<p>
CSS teaches you how to control the presentation and layout of a web page.
</p>
<h2>Learn JavaScript</h2>
<p>
JavaScript allows you to add programming logic and interactive behavior.
</p>
</article>
This demonstrates a logical heading hierarchy:
h1 → Main article heading
h2 → Major article sections
Heading Structure and Accessibility
Headings help users understand the organization of a document.
Assistive technologies such as screen readers can also use headings for navigation.
Therefore, headings should represent the actual hierarchy of the content.
For example:
<h1>Web Development</h1>
<h2>Frontend</h2>
<h3>HTML</h3>
<h3>CSS</h3>
<h3>JavaScript</h3>
<h2>Backend</h2>
This creates a logical content outline.
Heading Structure and SEO
Search engines analyze page content and structure to understand what a page is about.
Clear, descriptive headings can help organize content for both users and search engines.
However, headings should not be filled unnaturally with repeated keywords.
Write headings primarily for clarity and useful content.
Good:
<h2>What Is HTML?</h2>
Poor practice:
<h2>HTML HTML Tutorial Best HTML Course HTML Learning</h2>
Focus on useful, natural, well-structured content.
HTML Is for Meaning, CSS Is for Appearance
One of the most important principles in web development is:
HTML → Structure and Meaning
CSS → Presentation
For example, do not select <h1> merely because its default text is large.
Use <h1> because the content is a top-level heading.
Later, CSS can change its size:
h1 {
font-size: 40px;
}
Similarly, do not use <br> repeatedly just to create large spaces.
Use CSS margins and padding for layout and spacing.
Common Beginner Mistakes
1. Using Headings Only for Font Size
Wrong idea:
“I want large text, so I will use <h1>.”
Correct approach:
Use heading elements according to content hierarchy.
Use CSS to control visual size.
2. Skipping Logical Heading Structure
Avoid creating confusing structures without a reason.
For example:
<h1>Main Title</h1>
<h4>First Main Section</h4>
Prefer a logical hierarchy such as:
<h1>Main Title</h1>
<h2>First Main Section</h2>
3. Using <br> for Page Layout
Avoid:
<p>Content</p>
<br>
<br>
<br>
<br>
<p>More Content</p>
Use CSS for visual spacing.
4. Using <b> When Strong Importance Is Intended
If content has strong importance, consider:
<strong>Important</strong>
rather than selecting an element only for bold appearance.
5. Using <i> When Stress Emphasis Is Intended
If the purpose is emphasis, use:
<em>Important point</em>
Use elements based on semantic meaning.
6. Writing Huge Blocks of Text
Long web content should be divided using:
• Headings
• Paragraphs
• Lists
• Sections
This improves readability.
7. Forgetting Closing Tags
Incorrect:
<p>Hello World
Correct:
<p>Hello World</p>
New & Difficult Words
HTML = HyperText Markup Language
Heading = Title or section heading used to organize content
Paragraph = A block of related text
Hierarchy = Organization into levels of importance or structure
Formatting = Changing or representing the presentation of content
Semantic = Related to meaning
Emphasis = Special stress or importance given to content
Strong = Strong importance, seriousness, or urgency
Mark = Highlighted or marked text
Subscript = Text positioned below the normal baseline
Superscript = Text positioned above the normal baseline
Whitespace = Spaces, tabs, and line breaks in source text
Line Break = Moving text to a new line
Thematic Break = A change or separation between topics
Accessibility = Designing content so people with different abilities can use it
Screen Reader = Assistive software that reads or interprets digital content for users
SEO = Search Engine Optimization
Important Notes
Remember:
<h1> to <h6> = Heading levels
<p> = Paragraph
<br> = Line break
<hr> = Thematic break
<strong> = Strong importance
<b> = Draw attention without strong importance
<em> = Stress emphasis
<i> = Alternate voice or offset text
<mark> = Highlighted text
<small> = Small-print or side-comment text
<del> = Deleted content
<ins> = Inserted content
<sub> = Subscript
<sup> = Superscript
Most importantly:
HTML = Structure and Meaning
CSS = Presentation
Practice Questions
- How many heading levels does HTML provide?
- What is the difference between
<h1>and<h6>? - What is heading hierarchy?
- What is the
<p>element used for? - What does
<br>do? - What does
<hr>represent? - What is the difference between
<b>and<strong>? - What is the difference between
<i>and<em>? - What does
<mark>do? - What is
<small>used for? - What does
<del>represent? - What does
<ins>represent? - What is
<sub>? - What is
<sup>? - Why should CSS be used instead of HTML elements purely for visual styling?
- Why is heading hierarchy important?
Assignment
Create a folder named:
class-08
Inside it, create:
index.html
Create a simple product page containing:
- One
<h1>product name. - One introductory paragraph.
- An
<h2>for Product Description. - An
<h2>for Price. - Show an old price using
<del>. - Show an offer price using
<strong>. - Highlight an offer using
<mark>. - Add an
<h2>called Specifications. - Use
<br>where meaningful. - Add a thematic break using
<hr>. - Add small-print information using
<small>. - Use at least one
<em>element.
Save the file and open it in your browser.
Then inspect the HTML using browser Developer Tools.
Quiz
- Which element represents the highest heading level?
Answer: <h1>.
- Which element represents the lowest heading level?
Answer: <h6>.
- Which element creates a paragraph?
Answer: <p>.
- Which element creates a line break?
Answer: <br>.
- Which element represents a thematic break?
Answer: <hr>.
- Which element represents strong importance?
Answer: <strong>.
- Which element represents stress emphasis?
Answer: <em>.
- Which element can mark or highlight text?
Answer: <mark>.
- Which element represents deleted content?
Answer: <del>.
- Which element represents inserted content?
Answer: <ins>.
- Which element is used for subscript?
Answer: <sub>.
- Which element is used for superscript?
Answer: <sup>.
Interview Questions
Q: What are HTML heading elements?
Answer: HTML provides six heading levels from <h1> through <h6>. They are used to define a hierarchical structure for headings and sections.
Q: What is the difference between <strong> and <b>?
Answer: <strong> represents strong importance, seriousness, or urgency, while <b> draws attention to text without adding that semantic importance.
Q: What is the difference between <em> and <i>?
Answer: <em> represents stress emphasis, while <i> represents text offset from normal prose for reasons such as terminology or an alternate voice.
Q: What is the purpose of the <p> element?
Answer: The <p> element represents a paragraph of text.
Q: Should <br> be used to create large spaces between sections?
Answer: No. CSS should normally be used for visual spacing. <br> should be used when a line break is meaningful to the content.
Q: Why is heading hierarchy important?
Answer: A logical heading hierarchy improves content organization, readability, accessibility, navigation, and helps machines understand the structure of a document.
Class Summary
In Class 08, you learned how to structure and format text using HTML.
You learned:
<h1> – <h6> → Headings
<p> → Paragraph
<br> → Line Break
<hr> → Thematic Break
<strong> → Strong Importance
<b> → Attention
<em> → Emphasis
<i> → Alternate Voice/Offset Text
<mark> → Highlight
<small> → Small Print
<del> → Deleted Text
<ins> → Inserted Text
<sub> → Subscript
<sup> → Superscript
The most important principle is:
HTML defines the structure and meaning of content.
CSS controls its visual presentation.
You can now create properly structured headings, paragraphs, and formatted text for articles, business websites, product pages, and other web content.
Next Class:
Class 09 — HTML Links & Navigation