HTML Text Formatting Guide

---

    

---

    

HTML Text Formatting Guide
HTML provides various tags to format and style text on your web pages. Here's a breakdown of the most commonly used text formatting tags:

1. Headings (<h1> to <h6>)

Headings are used to define titles and section headers.
There are 6 levels — <h1> is the largest and most important; <h6> is the smallest.

 

<h1>Main Heading</h1>

<h2>Subheading</h2>

<h3>Section Title</h3>

📝 Best practice: Use only one <h1> per page for SEO and clarity.

2. Paragraphs (<p>)

Used to define blocks of text.

 

<p>This is a paragraph of text.</p>

✅ Automatically adds spacing before and after the paragraph.

3. Line Breaks (<br>)

Creates a single line break inside text — useful for poetry or addresses.

<p>Line one.<br>Line two.</p>

⚠️ It’s an empty tag, so it doesn’t require a closing tag.

4. Horizontal Rules (<hr>)

Inserts a horizontal line to divide sections of content.

 

<hr>

🧭 Used for visual separation between content blocks.

5. Bold, Italic, Underline, Strikethrough

Here’s how to format text using various styles:

 

<p><strong>Bold text (important)</strong></p>

<p><b>Bold text (styling only)</b></p>



<p><em>Italic text (emphasis)</em></p>

<p><i>Italic text (styling only)</i></p>



<p><ins>Underlined text</ins></p>

<p><del>Strikethrough text</del></p>

✅ Use <strong> and <em> when you want to add semantic meaning (like emphasis or importance).
✅ Use <b>, <i>, <ins>, and <del> for purely visual purposes.

6. Superscript and Subscript

These are great for math and scientific notations:

<p>Water formula: H<sub>2</sub>O</p>

<p>Exponent: 10<sup>2</sup> = 100</p>

7. Preformatted Text (<pre>)

Displays text exactly as written in the code, preserving spaces, tabs, and line breaks.

 

<pre>

Line 1

    Line 2 (indented)

Line 3

</pre>

💡 Great for showing code snippets or ASCII art.

8. Quotations

There are two types of quotation elements in HTML:
Inline Quote (<q>)

 

<p>She said, <q>This is amazing!</q></p>

📌 Automatically adds quotation marks around the quoted text.

Block Quote (<blockquote>)


<blockquote>

    “The journey of a thousand miles begins with a single step.”

</blockquote>

📌 Indents the quoted text and is used for longer quotes or citations.

✅ Summary of Formatting Tags:

Tag	Purpose
<h1>-<h6>	Headings
<p>	Paragraph
<br>	Line break
<hr>	Horizontal rule
<b><strong>	Bold text
<i><em>	Italic text
<ins>	Underline text
<del>	Strikethrough text
<sub>	Subscript
<sup>	Superscript
<pre>	Preformatted text
<q>	Inline quotation
<blockquote>	Block quotation

---

    Date: 2025-04-05 00:00:00.000000