Headings (h1 - h6)

Headings are used to define titles and section headings on a webpage.

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>

Hierarchy

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

Best Practices

• Use only one <h1> per page.
• Follow a logical heading hierarchy.
• Avoid skipping 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 content of 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.
• Improves readability.

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

<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>

Purpose

Used to indicate a thematic break between sections.

Common Uses

• Separating content sections
• Dividing chapters
• Visual separators

Bold Text (b vs strong)

HTML provides two ways to make text appear bold.

b Tag

Used for stylistic bold text.

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

Purpose: Visual emphasis only.

strong Tag

Used for important content.

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

Benefits

• Indicates importance
• Better accessibility
• Better semantic meaning

Recommendation

Use

When

<b>

Visual styling only

<strong>

Important content

Italic Text (i vs em)

HTML provides two ways to display italic text.

i Tag

Used for stylistic italics.

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

Common Uses

• Foreign words
• Technical terms
• Book titles

em Tag

Used for emphasized text.

<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
• Uses 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>

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 pages and websites.

Basic Link

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

Opening in a New Tab

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

Important Attribute

target="_blank"

Opens the link in a new tab.

Email Link

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

Phone Linkd

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

Internal Link

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

Common Link Attributes

Attribute

Purpose

href

Destination URL

target

Where link opens

title

Tooltip text

download

Download file

Download Example

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

Summary

Key Takeaway

These tags form the foundation of content presentation in HTML.

<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>

Mastering these tags will help you create structured, readable, and accessible webpages.