HTML provides several tags for displaying and formatting textual content on a webpage. These tags help organize information and improve readability, accessibility, and SEO.

---

Headings (<h1> - <h6>)

Headings are used to define titles and section headings.

HTML provides six levels of headings.

Example

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Smaller Heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

Output Hierarchy

H1 - Largest
 └─ H2
     └─ H3
         └─ H4
             └─ H5
                 └─ H6 - Smallest

Best Practices

• Use only one <h1> per page.
• Follow a logical heading hierarchy.
• Do not skip heading levels unnecessarily.

Good Example

<h1>Frontend Development</h1>

<h2>HTML</h2>
<h3>HTML Basics</h3>

<h2>CSS</h2>
<h3>CSS Selectors</h3>

SEO Benefit

Search engines use headings to understand the structure and importance of content on a webpage.

---

Paragraphs (<p>)

The <p> tag defines a paragraph of text.

Example

<p>
HTML is the standard markup language for creating web pages.
</p>

Output

HTML is the standard markup language for creating web pages.

Characteristics

• Automatically adds spacing before and after the paragraph.
• Suitable for blocks of text.

Multiple Paragraphs

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

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

---

Line Breaks (<br>)

The <br> tag inserts a line break.

Example

<p>
Hello<br>
World
</p>

Output

Hello
World

Characteristics

• Self-closing element
• Does not require a closing tag

Syntax

<br>

Common Uses

• Addresses
• Poems
• Song lyrics

Example

Kathmandu<br>
Nepal

---

Horizontal Rules (<hr>)

The <hr> tag creates a horizontal line.

Example

<p>Chapter 1</p>

<hr>

<p>Chapter 2</p>

Output

Chapter 1
-------------------
Chapter 2

Purpose

The <hr> element indicates a thematic break between sections of content.

Common Uses

• Separate content sections
• Divide chapters
• Visual separators

---

Bold Text (<b>, <strong>)

HTML provides two ways to make text appear bold.

---

<b> Tag

The <b> tag is used for stylistic bold text.

Example

<p>This is <b>bold</b> text.</p>

Output

This is bold text.

Purpose

Visual emphasis only.

---

<strong> Tag

The <strong> tag is used for important content.

Example

<p>
Please read the <strong>instructions carefully</strong>.
</p>

Output

Please read the instructions carefully.

Benefits

• Indicates importance
• Better accessibility
• Better semantic meaning

Recommendation

Use:

<strong>

instead of:

<b>

when the text is important.

---

Italic Text (<i>, <em>)

HTML provides two ways to display italic text.

---

<i> Tag

The <i> tag is used for stylistic italics.

Example

<p>I love <i>web development</i>.</p>

Common Uses

• Foreign words
• Technical terms
• Book titles

---

<em> Tag

The <em> tag is used for emphasized text.

Example

<p>
You <em>must</em> complete this task.
</p>

Benefits

• Semantic meaning
• Better accessibility
• Screen readers provide emphasis

Recommendation

Use:

<em>

when emphasis is intended.

---

Preformatted Text (<pre>)

The <pre> tag preserves spaces and line breaks exactly as written.

Example

<pre>
Name: Samir
Age : 21
City: Jhapa
</pre>

Output

Name: Samir
Age : 21
City: Jhapa

Characteristics

• Preserves spaces
• Preserves tabs
• Preserves line breaks
• Displays text in a monospace font

Common Uses

• Code snippets
• Terminal output
• ASCII art

---

Highlighted Text (<mark>)

The <mark> tag highlights text.

Example

<p>
Learn <mark>HTML</mark> first.
</p>

Output

Learn HTML first.

(HTML appears highlighted.)

Common Uses

• Search results
• Important keywords
• Highlighted notes

---

Subscript (<sub>)

The <sub> tag displays text below the normal line.

Example

H<sub>2</sub>O

Output

H₂O

Common Uses

• Chemical formulas
• Mathematical notation

More Examples

CO<sub>2</sub>

Output

CO₂

---

Superscript (<sup>)

The <sup> tag displays text above the normal line.

Example

x<sup>2</sup>

Output

x²

Common Uses

• Mathematical powers
• Footnotes
• Ordinal indicators

More Examples

10<sup>3</sup>

Output

10³

---

Links (<a>)

The <a> (anchor) tag creates hyperlinks.

Links allow navigation between webpages, websites, email addresses, and phone numbers.

---

Basic Link

Example

<a href="https://google.com">
    Visit Google
</a>

Output

Visit Google
(clickable)

---

Opening in a New Tab

Use the target="_blank" attribute to open a link in a new browser tab.

Example

<a
    href="https://google.com"
    target="_blank"
>
    Google
</a>

Important Attribute

target="_blank"

Purpose

Opens the link in a new browser tab.

---

Email Link

Create a link that opens the user's default email application.

Example

<a href="mailto:test@example.com">
    Email Me
</a>

---

Phone Link

Create a clickable phone number.

Example

<a href="tel:+9779800000000">
    Call Us
</a>

---

Internal Page Link

Use relative URLs to navigate between pages within the same website.

Example

<a href="/about">
    About Us
</a>

---

Common Link Attributes

Attribute	Purpose
href	Destination URL
target	Specifies where the link opens
title	Tooltip text
download	Downloads the linked file

---

Download Attribute

The download attribute tells the browser to download a file instead of opening it.

Example

<a
    href="resume.pdf"
    download
>
    Download Resume
</a>

---

Summary

Tag	Purpose
h1–h6	Headings
p	Paragraphs
br	Line Break
hr	Horizontal Line
b	Bold Styling
strong	Important Bold Text
i	Italic Styling
em	Emphasized Text
pre	Preserve Formatting
mark	Highlight Text
sub	Subscript
sup	Superscript
a	Hyperlinks

---

Key Takeaway

These tags form the foundation of content presentation in HTML.

Example

<h1>HTML Basics</h1>

<p>HTML structures web content.</p>

<strong>Important Note</strong>

<em>Learn HTML before CSS.</em>

<a href="https://developer.mozilla.org">
    Learn More
</a>

As you continue learning HTML, these text and content elements will help you create well-structured, accessible, and SEO-friendly webpages.