Home 〉 HTML Tutorials 〉 HTML Text Formatting Tags Explained with Examples - Complete Guide

HTML Text Formatting Tags Explained with Examples - Complete Guide !

HTML Text Formatting Tags Explained with Examples - Complete Guide !

What are HTML text formatting tags and how do they work?

HTML text formatting tags like '<b>', '<strong>', '<i>', '<em>', and '<mark>' allow developers to style and highlight parts of their web content. These tags are usually inline elements and are used for emphasizing, styling, or presenting content with specific meaning. This blog post covers each formatting tag, its syntax, usage, and styling. Also included are detailed examples and CSS styling tips. The complete blog post on HTML Text Formatting Tags is as follows.

Introduction

In HTML, text formatting tags are used to style and emphasize parts of the text. These tags help structure content for readability and highlight important sections. Whether you're making text bold, italic, underlined, or highlighted, HTML formatting tags are essential for proper web content presentation.

These tags are mostly inline elements, meaning they do not break the layout or start a new line. In this tutorial, we'll explore all common HTML text formatting tags, their syntax, attributes, styling, and practical use cases.

Common HTML Text Formatting Tags

Below is a list of frequently used HTML text formatting tags:

Tag Description Inline/Block/Empty
'<b>' Makes text bold Inline
'<strong>' Emphasizes importance with bold text Inline
'<i>' Italicizes text Inline
'<em>' Emphasizes with italics Inline
'<mark>' Highlights text Inline
'<small>' Reduces text size Inline
'<del>' Displays deleted text Inline
'<ins>' Displays inserted/underlined text Inline
'<sub>' Subscript text Inline
'<sup>' Superscript text Inline
'<u>' Underlines text (deprecated in HTML5, use CSS instead) Inline
'<code>' Displays code snippet Inline
'<pre>' Preserves formatting and spaces Block

1. '<b>' - Bold Tag

Syntax with Example:

Code : 1 📝

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

output 📌

This is bold text

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Makes the text bold but without implying any special importance.

Example with CSS Styling:

Code : 2 📝

<!DOCTYPE html>
<html>
<body>

<b style="font-size:16px; color:#222;">Bold Example</b>

</body>
</html>

output 📌

Bold Example
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

2. '<strong>' - Important Bold Text

Syntax with Example:

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<p> This is a very <strong>Important message</strong></p?

</body>
</html>

output 📌

This is a very Important message

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Semantically emphasizes the text as important, also bolds it.

Example with CSS Styling:

Code : 4 📝

<!DOCTYPE html>
<html>
<body>

<strong style="color: red;">Warning!</strong>

</body>
</html>

output 📌

Warning!
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

3. '<i>' - Italic Text

Syntax with Example:

Code : 5 📝

<!DOCTYPE html>
<html>
<body>

<p>This is <i>italic</i></p>

</body>
</html>

output 📌

This is italic

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Renders text in italics with no semantic meaning.

4. '<em>' - Emphasized Italic

Syntax with Example:

Code : 6 📝

<!DOCTYPE html>
<html>
<body>

<p>This is <em>emphasized</em></p>

</body>
</html>

output 📌

This is emphasized

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Gives stress emphasis, and browsers render it as italic.

5. '<mark>' - Highlighted Text

Syntax with Example:

Code : 7 📝

<!DOCTYPE html>
<html>
<body>

<p>This is <mark>Highlighted text</mark></p>

</body>
</html>

output 📌

This is Highlighted text

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Highlights text like a marker.

Example with CSS Styling::

Code : 8 📝

<!DOCTYPE html>
<html>
<body>

<mark style="background-color: yellow; padding:2px;">Notice</mark>

</body>
</html>

output 📌

Notice
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

6. '<small>' - Smaller Text

Syntax with Example:

Code : 9 📝

<!DOCTYPE html>
<html>
<body>

<p>This is <small>Fine print text</small></p>

</body>
</html>

output 📌

This is Fine print text

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Decreases text size slightly.

7. '<del>' - Deleted Text

Syntax with Example:

Code : 10 📝

<!DOCTYPE html>
<html>
<body>

<p>This is <del>removed</del> text</p>

</body>
</html>

output 📌

This is removed text

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Displays text with a strikethrough line.

8. '<ins>' - Inserted Text

Syntax with Example:

Code : 11 📝

<!DOCTYPE html>
<html>
<body>

<p>This inserts <ins>New content</ins></p>

</body>
</html>

output 📌

This inserts New content

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Underlines text and indicates it has been inserted.

9. '<sub>' - Subscript

Syntax with Example:

Code : 12 📝

<!DOCTYPE html>
<html>
<body>

<p>Formula: H<sub>2</sub>O</p>

</body>
</html>

output 📌

Formula: H2O

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Lowers the text, often used in chemical formulas.

10. '<sup>' - Superscript

Syntax with Example:

Code : 13 📝

<!DOCTYPE html>
<html>
<body>

<p>Formula: x<sup>2</sup></p>

</body>
</html>

output 📌

Formula: x2

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Raises the text, often used in math expressions.

11. '<u>' - Underlined Text (Deprecated)

Syntax with Example:

Code : 14 📝

<!DOCTYPE html>
<html>
<body>

<p>This is <u>Underlined text</u></p>

</body>
</html>

output 📌

This is Underlined text

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Underlines text, but it's not semantically meaningful. Prefer CSS.

12. '<code>' - Code Snippets

Syntax with Example:

Code : 15 📝

<!DOCTYPE html>
<html>
<body>

Equation : <code>let x = 5;</code>

</body>
</html>

output 📌

Equation : let x = 5;
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Displays text in monospace font for code snippets.

13. '<pre>' - Preformatted Text

Syntax with Example:

Code : 16 📝

<!DOCTYPE html>
<html>
<body>

<pre> 

                    Line 1 
                            Line 2
</pre>

</body>
</html>

output 📌

 
                    Line 1  
                            Line 2
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Preserves formatting, spaces, and line breaks.

CSS Styling (Where Applicable)

These tags are inline, so you can use CSS properties like:

  • 'font-size'
  • 'color'
  • 'background-color'
  • 'padding'
  • 'margin'
  • 'border'
  • 'border-radius'

Example:

Code : 17 📝

<!DOCTYPE html>
<html>
<body>

<b style="font-size:18px; color:blue;">Styled Bold Text</b>

</body>
</html>

output 📌

Styled Bold Text
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Conclusion

HTML text formatting tags help you control the visual appearance and semantic structure of your web content. Whether you want to bold, italicize, underline, highlight, or emphasize your text, these tags make it simple and effective. Proper use of these tags improves both readability and SEO performance.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

What is the difference between '<b>' and '<strong>'?

'<b>' makes text bold without semantic meaning, while '<strong>' indicates importance semantically.

Can I style formatting tags with CSS?

Yes, most formatting tags can be styled using inline or external CSS.

Is '<u>' still recommended for underlining?

No, use CSS like 'text-decoration: underline;' for modern practices.

What is the use of the '<mark>' tag?

It is used to highlight text like with a marker.

Are formatting tags inline or block-level?

Most formatting tags are inline-level.

Previous Post Next Post