How to make bold, italic, superscript and subscript texts using HTML

With HTML text formatting, you can change the format of text such that:

1. You can make the text bold (using <b> tag).
2. You can make the text strong (using <strong> tag).
3. You can make the text italic (using <i> tag)
4. You can make the text emphasize (using <em> tag).
5. You can make the text mark (using <mark> tag).
6. You can make the text small (using <small> tag).
7. You can make the text strike-through (using <strike> tag).
8. You can make the text delete (using <del> tag).
9. You can make the text inserted (using <ins> tag).
10. You can make the text subscript (using <sub> tag).
11. You can make the text superscript (using <sup> tag).

Now lets see one by one:

1. HTML Bold Texts

The HTML tag <b> can make the text(s) bold.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> These are normal texts. </p>
<p> <b> These are bold texts. </b> </p>
</body>
</html>

Output

These are normal texts.

These are bold texts.

2. HTML Strong Texts

The HTML tag <strong> can make the text(s) strong.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> These are strong texts. </p>
<p> <strong> These are strong texts. </strong> </p>
</body>
</html>

Output

These are strong texts.

These are strong texts.

Strong Texts and Bold Texts

Texts within the <b> element and <strong> element have same visual effect on the web-browser. But don't use <b> tag frequently. Use it only when the other tags are suitable for using such that use <strong> tag for making strong texts and use <em> tag for making emphasized texts and so on.

3. HTML Italic Texts

The HTML tag <i> can make the text(s) italic.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> These are normal texts. </p>
<p> <i> These are italic texts. </i> </p>
</body>
</html>

Output

These are normal texts.

These are italic texts.

4. HTML Emphasized Texts

The HTML tag <em> can make the text(s) emphasize.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> These are normal texts. </p>
<p> <em> These are emphasized texts. </em> </p>
</body>
</html>

Output

These are normal texts.

These are emphasized texts.

Emphasized Texts and Italic Texts

Don't be confused about the using of <em> tag and <i> tag. The <em> tag is used to define emphasized texts in which the word has somewhat internal meaning while the <i> tag is used only for styling the texts in italic style.

5. HTML Marked Texts

The HTML tag <mark> can make the text(s) hightlight.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> These are normal texts. </p>
<p> <mark> These are hightlighted texts. </mark> </p>
</body>
</html>

Output

These are normal texts.

These are hightlighted texts.

6. HTML Small Texts

The HTML tag <small> can make the text(s) small with respect to its surrounding texts.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> These are normal texts. </p>
<p> <small> These are small texts. </small> </p>
</body>
</html>

Output

These are normal texts.

These are small texts.

The <small> tag is used in writing legal disclaimer, in making copyright notice or even in secondary side-bar.
Using of <small> tag is rare in HTML5. Many web developers use CSS properties, "font-family" to adjust size.
It is all depends on the author's notion.

7. HTML Strike-Through Texts

The HTML tag <strike> can make the text(s) Strike-Through.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> These are normal texts. </p>
<p> <strike> These are Strike-Through texts. </strike> </p>
</body>
</html>

Output

These are normal texts.

These are Strike-Through texts.

8. HTML Deleted Texts

The HTML tag <del> can make the text(s) delete.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> These are normal texts. </p>
<p> <del> These are deleted texts. </del> </p>
</body>
</html>

Output

These are normal texts.

These are deleted texts.

More Reference

<strike>, <del> and <s> tags can make strike-through texts horizontally. But their uses are different from each other.
Don't use <strike> tag because it is not supported in HTML5 which is the latest version of HTML.
Use <del> tag when you want to delete anything from the current document or make changes a record from the former or initial name or value.
Use <s> tag to define characters mostly texts that is no longer accurate or related.
To learn <strike> tag, Click here.
To learn <del> tag, Click here.
To learn <s> tag, Click here.

9. HTML Inserted Texts

The HTML tag <ins> can make inserted text.
The texts within the <ins> element will be underlined.
Use this tag only after using <del> tag.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> These are normal texts. </p>
<p> The price of bus fare from A to B is <del> Rs.800 </del> <ins> Rs.600 </ins>. </p>
</body>
</html>

Output

These are normal texts.

The price of bus fare from A to B is Rs.800 Rs.600 .

More Reference

Adding <ins> tag makes the text underlined.
But you should know that <ins> tag is not used only making text underline, it should be an inserted meaningfully. Usually it associates with the <del> tag to make a modification of the former.
The <ins> is used to change the value of the former like price of things, fare, clothes or any other objects.
To learn <ins> tag, Click here.

10. HTML Subscript Texts

The HTML tag <sub> can make the text(s) subscripted.
The texts within the <sub> element will be lower than the normal. It is mostly used for writing Chemical formula.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> The chemical formula of water is H<sub>2</sub>O .</p>
</body>
</html>

Output

The chemical formula of water is H2O .

11. HTML Superscript Texts

The HTML tag <sup> can make the text(s) superscripted.
The texts within the <sup> element will be higher than the normal. It is mostly used in writing Mathematical formula.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Format Learning </title>
</head>
<body>
<p> 2<sup>2</sup>=4.</p>
</body>
</html>

Output

22=4.

Summary

Tag Name Property (Notes)
<b> It defines the bold texts.
<strong> It defines the strong texts.
<i> It defines the underlined texts.
<em> It defines the emphasized texts.
<mark> It defines the highlighted texts.
<small> It defines the small texts.
<del> or <strike> It defines the line-through texts.
<ins> or <u> It defines the underline texts.
<sub> It defines the subscript texts.
<sup> It defines the superscript texts.

More Reference

Using of CSS properties gives you a lot of benefits than the using of HTML elements. If you has some knowledge of HTML knowledge, the following guides would make you a lot of advantages. If you have zero knowledge of CSS and how to use it, read this first HTML CSS
If you want to write whole texts as bold in a paragraph using CSS properties, you would use font-weight as following:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Style Learning </title>
<style>
  p {
        font-weight: bold;
  }
</style>
</head>
<body>
<p> This paragraph has bold texts. </p>
</body>
</html>

Output

This paragraph has bold texts.

Points to be noted

By default, the value of font-weight is set to normal.
The CSS properties should be written within the <style> tag and </style> tag

Similarly, if you want to write underlined texts using CSS property, you would use "text-decoration" with its value underline.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Style Learning </title>
<style>
  p {
        font-weight: bold;
        text-decoration: underline;
  }
</style>
</head>
<body>
<p> This paragraph has bold and underlined texts. </p>
</body>
</html>

Output

This paragraph has bold and underlined texts.

Points to be noted

By default, the value of text-decoration is set to none.

I am not explaining all the CSS properties because there is a lot number of CSS properties.
If you wish to replace <sub> and <sup> element with the CSS properties, use vertical-align properties like the following:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Text Style Learning </title>
<style>
  span , sub{
        vertical-align: -40%;
  }
  sup {
        vertical-align: 40%;
  }
</style>
</head>
<body>
<p> Water is H<span>2</span>O. </p>
<p> Water is H<sub>2</sub>O. </p>
<p> 2<sup>2</sup>=4. </p>
</body>
</html>

Output

Water is H2O.

Water is H2O.

22=4.

Points to be noted

The above two paragraphs has same output. But one use <span> element while the other use <sub>. Here, the only difference between them is the font-size of "2" such that within the <span> element the size of 2 will the original while within the <sub> element the size of 2 will be smaller automatically by the web browser.



Some important questions of this page

1. List any five major functions of HTML text format.

See Answer

Please refer to the above explanation.

2. Which HTML tag can make the text bold?

See Answer

<b> tag

3. Which HTML tag can make the text italic?

See Answer

<i> tag.

4. Which HTML tag can make the text hightlighted?

See Answer

<mark> tag.

5.Which HTML tag can make the text small?

See Answer

<small> tag.

6. Which HTML tag can make the text line-through?

See Answer

<strike> or <del> tag

7. Which HTML tag can make the text subscript?

See Answer

<sub> tag

8. Which HTML tag can make the text superscript?

See Answer

<sup> tag

9. Which CSS property can replace the use of <sub> and <sup> HTML elements?

See Answer

vertical-align property.