tutorialstonight logo
A Platform To Learn To Code

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.

Example

Run the code

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.

Example

Run the code
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.

Example

Run the code

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

Example

Run the code
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

Example

Run the code
output:

This paragraph is underlined



4).Mark HTML

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

see the Example:

Example

Run the code
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:

Example

Run the code
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:

Example

Run the code
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:

Example

Run the code
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:

Example

Run the code
output:

This paragraph has subscript