Table of Contents

What is HTML formatting?

HTML formatting provides the ability to edit and format your text document with the help of formatting tags without using CSS (cascading style sheet). HTML formatting is used for making your text bold, italic, superscript, and subscript, and many more within the paragraph tag or heading tag respectively. HTML formatting is used for making your webpage and website more attractive.

Syntax-    < html start tag > < formatting tag > your text </ formatting end tag ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Formatting tag</title>
  </head>
  <body data-rsssl=1>
    <h1><b>GEEKY4U.com (learn with passion) </b></h1>
    <h2><i>GEEKY4U.com (learn with passion) </i></h2>
  </body>
</html>

Output:

9.1

What are the different types of formatting used in HTML?

1) Use of Bold tag-

In an HTML document if you wish to highlight some content and make it bold then a bold tag is used.

Syntax-    < html start tag > < b > your text </ b ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>bold tag</title>
  </head>
  <body data-rsssl=1>
    <h1><b>GEEKY4U.com (learn with passion) </b></h1>
  </body>
</html>

Output:

9.2

2) Strong / Important-

The strong tag is used when we need to highlight some important content within the HTML document. In HTML Formatting, a strong tag also works as a bold tag.

Syntax-  < html start tag > < strong > your text </ strong ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>strong tag</title>
  </head>
  <body data-rsssl=1>
    <p>GEEKY4U.com (learn with passion) -----------without using strong tag</p>
    <p>
      <strong>GEEKY4U.com (learn with passion)---------with strong tag</strong>
    </p>
  </body>
</html>

Output:

9.3

3) Italic tag in HTML formatting-

An Italic tag in HTML formatting is used for making the text italic. Same as a bold tag italic tag is used inside the paragraph or heading tag.

Syntax-   < html start tag > < I > your text </ I ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Italic tag</title>
  </head>
  <body data-rsssl=1>
    <h1><i>GEEKY4U.com (learn with passion) </i></h1>
  </body>
</html>

Output:

9.5

4) Emphasized tag in HTML Style formatting-

Emphasized tag is used for making text italic. Emphasis tag represented by < em > which is used within a paragraph or heading tag.

Syntax-  < html start tag > < em > your text </ em ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>em tag</title>
  </head>
  <body data-rsssl=1>
    <h1><i>GEEKY4U.com (learn with passion) </i></h1>
  </body>
</html>

Output:

9.5

5) Marked tag in HTML Formatting-

Mark tag is used for marking the very important text within the HTML document.

Syntax-  < html start tag > your text < mark tag > mark your imp text </ mark tag > your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>mark tag</title>
  </head>
  <body data-rsssl=1>
    <h2><mark>GEEKY4U.com </mark> (learn with passion) </h2>
  </body>
</html>

Output:

9.7

6) Smaller tag in HTML Formatting-

A smaller tag is used for making the HTML text small.

Syntax-  < html start tag > your text< small > your text </ small >your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>small tag</title>
  </head>
  <body data-rsssl=1>
    <p>GEEKY4U.com (learn with passion) </p>
    <p><small>GEEKY4U.com (learn with passion) </small></p>
  </body>
</html>

Output:

9.8

7) Delete tag in HTML formatting-

This tag is used to represent the deleted element from your HTML text document. For representing the deleted element, the browser will show a strike line over the deleted text. Delete tag is represented by < del >

Syntax-  < html start tag > your text< del > your text </ del >your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>del tag</title>
  </head>
  <body data-rsssl=1>
    <h1>GEEKY4U.com (learn with passion) <del> (learn with passion) </del></h1>
  </body>
</html>

Output:

9.9

8) Inserted Tag in HTML Formatting-

Inserted tag in HTML formatting will help to display an inserted text. If you use delete tag then it will display strike and at the same time if you use insert tag then the browser will automatically create one underline to the inserted element.

Syntax –   < html start tag > your text< del > your text </ del >your text< ins > your inserted text</ ins ></ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ins tag</title>
  </head>
  <body data-rsssl=1>
    <h1>
      GEEKY4U.com <del> (learn with passion) </del><ins> (learn with passion) </ins>
    </h1>
  </body>
</html>

Output:

9.10

9) Subscript tag in HTML formatting-

HTML formatting supports the subscript tag. This tag will make the text in subscript means the come text is in the normal line and some will be below the normal line. The tag used to represent the subscript tag is < sub >.

Syntax – < html start tag > your text< sub > your text </ sub >your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>subscript tag</title>
  </head>
  <body data-rsssl=1>
    <h1>GEEKY4U.com <sub> (learn with passion) </sub></h1>
  </body>
</html>

Output:

9.11

10) Superscript tag –

HTML formatting also supports the superscript tag. This tag will make the text superscript means they come text is in the normal line and some well above the normal line. The tag used to represent the superscript tag is < sup >.

Syntax – < html start tag > your text< sup > your text </ sup >your text</ html end tag >

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>superscript tag</title>
  </head>
  <body data-rsssl=1>
    <h1>GEEKY4U.com <sup> (learn with passion) </sup></h1>
  </body>
</html>

Output:

9.12

How to change text format in HTML?

We can change the text format of the HTML text document by using the Inline text element. The inline element in the tag will support the paragraph as well as the heading tag with the help of some CSS properties like font-family, font size, or font color.

Example-

				
					<!DOCTYPE html>
<html>
  <head>
    <title>inline style</title>
  </head>
  <body data-rsssl=1>
    <h1 style="background-color: rgba (94, 243, 243, 0.356)">
      GEEKY4U.com(learn with passion)
    </h1>
    <h2 style="background-color: rgb (88, 236, 175)">
      GEEKY4U.com(learn with passion)
    </h2>
    <p style="background-color: rgb (193, 226, 46)">
      GEEKY4U.com(learn with passion)
    </p>
  </body>
</html>

Output:

9.13