Home » Learn Code » HTML5 » HTML text formatting tags explained? How to use text formatting tags in HTML?

HTML text formatting tags explained? How to use text formatting tags in HTML?

text formatting in html

In this lesson, we’ll discuss text formatting in HTML. Then, I’ll explain all the text formatting tags. After that, we’ll discuss the paragraph tag.

So Let’s Start:

What is Text Formatting in HTML?

It is the process of giving the text a better look and feels. As you know, when we format text in Microsoft word or excel with colours, underlines and font sizes tools all we do so that our text headings and paragraphs data look more clear and feel good. Similarly, we use some text formatting tags to in HTML to format text our text files.

What types of formatting we can do?

So in HTML, we can change our font size, font style, text colours, highlight text, underline, bold, italic, subscript, superscript and strikethrough.

HTML Text Formatting tags:

  • <i> —- Italic Text
  • <em> —- Emphasized Text
  • <b> —- Bold Text
  • <strong> —- Important Text
  • <u> —- Underline Text
  • <ins> —- inserted Text
  • <small> —- Small Text
  • <mark> —- Marked Text
  • <del> —- Deleted Text
  • <sup> —- Superscript Text
  • <sub> —- Subscript Text

Explanation:

<i> italic & <em> emphasized tags difference:

Firstly, the text inside these tags will be displayed italic. Secondly, these both tags are the same you can use both for the same purpose. But you should use emphasized tag for this. The syntax is given below:

<p> text inside this is <i> italic </i> </p>
<p> text inside <em> this </em> is emphasized </p>

<b> bold and <strong> strong tags difference:

Basically, these both tags do the same work. The text inside these tags will be displayed bold. But you should use the strong tag. See the syntax below:

<b> text inside this is bold </b>
<p> text inside <strong> this is bold </strong> and important text </p>

<u> underline & <ins> tags difference:

These tags use for displaying underline text. Both these tags have the same purpose. So, you can see the syntax given below:

<p> <u> text is underline </u> </p>
<p> this will be <ins> underline too </ins> </p>

<small> small & <mark> mark tags difference:

So, the text inside the small tag will display a small size. But you can use CSS properties for this too. You can see CSS tutorials for this. And then, the text inside the mark tag will display highlighted. Let’s see the syntax below of how to:

<p> <small> text will be small </small> </p>
<mark>  for highlighting text color in yellow </mark>

<del> strikethrough difference:

So, the name explains the tags the del tag use for strikethrough. Also, we say del tag a delete tag. See the syntax below:

<p> this will strikethrough the <del> text </del> </p>

<sup> & <sub> tags difference:

So, these tags are for superscript and subscript text. Inside these tags, the text will be like in a base and power. See Syntax below:

<p> text is <sup> superscript </sup> and this is <sub> subscript </sub> </p>

All tags are included in this code below:

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title> my webpage </title>
</head>
<body>

 <p> The text inside i tags is <i> italic </i> </p>
 <p> The text inside em tags is <em> emphasized </em> </p>
 <p> The text inside b tags is <b> bold </b> </p>
 <p> The text inside strong tags is <strong> important </strong> </p>
 <p> The text inside u tags is <u> underline </u> </p>
 <p> The text inside ins tags is <ins> inserted text </ins> </p>
 <p> The text inside mark tags is <mark> marked </mark> </p>
 <p> The text inside del tags is <del> deleted text </del> </p>
 <p> The text inside small tags is <small> smaller text </small> </p>
 <p> The text inside sub tags is <sub> subscript text </sub> </p>
 <p> The text inside sup tags is <sup> superscript text </sup> </p>

</body>
</html>

After coding, this will look like this in the browser.

text formatting tags in HTML

<p> paragraph tag:

Recently, you see above that I use p tag a lot in the above coding this is because the p tag is a paragraph tag. Paragraph uses in HTML to create text paragraphs. So, I use this to create a paragraph of text and then I use text formatting tags to format the text. Without p tag browsers do not understand that so we must first create a paragraph.

At last, I hope you will have understood well about the text formatting in HTML. So, keep practising and build something to become an expert in HTML and google for more information. In our next lesson, we will discuss HTML Quotations and HTML comments.

Also, see our What is CSS? What CSS stands for? And How to use CSS in webpages? guide.

If you have any question, then please ask in the comment section below.

4 thoughts on “HTML text formatting tags explained? How to use text formatting tags in HTML?”

Leave a Reply

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