What are HTML Basic Formatting Tags? Examples of Different Types of Formatting Tags Used in HTML
Have you used Word Processors like MS Word, WordPad etc.? In that, you have made your text “ Bold, or Italic” This is called Text Formatting.
You can also do Text Formatting in HTML.
Special Elements have been defined separately for Text Formatting in HTML Language. Special Elements are called Formatting Elements.
Formatting Elements defines Text in Special Meaning. like;
- <b> Element defines Bold Text;
- <i> Element represents Italic Text
- <sub> This is subscript and superscript
Apart from these, many types of Formatting Tags have been designed in HTML. About whom are being told below.
{tocify} $title={Table of Contents}
HTML Formatting Elements:
Formatting elements were designed to display particular types of text:
- <b> – Bold Text
- <strong> – Strong Text
- <i> – Italic Text in HTML
- <em> – Emphasized Text
- <strike> – Strikethrough Text
- <u> – Underline Text
- <mark> – Marked Text
- <del> – Deleted Text
- <ins> – Inserted Text
- <sup> – Superscript Text
- <sub> – Subscript Text
- <big> – Bigger Text
- <small> – Small Text
1. Bold Text in HTML
Bold Element is used to define Bold Text in HTML. This makes the text darker and thicker than the text next to it. Bold text in HTML is written like this:
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p><b>This is Bold Text.</b></p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Bold Text.
2. Strong Text in HTML
An important word/syllable is defined by a Strong Element. Strong Element also makes the words darker and thicker than those near it. Strong Element in HTML is defined as follows.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p><strong>This is important text.</strong></p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Important Text.
Bold vs. Strong Element
You must think that when both do the same type of formatting, what is the need for both? And when should one of these be defined?
There is a simple answer to this. You should use a <strong> Element if your word is more important than other words. Otherwise, you use Bold <b> Element.
3. Italic Text in HTML
Italic Element is used to italicize words in HTML Documents. Italic Element makes words slightly slanted compared to other words. Italic Element is defined in this way.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p><i>This is Italic Text.</i></p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Italic Text.
4. Emphasized Text in HTML
Words are also slanted with Emphasized Elements. But, the importance of an Emphasized Text is more than Italic Text. Emphasized Element is defined in this way.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p><em>This is Emphasized Text.</em></p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Emphasized Text.
Italic vs Emphasized Element
Here also you have to remember the same thing which you have done in Bold vs Strong Element.
If the importance of your text is more than other text, then you should use Emphasized Tag. Otherwise, you use Italic Elements.
5. Strikethrough Text in HTML
Strikethrough Element draws a horizontal line in the middle of the word/syllable. This type is defined.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p><strike>This is Strikethrough Text.</strike></p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Strikethrough Text.
6. Underline Text in HTML
You will remember when you used to write notes in school/college and then draw a line under important words or lines. Due to this, that word looked different.
The same work is done in HTML Document with Underline Element. Underline Element draws a horizontal line below the text. It is defined in this way.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p><u>This is Underlined Text.</u></p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Underlined Text.
7. Marked Text in HTML
Marked Text is defined by Mark Element. With this, special words are highlighted. Mark Element is described in this way.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p>This is <mark>Marked</mark> Text.</p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Marked Text.
8. Deleted Text in HTML
The HTML <del> element represents the text that has been deleted from a document. Browsers will usually strike a line through deleted text:
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p>This is <del>Deleted</del> Text.</p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Deleted Text.
9. Inserted Text in HTML
Any word is defined in place of the <del> deleted comment by <ins> Insert Element. Insert Element is described in this way.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p>This is <del>Deleted</del> <ins>Inserted</ins>Text.</p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Deleted Inserted Text.
10. Superscript Text in HTML
Superscript Text is defined by Subscript Element. This text becomes half as compared to the text near it, and users are seen above the word near it. Subscript Text is defined in this way.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p>This is <sup>Superscript</sup> Text.</p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Superscript Text.
11. Subscript Text in HTML
Subscript Element defines Subscript Text. This text is exactly the opposite of Superscript Text. Because this text appears lower than the word near it. Subscript Text is described in this way.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p>This is <sub>Subscript</sub> Text.</p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Subscript Text.
12. Bigger Text in HTML
Larger Text is defined by Big Element. Larger Text becomes slightly bigger than the Text near it. Big Text is described in this way.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p>This is <big>Big</big> Text.</p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Big Text.
13. Small Text in HTML
Small Text is defined by Small Element. Small Text becomes slightly smaller than the Text near it. Small Text is described in this way.
<!DOCTYPE html><html><head><title>Text Formatting Example</title></head><body><p>This is normal text.</p><p>This is <small>Small</small> Text.</p></body></html>{codeBox}
When you see the above code in the browser, you will get this type of result:
Output -
This is Normal Text.
This is Small Text.
What have you learned?
In this Lesson, we have given information about Text Formatting in HTML.
How; Bold, Italic, Strikethrough, Big, Small, Strong etc., be done? We hope that this Lesson will prove useful for you.
Conclusion:
Friends, according to my expertise, I have written complete information to help you on “HTML Text Formatting.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
