HTML Text Formatting Tags: A Complete Guide
Introduction
When creating web pages, simply displaying text is not enough. Sometimes, we need to make text bold, italic, highlighted, or underlined to improve readability and emphasize important information.
HTML provides several text formatting tags for this purpose. In this article, we'll explore the most commonly used formatting tags with examples.
What Are HTML Text Formatting Tags?
HTML text formatting tags are used to change the appearance or importance of text without changing its actual content.
These tags help make webpages more attractive and easier to read.
The <b> Tag
The <b> tag is used to display text in bold.
Example
<p>This is <b>bold text</b>.</p>
Output:
This is bold text.
The <strong> Tag
The <strong> tag also makes text bold, but it also indicates that the text is important.
Example
<p>This is <strong>important text</strong>.</p>
The <i> Tag
The <i> tag displays text in italic style.
Example
<p>This is <i>italic text</i>.</p>
The <em> Tag
The <em> tag emphasizes text and usually displays it in italic.
Example
<p>This is <em>emphasized text</em>.</p>
The <u> Tag
The <u> tag underlines the text.
Example
<p>This is <u>underlined text</u>.</p>
The <mark> Tag
The <mark> tag highlights text.
Example
<p>This is <mark>highlighted text</mark>.</p>
The <small> Tag
The <small> tag displays text in a smaller font size.
Example
<p>This is <small>small text</small>.</p>
The <del> Tag
The <del> tag represents deleted text.
Example
<p>The price was <del>$100</del>.</p>
The <ins> Tag
The <ins> tag represents inserted text and is usually underlined.
Example
<p>The new price is <ins>$80</ins>.</p>
The <sub> Tag
The <sub> tag displays subscript text.
Example
<p>H<sub>2</sub>O</p>
Output:
H₂O
The <sup> Tag
The <sup> tag displays superscript text.
Example
<p>x<sup>2</sup></p>
Output:
x²
Difference Between <b> and <strong>
<b> |
<strong> |
|---|---|
| Makes text bold | Makes text bold and indicates importance |
| Used mainly for styling | Used for semantic meaning |
Difference Between <i> and <em>
<i> |
<em> |
|---|---|
| Italic styling | Italic + emphasis |
| Visual effect | Semantic importance |
Best Practices
- Use
<strong>instead of<b>when the text is important. - Use
<em>instead of<i>when emphasizing content. - Avoid overusing formatting tags.
- Use formatting only where necessary.
Conclusion
HTML text formatting tags help improve readability and make important information stand out. Understanding these tags is essential for creating professional and user-friendly webpages.
In the next article, we'll learn about HTML Comments and Attributes.
Frequently Asked Questions (FAQs)
1. What is the difference between <b> and <strong>?
<b> only makes text bold, while <strong> also indicates importance.
2. Which tag is used to highlight text?
The <mark> tag is used to highlight text.
3. Which tag creates italic text?
Both <i> and <em> create italic text, but <em> also adds semantic emphasis.
4. Can I use multiple formatting tags together?
Yes. For example:
<strong><em>Important Text</em></strong>
This will display bold and italic emphasized text.
