HTML TEXT FORMATTING


Generally we need to give extra attention to some specific word or any sentence.

HTML text formatting is the process by which we do that. We use some special tags to format the contents wrapped in between the tags.

HTML text formatting is categorised in two ways:

  1. Physical tag: physical tags are used to give just some visual appearance to the text.
    Example: <b> tag,<i> tag,<u> tag etc.

  2. Logical tag: logical tags give some semantic meaning(used by search engines): and visual appearance.
    Example :<strong> tag,<em> tag etc.

HTML text formatting tags are following:


1).Bold in HTML

HTML has <b> and <strong> tags for formatting texts bold.

<b> tag is a physical tag used to make text bold.<b> tag has no logical meaning.

<p>This paragraph has this part <b>bold</b></p>
Try It

Output:

This paragraph has this part bold


<strong> tag is a logical tag used to make text bold and has logical meaning.This tag is used for giving logical importance to the browser.

<p>This paragraph has this part <strong>strong</strong></p>
Try It

Output:

This paragraph has this part strong


2).HTML italic

HTML has <i> and <em> tags for formatting text italic.

<i> tag is physical tag used to make enclosed content italic.<i> tag has no logical meaning.

<p>This paragraph has this part <i>italic</i></p>
Try It

Output:

This paragraph has this part italic


<em> tag is logical tag used to make enclosed content italic and has logical meaning.It adds semantics importance to the content

<p>This paragraph has this part <em>italic and is important content</em></p>
Try It

Output:

This paragraph has this part italic and is important content


3.).Underline in HTML

Anything written in between <u> and </u> tag shows an underline text

<p><u>This paragraph is underlined</u></p>
Try It

Output:

This paragraph is underlined


4).Mark HTML

Anything written in between <mark> tag shows the enclosed content marked(Highlighted)

see the Example:

<p><mark>This paragraph is marked</mark></p>
Try It

Output:

This paragraph is marked


5).HTML strikethrough

Anything written in between the <strike> tag has a strikethrough. It is a line that crosses the statement.

see the Example:

<p><strike>This paragraph has strikethrough</strike></p>
Try It

Output:

This line has a strikethrough


6).Monospaced font (tt tag in HTML)

<tt> tag gives alphabets of word a equal spacing.As you would have seen alphabets like 'z' take more space than 'i' but using <tt> tag we can five them equal spacing.

see the Example:

<p>After third word <tt>paragraph is monospaced</tt></p>
Try It

Output:

After third word paragraph is monospaced


7).superscript HTML

Anything written in between the <sup> tag is displayed in superscript.The part within the <sup> tag is displayed half a character above the paragraph.

see the Example:

<p>This paragraph<sup>superscript</sup></p>
Try It

Output:

This paragraph has superscript


8).subscript HTML

Anything written in between the <sub> tag is displayed in subscript.The part within the <sub> tag is displayed half a character below the paragraph.

see the Example:

<p>This paragraph<sub>subscript</sub></p>
Try It

Output:

This paragraph has subscript