Skip to main content
HTML for Beginners
CHAPTER 02 Beginner

HTML Text Formatting and Headings

Updated: May 10, 2026
15 min read

1. Introduction

Welcome to Chapter 2 of the HTML for Beginners course! In this chapter, we will explore HTML text formatting and headings. You will learn how to structure your text and apply basic formatting like bolding, italics, and highlighting directly through HTML tags.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Structure a document using HTML headings correctly.
  • Add and format paragraphs.
  • Use text formatting tags to emphasize and style text.
  • Understand the semantic meaning behind formatting tags.

3. HTML Headings

Headings in HTML are used to define the titles or subtitles of your webpage. HTML provides six levels of headings, from <h1> to <h6>.
  • <h1> is the most important heading (usually the main title).
  • <h6> is the least important.

Best Practice: Use exactly one <h1> per page for SEO purposes, and use <h2> through <h6> in a logical hierarchy without skipping levels.

html
1234567 
<!-- Example 1: HTML Headings -->
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

4. Paragraphs and Line Breaks

The <p> tag defines a paragraph. Browsers automatically add empty space (margin) before and after a paragraph. To force a line break within a paragraph without starting a new one, use the <br> tag (an empty element with no closing tag).
html
123 
<!-- Example 2: Paragraphs and Breaks -->
<p>This is a standard paragraph of text.</p>
<p>This is a paragraph that has a <br> line break right in the middle.</p>

5. Bold and Strong Text

To make text bold, you can use <b> or <strong>.
  • <b>: Bolds text for visual purposes.
  • <strong>: Bolds text but also adds semantic importance (screen readers will emphasize it).
html
123 
<!-- Example 3: Bold and Strong -->
<p>This is <b>bold</b> text.</p>
<p>This is <strong>important strong</strong> text.</p>

6. Italic and Emphasized Text

Similarly, you can italicize text using <i> or <em>.
  • <i>: Italicizes text visually.
  • <em>: Emphasizes text semantically.
html
123 
<!-- Example 4: Italic and Emphasized -->
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>

7. Small, Marked, and Deleted Text

  • <small>: Renders smaller text (often used for copyright).
  • <mark>: Highlights text (usually with a yellow background).
  • <del>: Renders a strikethrough line over the text.
html
1234 
<!-- Example 5: Small, Marked, and Deleted -->
<p><small>Copyright 2026</small></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>The original price was <del>$50</del>, but now it is $40.</p>

8. Inserted, Subscript, and Superscript Text

  • <ins>: Represents inserted text (usually underlined).
  • <sub>: Subscript text (appears half a character below the normal line, like H₂O).
  • <sup>: Superscript text (appears half a character above, like X²).
html
1234 
<!-- Example 6: Ins, Sub, Sup -->
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>The chemical formula for water is H<sub>2</sub>O.</p>
<p>The mathematical equation is E = mc<sup>2</sup>.</p>

9. Quotations and Blockquotes

  • <q>: Used for short, inline quotes. Browsers insert quotation marks around it.
  • <blockquote>: Used for long quotations. Browsers usually indent blockquotes.
html
123456 
<!-- Example 7: Quotes -->
<p>Albert Einstein said: <q>Imagination is more important than knowledge.</q></p>

<blockquote cite="https://wikipedia.org">
  HTML is the standard markup language for creating Web pages.
</blockquote>

10. Horizontal Rules

The <hr> tag creates a thematic break, displayed as a horizontal line.
html
1234 
<!-- Example 8: Horizontal Rule -->
<p>End of chapter 1.</p>
<hr>
<p>Beginning of chapter 2.</p>

11. Real-World Typography Example

Combining these tags creates richly formatted articles.
html
12345678 
<!-- Example 9: Combined Typography -->
<article>
  <h1>The Discovery of Water</h1>
  <p>Scientists recently found that H<sub>2</sub>O exists on other planets!</p>
  <hr>
  <p><strong>Warning:</strong> The atmosphere is highly toxic.</p>
  <blockquote>Space exploration is entering a <mark>new era</mark>.</blockquote>
</article>

12. Best Practices & Common Mistakes

Best Practices:
  • Always use semantic tags (<strong>, <em>) over visual tags (<b>, <i>) when the text has special meaning.
  • Maintain a strict heading hierarchy (H1 -> H2 -> H3).

Common Mistakes:

  • Using <br> to create space between elements (use CSS margins instead).
  • Using <h1> multiple times on a single page.
  • Using headings just to make text bold and big.

13. Mini Project: Formatted Article Page

Task: Create a news article using headings, paragraphs, strong text, marked text, and blockquotes.
html
12345678910111213 
<!-- Example 10: Mini Project Solution -->
<!DOCTYPE html>
<html>
<head><title>News Article</title></head>
<body>
  <h1>Local Hero Saves Cat</h1>
  <p><small>Published: Jan 1st, 2026</small></p>
  <hr>
  <p>A brave firefighter <strong>rescued a cat</strong> from a burning tree today.</p>
  <p>The cat, named <mark>Whiskers</mark>, is doing well.</p>
  <blockquote>"It was the hardest rescue of my life," said the firefighter.</blockquote>
</body>
</html>

14. MCQ Quiz

  1. 1. Which tag is used for the most important heading?
  • A) <heading>
  • B) <h6>
  • C) <h1>
  • D) <head>
Answer: C
  1. 2. How do you add a line break?
  • A) <break>
  • B) <br>
  • C) <lb>
  • D) \n
Answer: B
  1. 3. Which tag defines semantic emphasis?
  • A) <i>
  • B) <italic>
  • C) <em>
  • D) <strong>
Answer: C

15. Interview Questions

Q: What is the difference between <b> and <strong>? A: <b> makes text bold purely for visual presentation. <strong> makes it bold AND indicates semantic importance, which is helpful for screen readers and SEO.

Q: Why shouldn't you use <br> to create spacing between paragraphs? A: <br> is meant for line breaks within a block of text (like a poem or address). For spacing between distinct elements, CSS margin should be used for better structure and control.

16. FAQs

Q: Can I change the size of <h1>? A: Yes, the default size is controlled by the browser, but you can override it easily using CSS.

17. Summary

You've learned how to structure text using headings and paragraphs, and how to format it using tags like <strong>, <em>, <mark>, and <blockquote>. You now know how to apply semantic meaning to your content.

18. Next Chapter Recommendation

In the next chapter, we will learn how to connect the web together by creating hyperlinks and embedding images!

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Basics for Beginners
Next Chapter HTML Links and Images

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1