HTML Tags Tutorial for Beginners – Part 2:

Text, Heading & Formatting Tags

After learning HTML document structure in Part 1, the next step is understanding text, heading, and formatting tags. These tags help you display readable content on webpages and improve structure, accessibility, and SEO.

In this tutorial, you will learn heading tags, paragraph tags, line breaks, formatting tags, code formatting, quotations, abbreviations, and other important text-related HTML tags.

---

Table of Contents

• Heading Tags (H1–H6)
• Paragraph Tag
• Line Break Tag
• Horizontal Rule Tag
• Bold and Strong Tags
• Italic and Emphasis Tags
• Underline Tag
• Highlight Text Tag
• Small Text Tag
• Subscript and Superscript
• Deleted and Inserted Text
• Preformatted Text Tag
• Code Tag
• Blockquote and Quote Tags
• Abbreviation Tag
• Citation Tag
• Address Tag
• Real Example Project
• SEO Tips for Headings
• Best Practices
• Common Beginner Mistakes
• Conclusion
• FAQ

---

Heading Tags (H1–H6)

Heading tags define titles and subtitles on webpages. HTML provides six heading levels.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Small Heading</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Output:

The H1 tag is the most important heading, while H6 is the smallest.

Example:

<h1>HTML Tutorial</h1>
<h2>Introduction</h2>
<h3>Basic Concepts</h3>

Use headings to organize content clearly.

---

Paragraph Tag (<p>)

The paragraph tag is used to write text content.

<p>
HTML is the foundation of web development.
</p>

Output:

Paragraphs improve readability and help structure content.

---

Line Break Tag (<br>)

The line break tag moves text to the next line.

Hello<br>
Welcome to HTML

Output:

This tag does not need a closing tag.

---

Horizontal Rule Tag (<hr>)

The horizontal rule tag creates a line separator.

<hr>

It helps visually separate sections.

Output:

---

Bold Tag (<b>) vs Strong Tag (<strong>)

Both tags make text bold, but their purpose differs.

Bold Tag

<b>Bold Text</b>

Used for visual styling.

Strong Tag

<strong>Important Text</strong>

The strong tag gives importance to content and improves accessibility.

Use strong when text has meaning or importance.

---

Italic Tag (<i>) vs Emphasis Tag (<em>)

Italic Tag

<i>Italic Text</i>

Used for visual styling.

Emphasis Tag

<em>Important Emphasis</em>

The emphasis tag gives meaning and semantic importance.

---

Underline Tag (<u>)

The underline tag adds underline formatting.

<u>Underlined Text</u>

Use it carefully because users may confuse underlined text with links.

---

Highlight Text Tag (<mark>)

The mark tag highlights text.

<mark>Important Note</mark>

This is useful for search highlights or important information.

Output:

---

Small Text Tag (<small>)

The small tag displays smaller text.

<small>Terms and conditions apply</small>

Common use cases:

• Legal text
• Copyright notes
• Extra information

---

Subscript Tag (<sub>)

Subscript text appears below normal text.

H<sub>2</sub>O

Example output:

H₂O

Useful for chemistry and formulas.

---

Superscript Tag (<sup>)

Superscript text appears above normal text.

x<sup>2</sup>

Example output:

x²

Useful for mathematics.

---

Deleted Text Tag (<del>)

The deleted tag shows removed content.

<del>Old Price</del>

Example:

₹999

---

Inserted Text Tag (<ins>)

The inserted tag highlights newly added text.

<ins>New Price</ins>

Example:

₹499

---

Preformatted Text Tag (<pre>)

The pre tag preserves spacing and formatting.

<pre>
Hello
    HTML
        Tutorial
</pre>

Useful for displaying formatted text and code blocks.

---

Code Tag (<code>)

The code tag displays programming code.

<code>
console.log("Hello");
</code>

Useful for tutorials and technical content.

---

Blockquote Tag (<blockquote>)

The blockquote tag displays long quotations.

<blockquote>
Learning never stops.
</blockquote>

---

Quote Tag (<q>)

The q tag displays short quotes.

<q>Practice makes progress</q>

---

Abbreviation Tag (<abbr>)

The abbreviation tag explains shortened words.

<abbr title="HyperText Markup Language">
HTML
</abbr>

Hovering may show the full form.

---

Citation Tag (<cite>)

The cite tag references books, articles, movies, or sources.

<cite>HTML Handbook</cite>

---

Address Tag (<address>)

The address tag displays contact information.

<address>
Email: hello@example.com
</address>

Output:

Real Example Project

Below is a simple webpage using text and formatting tags.

<h1>My HTML Blog</h1>

<p>
Welcome to my website.
</p>

<strong>Important Notice</strong>

<br>

<mark>
New HTML tutorial available
</mark>

---

SEO Tips for Heading Tags

• Use one H1 per page
• Use H2 for sections
• Use H3 under H2
• Keep headings meaningful
• Do not skip heading hierarchy

Good structure improves readability and search engine understanding.

---

Best Practices

• Use semantic tags like strong and em
• Write meaningful headings
• Keep paragraph text readable
• Do not overuse underline
• Use code tags for tutorials
• Organize headings properly

---

Common Beginner Mistakes

• Using many H1 tags
• Using br for spacing everywhere
• Confusing b and strong
• Ignoring semantic meaning
• Messy heading structure
• Not closing tags properly

---

Conclusion

Text, heading, and formatting tags are essential in HTML. These tags help create readable webpages and improve content organization. Before learning images, links, forms, or semantic layout tags, beginners should understand how text formatting works.

---

Frequently Asked Questions (FAQ)

1. What is the difference between b and strong?

The b tag is for visual bold text, while strong gives importance and semantic meaning.

2. What is the difference between i and em?

The i tag styles text visually, while em adds emphasis and meaning.

3. Why are heading tags important?

Heading tags improve webpage structure, readability, accessibility, and SEO.

4. Can I use multiple H1 tags?

It is better to use one H1 per page for cleaner structure and SEO.

5. What is the use of pre tag?

The pre tag preserves spacing and formatting in text.

6. Why use code tag?

The code tag displays programming-related content clearly.

7. Should beginners learn formatting tags?

Yes. Formatting tags help create readable webpages and are important fundamentals.