Text Formatting Tags in HTML

HTML Formatting

Through text formatting tags in HTML, we can make our content more attractive. We use HTML formatting tags to tell the browser how our content should be displayed. HTML formatting allows us to style our text in various ways.

Text formatting tags in HTML give us the freedom to italicize, underline or make our text bold just like in MS word. We can also write mathematical and chemical formulas using HTML text formatting tags.

For example in the image below, we have used formatting tags to display bold, italic, superscript, and subscript text

Text Formatting Tags

There are various types of formatting tags available to us through which we can write texts in different styles and formats. Different types of formatting tags are:

1. Bold tag
2. Italic tag
3. Underline tag
4. Mark tag
5. Strike tag
6. Monospace tag
7. Subscript tag
8. Superscript tag
9. Delete and Insert tag
10. Big and Small tag

Bold Text

Bold texts are used to highlight words that are important. They are also used to write title and headings in atricles. In HTML we have <b> and <strong> tags to write bold texts.

<b> tag - It does not hold any extra importance other than making text bold.

<strong> tag-Other than making text bold <strong> tag have symantic importance and it is used to give extra stress and emphasize important words.

<b> and <strong> tag are used to write in bold font.

<b> and <strong> tags are non void elements so they must have a closing tag.

Syntax:

In the example below, "Formatting tags" is written with bold tag to write in bold font and "Helpful" is written with strong tag to give emphasis on the word "Helpful".

Example:

Output:

Italic Text

Italics font is used to emphasize titles of articles, stories, poems, etc. In HTML, we can italicize our text using <i> and <em> tag.

<i> tag - This tag is just used to write text in italic font, it does not hold any special meaning.

<em> tag - It is used to emphasize the text. Screen readers put extra verbal stress while reding the text in <em> tags. <em> tag was intoduced in HTML5.

<i> and <em> tags are used to write in italic font.

<i> and <em> tags are non void elements therefore they must have a closing tag.

Syntax:

In the example below, "Formatting tags" is written using <i> tag and BEST! is written using<em> tag to emphasize the word BEST!.

Example:

Output:

Underlined Text

Underline tags are used on important words which require the attention of readers or can be used to underline headings or subheadings.

It is used to underline a word.

<u> tag is a non-void element therefore it must have a closing tag.

Syntax:

"Formatting tags" is underlined using <u> tag in the example below.

Example:

Output:

Marked Text

This tag is relatively a new tag that was introduced in HTML5. It is used to highlight a word in a sentence. Mark tag highlights the words by giving them a yellow background. It is supported by all major browsers.

Mark tag is used to highlight a word.

<mark> tag is a non-void element therefore it must have a closing tag.

Syntax:

Here "Formatting tags" is highlighted with a yellow background using <mark> tag.

Example:

Output:

Striked Text

In HTML4 <strike> tag is used to put a horizontal line through words. It can be used in articles to show that some items are deleted or updated from a list or article.

In HTML5 <s> tag is used to write striked text. It is used when a word is no longer relevent or requierd in an article. We should not use <s> tag to represent deleted text <del> tag must be used in that case.

Monospace Font

This tag is used to display text as it would display on fixed width displays such as line printer, teletype, etc. The browser renders the text enclosed in <tt> tags in monospace font. It is no longer supported in HTML5. Instead of <tt> tag we can use <code>, <pre>, <kbd>, <var>, <samp> or CSS.

Subscript Text

A Subscript is a letter, symbol or a number which is usually in a smaller font size and half a character below the normal line. Subscript tags are used to write chemical formulas like $H_{2}O$, $N_{2}O$, etc. Here 2 is a subscript.

This tag is used to write the subscripts.

<sub> tag is a non-void element therefore it must have a closing tag.

Syntax:

As shown in the example below, 2 is a subscript and it is written using <sub> tag.

Example:

Output:

Superscript Text

A Superscript is a number, letter or symbol which is usually in a smaller font size and half a character above the normal line. Superscript tags are used to write mathematical equations like $x^2+y^2$. Here 2 is a superscript.

This tag is used to write superscripts.

<sup> tag is a non-void element therefore it must have a closing tag.

Syntax:

In the equation shown in the example below, 2 is a subscript generated using <sup> tag.

Example:

Output:

Deleted and Inserted Texts

When we have to update something in our article we use delete and insert tags.Delete tag is used for text which is no longer required or has to be deleted. Browsers render deleted text as strike-through text. While <ins> tag is used to insert updated or new text in the article. Text enclosed by <ins> tag is renderd as underlined text by browsers.

Delete and insert tags are used to add and remove words.

<del> and <ins> tags are non void elements therefore they must have a closing tag.

Syntax:

HTML4 is deleted using <del> tag and HTML5 is inserted using <ins> tag as shown in exmple below.

Example:

Output:

Big and Small Texts

HTML <big> tag makes the font of text one size bigger than the surrounding text i.e from small to medium, medium to big.

HTML <small> tag makes font of text one size smaller than the surrounding text i.e from big to medium, medium to small.