Formatting Tags

HTML Formatting Tags are used to change appearance of text for its better looks. HTML provides faster way  to format text without using CSS. All the formatting tags are container tags and must be closed to end its formatting effect. One can understand HTML formatting tags easily if they have knowledge about word processor software/application. Below are the list of HTML format tags:-

List of Format Tags

  • Bold Tag <b>
  • Italic Tag <i>
  • Underline Tag <u>
  • Strong Tag <strong>
  • Small Tag <small>
  • Big Tag <big>
  • Mark Tag <mark>
  • Emphasized Tag <em>
  • Deleted Tag <del>
  • Inserted Tag <ins>
  • Subscripted Tag <sub>
  • Superscripted Tag <sup>
  • Teletype Tag <tt>
  • Font Tag <font>

Detailed notes about HTML formatting tags

Bold and Strong
These tags are used to make any text darker than normal. We can use these tags to highlight any text in bold format. Bold tag is represented as <b> and strong is represented as <strong>

Italic and Emphasized
This tag is used to make any text oblique. Italic tag is represented as <i> and emphasized tag is represented as <em>

Underline
This text is used to underline text written between <u>...</u> tag.

Samll
This tag is used to decrease the font size by one unit from base font size.This tag is written as <small>...</small>

Big
This tag is used to increase the font size by one conventional unit. This tag is written as <big>...</big>

Mark
This tag is used to mark OR highlight text. This tag is written as <mark>...</mark>

Delete and Strike
Strike tag is used to draw a strike-through on a section of text. Delete tag is used to display the deleted content. Both tag has strike strike-through effect.

Note: Strike tag is not supported in HTML5. This tag can be represented as <s> OR <strike>.

Inserted Tag
This tag is represented as <ins>. The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text.

Subscript
Subscript text appears half a character below the normal line. This tag is written as <sub>...</sub>

Superscript
Superscript text appears half a character above the normal line. This tag is written as <sup>...</sup>

Teletype
This tag is used to appear a text in teletype. this is not supported in HTML5. In a teletype font, however, each letter has the same width. This tag is represented as <tt>..</tt>

Font
HTML <font> tag is used to define the font style for the text contained within it. It is used to defines the formatting of font size, color, and face or the text in an HTML document.

Note: Above all are container tags that have starting and ending tag.

Example 1



<!DOCTYPE html>
<html>
<body>

<p>I am <b>bold</b> and I am <strong>strong</strong>.</p>
<p>I am <i>italicized</i> and I am <em>emphasized</em>.</p>
<p>I am <u>underlined text</u>.</p>

<p>I am <big>big text</big> one point larger.</p>
<p>I am <small>small text</small> one point smaller.</p>
<p>I am <mark>marked text</mark>.</p>
<p>I am <del>deleted text</del> and I am <s>striked text</s>.</p>
<p>I am <ins>inserted text</ins>.</p>
<p>SubScript example 1 as chemical formula H<sub>2</sub>SO<sub>4</sub> and example 2 R<sub>x</sub>.</p>
<p>SuperScript example 1 as mathematical formula (a+b)<sup>2</sup> and example 2 10<sup>th</sup>.</p>
<p>I am example of <tt>teletype text</tt>.</p>

</body>
</html>

I am bold and I am strong.

I am italicized and I am emphasized.

I am underlined text.

I am big text one point larger.

I am small text one point smaller.

I am marked text.

I am deleted text and I am striked text.

I am inserted text.

SubScript example 1 as chemical formula H2SO4 and example 2 Rx.

SuperScript example 1 as mathematical formula (a+b)2 and example 2 10th.

I am example of teletype text.



Font

The font tag is used to format text in some more advanced way. A font tag has following attributes

Font Size
This is numeric values range from 1 to 7. 1 is the smallest, 7 is the largest, 3 is the default. Relative values can be values such as +1 or -2, increasing by one font size or decreasing by 2 font sizes, respectively.

Font Color
This attribute is used to change color of text in either hexadecimal ie: #RRGGBB format OR named color ie: black, red, white.

Note: Use American English for the word color. Never use British English like colour.

Font Face
This attribute is used to change text type/style/looks using font name for text. Multiple font names can be listed separated by comma.

Note: Font tag is not supported in HTML5.

Browser Compatibility

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example 2



<!DOCTYPE html>
<html>
<body>

<p>Example 1 <font color="green">font color is red using a named color</font></p>

<p>Example 2 <font color="#a3000b">font color is dark red using hexadecimal format</font></p>

<p>Example 3 <font face="Verdana, Geneva, sans-serif">font face is a different font family</font></p>

<p>Example 4 <font size="5">font size is 5 using numeric value</font></p>

<p>Example 5 <font size="+2">font size is two font sizes bigger using a relative value</font></p>

<p>Example 6 <font color="red" face="Verdana, Geneva, sans-serif" size="5">Font Attributes: FACE, COLOR and SIZE</font></p>

</body>
</html>

Example 1 font color is red using a named color

Example 2 font color is dark red using hexadecimal format

Example 3 font face is a different font family

Example 4 font size is 5 using numeric value

Example 5 font size is two font sizes bigger using a relative value

Example 6 Font Attributes: FACE, COLOR and SIZE