❮ Previous Next ❯

HTML Text Format

With HTML text formatting, you can change the format of the text in the following way:

  1. Bold text using <b> tag
  2. Strong text using <strong> tag
  3. Italic text using <i> tag
  4. Emphasize text using <em> tag
  5. Mark text using <mark> tag
  6. Small text using <small> tag
  7. Strike-though text using <strike> tag
  8. Deleted text using <del> tag
  9. Inserted text using <ins> tag
  10. Superscript text using <sup> tag
  11. Subscript text using <sub> tag

1. HTML bold text

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

Example of using <b> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <b> tag </title>
</head>
<body>

<p>
<b>Football</b> is my favourite sport.
</p>

</body>
</html>
Run The code »

Output

Football is my favourite sport.

2. HTML strong text

The HTML <strong> tag can make the text(s) strong with semantic meaning rather than just its visual apperance.

Example of using <strong> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <strong> tag </title>
</head>
<body>

<p>
 Please agree the <strong> Terms and Conditions </strong> before submitting the form.
</p>

</body>
</html>
Run The code »

Output

Please agree the Terms and Conditions before submitting the form.

<strong> tag is a phrase tag so it helps in SEO and page visibility on search engine result.
There are two HTML tags that can make bold text. - <b> and <strong>.The texts or characters within all these elements will be rendered in the same style (bold text) but their purposes and when to use are different.

3. HTML Italic text

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

Example of using <i> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <i> tag </title>
</head>
<body>

<p>
 The scientific name of snake is <i> Serpentes </i>.
</p>

</body>
</html>
Run The code »

Output

The scientific name of snake is Serpentes .

4. HTML emphasized text

The HTML <em> tag can make emphasized text.

Example of using <em> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <em> tag </title>
</head>
<body>

<p>
 <em> Do your homework. </em>
</p>

</body>
</html>
Run The code »

Output

Do your homework.

Both <em> and <i> elements's content will be in italic style.

Key difference: The <i> tag is mainly used to define a text (may be scientific names, terms, book names etc.) in italic style for visual styling only whereas the <em> defines an important text having semantic meaning (which helps in screen readers, SEO) rather than its appearance.

5. HTML marked text

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

Example of using <mark> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <mark> tag </title>
</head>
<body>

<p>
 <mark> Highlighted text </mark>
</p>

</body>
</html>
Run The code »

Output

Highlighted text

6. HTML small text

The HTML <small> tag can make the text(s) smaller compairing with the surrounding text.

Example of using <small> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <small> tag </title>
</head>
<body>

<p>
 Read <small>Disclaimer section</small>
</p>

</body>
</html>
Run The code »

Output

Read Disclaimer section

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 property "font-family" to adjust font size. It's all depend on the author's notion.

7. HTML strike through text

The HTML <strike> tag can create strike-through over texts horizontally. It is out-dated in HTML5.

Example of using <strike> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <strike> tag </title>
</head>
<body>

<p>
 I want <strike> icecream </strike> noodles.
</p>

</body>
</html>
Run The code »

Output

I want icecream noodles.

8. HTML deleted text

The HTML <del> tag creates line-through text. It is used to define texts that has been deleted from a document. It must be followed by <ins> element to specify the updated records.

Example of using <del> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <del> tag </title>
</head>
<body>

<p>
 The meeting date was <del> Dec 10, 2026 </del> and has been updated to <ins> Dec 15, 2026 </ins>.
</p>

</body>
</html>
Run The code »

Output

The meeting date was Dec 10, 2026 and has been updated to Dec 15, 2026 .

There are three HTML tags that can make strike-through text. - <del>, <s> and <strike>. But their uses are different from each other.
Don't use <strike> tag since it is not longer supported in modern HTML.
Both <del> and <s> tags have semantic meaning.
Use <del> tag to define deleted text from the current document or make changes a record from the former value.
Use <s> tag to define characters (mostly texts) that is no longer accurate or related.

9. HTML inserted text

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

Example of using <ins> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <ins> tag </title>
</head>
<body>

<p>
 The product costs <del> Rs.800 </del> <ins> Rs.599 </ins>
</p>

</body>
</html>
Run The code »

Output

The product costs Rs.800 Rs.599

<ins> tag is not used only for making underlined text, it must be inserted meaningfully. Usually it associates with the <del> tag to make modification of the former value. It is mainly used to change the value of the former like price of things, fare, clothes or any other objects.

10. HTML subscript text

The HTML <sub> tag can make subscripted text. The texts within this element will be lower than the normal. It is mainly used in writing chemical formulas and mathematical variables.

Example of using <sub> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <sub> tag </title>
</head>
<body>

<p>
 The chemical formala of water is H<sub>2</sub>O.
</p>

</body>
</html>
Run The code »

Output

The chemical formala of water is H2O.

11. HTML superscript text

The HTML <sup> tag can make supercripted text. It is mainly used in writing the exponent with respect to a base.

Example of using <sup> tag 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of <sup> tag </title>
</head>
<body>

<p>
 3<sup>2</sup>=9.
</p>

</body>
</html>
Run The code »

Output

32=9.

Summary

Tag Purpose
<b> Bold text
<strong> Strong text
<i> Italic text
<em> Emphasized text
<mark> Highlighted text
<del> and <strike> Line-through text
<ins> and <u> Underlined text
<sub> Subscripted text
<sup> Supersripted text

More reference

Using CSS properties provides more flexible in styling rather than using HTML elements. If you are not familiar with HTML or CSS, click here to learn how to link CSS to an HTML document.
The following example is how to display bold text, underlined text and italic text using CSS properties.

Example 1 (Valid)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of CSS properties </title>

<style>
 p {
    font-weight: bold;
    text-decoration: underline;
    text-decoration: line-through;
 }
</style>

</head>
<body>

<p>
Bold, Italic and Underlined text paragraph.
</p>

</body>
</html>

Output

Bold, Italic and Underlined text paragraph.

CSS properties must be defined inside the <style> element, also which must be used within the <head> element.

font-weight:bold; - It makes the bold text.
text-decoration:underline; - It makes the underlined text.
text-decoration:line-through; - It makes the strike-through text.

By default, the value of font-weight is set to normal; the color of the text is black; and the value of text-decoration is none.

Example 2 (Valid and Advance)

Giving a class name to an HTML element (say <p> tag) allows to style them individually. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of CSS properties </title>

<style>
.bold-para {
    font-weight: bold;
 }
 
 .underline-para {
    text-decoration: underline;
 }
 
 .red-color-para {
    color: red;
 }
 
</style>
</head>
<body>

<p class="bold-para">
 Paragraph-1
</p>

<p class="underline-para">
 Paragraph-2
</p>

<p class="red-color-para">
 Paragraph-3
</p>

</body>
</html>
Run The code »

Output

Paragraph-1

Paragraph-2

Paragraph-3

HTML class name is case-sensitive starting with dot(.)
To style a single text or just a character, we must enclose them within the <span> element giving a class name.

Replacement of <sub> and <sup> tags using CSS property- vertical align

Making superscript and subscript texts using HTML elements is possible, but can't control the custom vertical alignment of the texts. CSS property- vertical align can adjust the position of the text. 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Using of CSS properties </title>

<style>
.span {
    vertical-align: -40%;
    font-size: 15px;
 }
 
</style>
</head>
<body>

<p>
 Water is H<span>2</span>0. <br>
 Water is H<sub>2</sub>0. <br>
 2<sup>2</sup>=4.
</p>

</body>
</html>

Output

Water is H20.
Water is H20.
22=4.

Using <sub> and <sup> tags lowers the text size by default. If the parent text is 16px, the <sub> or <sup> text usually becomes about 12–13px (roughly 75%–83% of the parent size depending on the browser).
We have to set custom font-size if the property- <span> tag is used.

Can you answer it?

  1. List any five major functions of HTML text format.
    Please refer to the above explaination.
  2. Which HTML tag can make the text bold?
    <b> and <strong> tags
  3. Which HTML tag can make the text italic?
    <i> tag
  4. Which HTML tag can make the hightlighted text?
    <mark> tag
  5. Which HTML tag can make the small text?
    <small> tag
  6. Which HTML tag can make the line-through text?
    <strike>, <s> and <del> tags
  7. Which HTML tag can make the superscript text?
    <sup> tag
  8. Which HTML tag can make the subscript text?
    <sub> tag
❮ Previous Next ❯