Online Web Development Tutorials

HTML formatting tags are used for formatting a text style.There are many formatting tags in HTML. These tags are used to make text bold (), italicized (), or underlined ().

Tag	Example	Results
<b>	<b>Bold Text</b>	An example of Bold Text
<big>	<big>Big Text</big>	An example of Big Text
<center>	<center>Center Text</center>	An example of Center Text
<em>	<em>Emphasized Text</em>	An example of Emphasized Text
<i>	<i>Italic Text</i>	An example of Italic Text
<small>	<small>Small Text</small>	An example of Small Text
<strong>	<strong>Strong Text</strong>	An example of Strong Text
<sub>	<sub>Subscript Text</sub>	An example of _{Subscript Text}
<sup>	<sup>Superscript Text</sup>	An example of ^{Superscript Text}
<del> <s> <strike>	<del>Delete Text</del> <s>Strike Text</s> <strike>Strike Text</strike>	An example of ~~Delete Text~~ An example of ~~Strike Text~~ An example of ~~Strike Text~~
<u>	<u>Underline Text</u>	An example of Underline Text
<tt>	<tt>Teletype Text</tt>	An example of `Teletype Text`
<blockquote>	<blockquote>Long Quotation</blockquote> <q>Short Quotation Text</q>	An example of Long Quotation Text An example of Short Quotation Text

Bold Text

The HTML  element defines bold text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bold Text Example</title>
</head>
<body>
    <p><b>This text is bold</b></p>
 </body>
</html>

Italic Text

The HTML  element defines italic text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Italic Text Example</title>
</head>
<body>
    <p><i>This text is italic</i></p>
 </body>
</html>

Underline Text

The HTML  element is used for underlined text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Underlined Text Example</title>
</head>
<body>
    <p><u>This text is underlined</u></p>
 </body>
</html>

Mark

Use the  tag if you want to highlight parts of your text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mark Text Example</title>
</head>
<body>
    <p>Do not forget to learn <mark>poem</mark> today.</p>
 </body>
</html>

Strike Text

The HTML <strike></strike> element is displayed with strikethrough. It is a thin line which cross the statement..

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Strike Text Example</title>
</head>
<body>
    <p><strike>This text with strike</strike></p>
 </body>
</html>

Monospaced Font

If you want that each letter has the same width then you should write the content within <tt>...</tt> element. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width..

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Monospaced Font Example</title>
</head>
<body>
    <p>Hello <tt>My Paragraph in monospaced font.</tt></p>
 </body>
</html>

Superscript Text

The content of a .... element is written in superscript, the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Superscript Text Example</title>
</head>
<body>
    <p>Hello <sup>My Paragraph in Superscript.</sup></p>
 </body>
</html>

Subscript Text

The content of a .... element is written in superscript, the font size used is the same size as the characters surrounding it but is displayed half a character's height below the other characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Subscript Text Example</title>
</head>
<body>
    <p>Hello <sub>My Paragraph in Subscript.</sub></p>
 </body>
</html>

Deleted Text

Anything that puts within <del>...</del> is displayed as deleted text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deleted Text Example</title>
</head>
<body>
    <p>Hello <del>Delete my paragraph.</del></p>
 </body>
</html>

Inserted Text

Anything that puts within <ins>...</ins> is displayed as inserted text.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inserted Text Example</title>
</head>
<body>
    <p>Hello <del>Delete my paragraph.</del><ins>Write another paragraph.</ins></p>
 </body>
</html>

Large Text

The content of the <big>....</big> element is displayed one font size larger than the rest of the text surrounding it as shown below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Large Text Example</title>
</head>
<body>
    <p>Hello <big>Write the paragraph in large font.</big></p>
 </body>
</html>

Small Text

The content of the ... element is displayed one font size smaller than the rest of the text surrounding it as shown below

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Small Text Example</title>
</head>
<body>
    <p>Hello <small>Write the paragraph in large font.</small></p>
 </body>
</html>

HTML Formatting