ProgramGuru

HTML Text Formatting Tags

HTML Text Formatting: Shape Your Words with Intention

Text is more than content — it's communication. HTML gives you the tools to structure, highlight, and emphasize your words. Whether you're writing a headline or inserting a line break, knowing the right tags lets your message shine through with clarity.

Headings: Building a Visual Hierarchy

Headings help organize your content into sections. HTML provides six levels of headings — from <h1> (most important) to <h6> (least).

<h1>Welcome to My Fruit Blog</h1>
<h2>Popular Fruits</h2>
<h3>Apple</h3>
<h4>Banana</h4>
<h5>Cherry</h5>
<h6>More Coming Soon</h6>
HTML Headings

Use them in order. Don’t jump from <h1> to <h4> without reason. It affects both readability and SEO.

Paragraphs: Breaking Your Thoughts

The <p> tag creates a block of text — a paragraph. It automatically adds space before and after the content.

<p>Fruits are a delicious part of any diet.</p>
<p>They’re rich in vitamins and antioxidants.</p>
HTML Paragraphs

Line Breaks: Inserting a New Line

Need to break a line without starting a new paragraph? Use <br>.

<p>Apple<br>Banana<br>Cherry</p>
Line Breaks

<br> is a self-closing tag — no need for a closing version.

Bold and Italic Text: Emphasize the Right Words

Use <strong> or <b> for bold text, and <em> or <i> for italic.

<p>I love <strong>apple</strong> pie.</p>
<p>Bananas are <em>incredibly</em> nutritious.</p>
Bold and Italic Text

<strong> and <em> have semantic meaning (important for accessibility). <b> and <i> are for visual emphasis only.

HTML Entities: Displaying Reserved Characters

What if you need to show symbols like < or & in text? Use HTML entities — special codes that represent characters.

Character Entity Output
< &lt; <
> &gt; >
& &amp; &
" &quot; " 
<p>Use &lt;p&gt; for paragraphs.</p>
HTML Entities: Displaying Reserved Characters

Preformatted Text: Preserving Whitespace

The <pre> tag keeps spacing and line breaks exactly as you write them. It’s ideal for showing code or poems.

<pre>
Apple
  Banana
    Cherry
</pre>
Preformatted Text

Whitespace matters here — what you type is what you get.

Summary

Text formatting is how HTML gives voice to your words. You learned:

  • How to structure content with headings and paragraphs
  • Where to use line breaks vs new paragraphs
  • How to apply emphasis with bold and italic
  • What entities are and how to display special characters
  • Why preformatted blocks matter for spacing-sensitive content

Check your understanding 1

Which tag is used to define the largest heading in HTML?
Choose one answer. You can try again.

Answer and explanation

<code><h1></code>

<h1> defines the largest and most important heading. HTML offers six heading tags from <h1> to <h6>, each decreasing in visual importance.

Check your understanding 2

Using multiple <br> tags is the correct way to create space between paragraphs.
Choose one answer. You can try again.

Answer and explanation

False

The <br> tag inserts a single line break. To separate content semantically, you should use <p> for paragraphs, which includes proper spacing by default.

Check your understanding 3

Choose the option that lists all and only the correct statements.

  1. <strong>
  2. <em>
  3. <b>
  4. <i>
Which of the following HTML tags are used to format text as bold or italic?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 2 and 3 and 4

<strong> and <em> are semantic tags for bold and italic text, respectively, while <b> and <i> only change appearance without implying meaning.

Check your understanding 4

Which of the following outputs an ampersand character (&) correctly in HTML?
Choose one answer. You can try again.

Answer and explanation

&amp;

To safely display an ampersand in HTML, use &. Direct usage of & might confuse the browser into thinking an entity is being declared.

Check your understanding 5

The <pre> tag preserves both spaces and line breaks in text.
Choose one answer. You can try again.

Answer and explanation

True

<pre> stands for preformatted text. It retains whitespace, tabs, and line breaks exactly as typed, which is useful for showing code or structured content like tables.

Check your understanding 6

Choose the option that lists all and only the correct statements.

  1. <p>Welcome to Class 10</p><br><b>Important Notice</b>
  2. <p>Welcome<br><b>Hello</b></p>
  3. <p>Morning Assembly</p><b>Starts at 7:30 AM</b>
  4. <p><br><b>Text</b></p>
Which of the following would correctly create a paragraph followed by a line break and some bold text?
Choose one answer. You can try again.

Answer and explanation

Statements 1 and 3

Both examples show valid use of paragraph, line break, and bold tags in a readable and structured way. Nesting <br> inside <p> is acceptable but not semantically ideal for layout.

What’s Next?

In the next module, we’ll explore how to create HTML Lists — from simple bullet points to numbered steps — to bring order to your information.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: HTML Lists →