HTML Tutorial Series – Chapter 2: Headings, Paragraphs & Text Formatting

Introduction

Now that you understand the basic structure of an HTML document, it’s time to start working with actual content.

In this chapter, you’ll learn how to:

Add headings and paragraphs
Control spacing and layout
Format text to make it more readable and meaningful

These are the most commonly used HTML tags, and you’ll use them on almost every webpage you build.

HTML Headings (h1 to h6)

Headings are used to define titles and subtitles on a webpage. HTML provides six levels of headings, from <h1> (most important) to <h6> (least important).

				
					<h1>Main Heading (H1)</h1>
<h2>Subheading (H2)</h2>
<h3>Section Title (H3)</h3>
<h4>Subsection (H4)</h4>
<h5>Small Heading (H5)</h5>
<h6>Smallest Heading (H6)</h6>

Best Practices:

Use only one <h1> per page (important for SEO).
Follow a proper hierarchy (h1 → h2 → h3).
Don’t skip levels unnecessarily.

👉 Think of headings like a book structure — title, chapters, sections, and sub-sections.

Paragraph Tag (`<p>`)

The <p> tag is used to write paragraphs of text.

				
					<p>This is a paragraph. It contains some text for the reader.</p>
<p>This is another paragraph. Each paragraph starts on a new line.</p>

Key Points:

Browsers automatically add spacing between paragraphs.
Extra spaces in HTML are ignored.

Line Break (`<br>`) and Horizontal Rule (`<hr>`)

Line Break (<br>)

Used to break a line without starting a new paragraph.

				
					<p>This is line one.<br>This is line two.</p>

Horizontal Line (<hr>)

Creates a horizontal divider between sections.

				
					<hr>

Use <hr> to separate content visually (like sections in an article).

Text Formatting Tags HTML provides several tags to format text and give it meaning. Let’s explore them one by one:

Bold & Importance

				
					<b>This is bold text</b>
<strong>This is important text</strong>

<strong> is preferred because it adds semantic importance (useful for SEO and accessibility).

Italic & Emphasis

				
					<i>This is italic text</i>
<em>This is emphasized text</em>

<em> is better for meaning, not just style.

Underline, Highlight & Small Text

				
					<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Small text</small>

Deleted & Inserted Text

				
					<del>Deleted text</del>
<ins>Inserted text</ins>

Useful for showing updates or edits in content.

Subscript & Superscript

				
					H<sub>2</sub>O
E = mc<sup>2</sup>

Commonly used in science and math content.

Semantic Text Tags (Meaningful Content)

These tags help browsers and search engines understand your content better.

Abbreviation (<abbr>)

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

Shows full form on hover.

Short Quote (<q>)

				
					<q>This is a short quote</q>

Block Quote (<blockquote>)

				
					<blockquote>
  This is a long quotation from another source.
</blockquote>

Citation (<cite>)

				
					<cite>Harry Potter</cite>

Address (<address>)

				
					<address>
  123 Street, Ahmedabad, India
</address>

Time (<time>)

				
					<time datetime="2026-05-05">May 5, 2026</time>

Definition (<dfn>)

				
					<dfn>HTML</dfn> is the standard language for web pages.

Code-Related Tags

Perfect for technical blogs like yours

Inline Code (<code>)

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

Keyboard Input (<kbd>)

				
					Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.

Sample Output (<samp>)

				
					<samp>Output: Hello World</samp>

Variable (<var>)

				
					<var>x</var> + <var>y</var> = <var>z</var>

Preformatted Text (`<pre>`)

Displays text exactly as written (keeps spaces and line breaks).

				
					<pre>
This is preformatted text.
It preserves spacing.
</pre>

Direction & Isolation Tags

Useful for multilingual or special text formatting:

				
					<bdi>Username123</bdi>
<bdo dir="rtl">This text is reversed</bdo>
<wbr>

Rarely used, but important for advanced HTML handling.

Key Takeaways from Chapter 2

Headings define structure and improve SEO.
Paragraphs are used for content blocks.
Formatting tags enhance readability and meaning.
Semantic tags help search engines and accessibility tools understand your content better.