HTML Formatting

HTML formatting includes many elements which give different styles to the text. These elements can format a simple text in different styles.

For example, we can make bold text by <b>, make the text italic by <i>. In addition to this, we will use different kinds of tags for different purposes.

Italic text

i tag is used to give an italic style to a piece of text. The text will no longer be straight.

<p>This paragraph is without any formatting.</p>
<p><i>This paragraph has been given italic style.</i></p>

Bold text

b tag is used to represent bold text with respect to its surrounding text. It is an inline element.

<p>This text is not bold.</p>
<p><b>The letter heading was highlighted.</b></p>

Its main purpose is to attract the attention of users to specific keywords in a large amount of text.

Underlined text

u element is used to underline text with respect to its surrounding text. It is an inline element.

<p>This paragraph is simple.</p>
<p><u>The underlined text represents the spelling mistakes.</u></p>

Its main purpose is to underline the spelling mistakes in a document.

Emphasized text

em tag is used to emphasize text. It gives emphatic stress to the text.

<p>This paragraph is simple without any formatting.</p>
<p><em>This paragraph is emphasized using em element.</em></p>

This element resembles the italic element in style. But the position of em element in a sentence changes the meaning of the sentence.

They are different with respect to their use but are same with respect to style.

strong element

strong element is used to aware someone about the warning (seriousness), note (importance) or tip.

<p>NOTE: The strong element should be used to represent seriousness, urgency in the text.</p>
<p><strong>NOTE:</strong> The strong element should be used to represent seriousness, urgency in the text.</p>

Both b (bold) and strong elements are same with respect to style but different with respect to their use.

mark element

mark tag is used to mark a piece of text. By default the background color of the marked text is yellow.

<p>This paragraph has not been marked.</p>
<p><mark>This paragraph is marked.</mark></p>

The main use of mark element is to highlight important points which are more relevant to the user's current activity.

small element

small represents the small font-size of text.

<p>Overuse of that thing will cause disaster.</p>
<p><small><strong>Overuse of that thing will cause disaster.</strong></small>

The small element is commonly used for side comments, copyright information or important text.

del element

del element defines the deleted text.

<p>The text was not deleted.</p>
<p><del>The text was deleted.</del></p>

insert element:

ins element is used to represent the addition of text.

<p>Here the text is already present.</p>
<p><ins>Here the new text has been entered.</ins></p>

sub element

sub element defines the subscript in an equation. This element is used to make a subscript. It default font-size is small.

<p>vf = vi+at</p>
<p>v<sub>f</sub>= v<sub>i</sub>+at</p>

sup element

sup element defines the superscript in an equation.

See the example below.

<p>5<sup>2</sup>=25</p>
<p>a<sup>2</sup>=b<sup>2</sup>+c<sup>2</sup></p>

span element

span element is used to style a piece of text. It is used to make annotations.

<p>Here <span style="padding:5px; background-color:lightblue; border:1px solid red;">annotations</span> are made using CSS properties.</p>

Var element:

var element is used to write variables in an expression. For example, S=at²

Here “S” is distance. “a” is acceleration and “t” is time. And these are variables.

<p>Equation of distance is s = vt</p>
<p>Equation of distance is <var>S</var> = <var>v</var><var>t</var></p>