HTML5 Tutorial - HTML Text Formatting

HTML Text Formatting

In previous chapter we learnt about HTML file path which very important. Now we will learn how to format the HTML text with predefined HTML formatting elements. I used word 'predefined' just because of these HTML special elements not only give a new shape to the text but it changes the meaning of presence of the text on the web page.

Before we continue take a deep look on below examples:

Example - 1

 
 
 
 
 


  
Tag
  
Uses
  
Displayed on web page
  
Description
 

  
<b>
  
<b>Good</b>
  
Good
  
Defines
  bold text
 

  
<i>
  
<i>Good</i>
  
Good
  
Defines Italic Text
 

  
<strong>
  
<strong>Good</strong>
  
Good
  
Defines
  bold and Important text
 

  
<em>
  
<em>Good</em>
  
Good
  
Defines Italic and Important text
 

  
<big>
  
<big>Progrramers</big>
  
Progrramers
  
Defines
  bigger text
 

  
<small>
  
<small>Progrramer</small>
  
Progrramers
  
Defines smaller text
 

  
<ins>
  
This
  is <ins>inserted</ins> text
  
This
  is inserted text
  
Defines
  inserted text with underline
 

  
<del>
  
This is <del>deleted</del>
  text
  
This is deleted text
  
Defines deleted text
 

  
<sup>
  
10<sup>4</sup>
  
104
  
Defines
  the superscripted text
 

  
<sub>
  
CO<sub>2</sub>
  
CO2
  
Defines the subscripted text
 

  
<mark>
  
This
  is <mark>Marked</mark> text
  
Marked
  
Defines
  the highlighted text with Yellow color
 

Now let’s understand above mentioned tag with description.

Difference between <b> and <strong>

<b> tags are used to look text in bold style. It has no extra importance over the web page but using <strong> in place of <b> is little different. <strong> tags defines the text added with semantic (meaningful) strong importance. In the paragraph we try to pull the attention of reader and users by making text bold, having importance of that bold text over the web page.

Example - 2

This is <b>red apple</b>.

This is red apple.


This is <strong>red apple</strong>.

This is red apple.

Difference between <i> and <em>

<i> tags used to look text in italic style without extra importance while <em> tags used to make text emphasized with extra importance.

Example - 3

This is <i>red apple</i>.

This is red apple.


This is <em>red apple.</em>

This is red apple.

Use of <small> and <big>

<small> tags define smaller text on the web page. <big> tags define bigger text on web page. See below examples:

Example - 4

This is <small>smaller text</small> in the paragraph.

This is smaller text in the paragraph.



This is <big>bigger text</big> in the paragraph.

This is bigger text in the paragraph.

Use of <ins> and <del>

<ins> element defines the added or inserted text on HTML document. <del> element defines that text is removed or deleted. See below examples:

Example - 5

I like <ins>apple</ins> banana.

I like apple banana.




I like to program in <del>Python</del> HTML

I like to program in Python HTML

Use of <sup> and <sub>

<sup> element is used to define superscripts on the web page and <sub>  element is used to define subscript on the web page. See below examples:

Example - 6

This is a mathematical formula  10<sup>4</sup>.


This is a mathematical formula  104. 






The chemical formula of water is H<sub>2</sub>O.


The chemical formula of water is H2O.

Use of <mark>

<mark> element is used to define marked or highlighted text on web page. See below examples:

Example - 7

The <mark>Tajmahal</mark> is one of the seven wonders.

The Tajmahal is one of the seven wonders.

Related Topics