HTML Text Formatting | HTML Basic Formatting Tags and Style

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.

HTML Basic Formatting Tags and Style

{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&lt/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.

Post a Comment

If you have any problem please feel free to contact us by - AKASH TIMES

Previous Next

نموذج الاتصال