HTML Text Formatting

By | October 1, 2021
HTML Text Formatting

In HTML, we have many special elements that can provide special meaning to text content.

Major HTML Formatting Elements

HTML Elements Description
<b> Bold the text
<strong> An alternative for <b>, which tell that this text is essential.
<i> Italic the text
<em> Similar to italic but used when we want to emphasize the text.
<mark> It marks the text with a default “yellow” background colour
<small> Decrease the text size
<del> It prints a cross line over the text.
<ins> Represents the inserted text by putting an underline.
<sub> This element is used to display the subscript.
<sup> It can make a text superscript.

HTML <b> and <strong>

Both the elements can be used to display a bold text, and you could not tell the difference between two texts when they showed on the browser.

Vamware

In HTML 5 we generally use <strong> rather than <b>. <b> tag just used to bold the text it does not specify any meaning, whereas <strong> is used when we want to specify a meaning about the text.

Example

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<b>What's your Name? </b>
<br>
<p>My name is <strong>Tom</strong> <p>

</body>
</html>

Output:

What's your Name? 
My name is Tom

HTML <i> and <em>

The browser will display both the elements text content in an italic format, but both are used in different cases.

If we want to display our content in the italic format, then we use the <i> element. But if we want to emphasize the text that specifies semantic importance, then we use the <em> element; however, you will find no difference when the browser print both elements content.

<i> It's TechGeekBuzz</i>
<p>Welcome to <em>TechGeekBuzz</em></p>

Output

It's TechGeekBuzz
Welcome to TechGeekBuzz

HTML <small>

To display a small text as compared to the default one, we can use the HTML <small> element.

<p><small>Welcome to </small>TechGeekBuzz</p>

Output

Welcome to TechGeekBuzz 

HTML <mark>

The <mark> element can mark or highlight a text content by changing its background colour.

<p> Welcome to <mark>TechGeekBuzz </mark></p>

Output

Welcome to TechGeekBuzz 

HTML <del>

<del> element is used to represent a deleted or removed text. It prints a cross line over the text.

<p> Welcome to <del>TechGeeeekbuzz</del> TechGeekBuzz</p>

Output

Welcome to TechGeeeekbuzz TechGeekBuzz

HTML <ins>

<ins> element is used to represent an inserted or added text. It often uses when we want to represent an answer for fill in the blank.

<p>The approx. value of pi is <ins>3.4</ins></p>

Output

The approx. value of pi is 3.4

HTML <sub>

<sub> stands for subscript, and using this HTML element we can represent one.

<p>The value of log<sub>10</sub> 100 is: 1</p>

Output

The value of log10 100 is: 1

HTML <sup>

<sup> is just opposite of <sub> and it is used to represent superscript text.

<p>The value of 2<sup>3</sup> is: 8</p>

Output

The value of 23 is: 8

Summary

  • In HTML, we have various elements for text formatting.
  • <strong> can work as <b>, but <strong> provide meaning to the text whereas <b> does not.
  • <em> change the text format and provide a meaning to the text whereas <i> only change the text format.
  • <small> element reduce the text size by default one.
  • <mark> highlight the text.
  • <sub> and <sup> are used for subscript and superscript text.

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *