HTML - Class 4 Text Formatting in HTML

Assalam u Alikum Guys, 

Welcome again,

Today we learn about Text Formatting in HTML. 

Basically Formatting is known as the appearance or look or presentation of our Text in HTML. Formatting is also know as layout of Text.
HTML provide Tags for Formatting of Text
For Example : Bold Text, Italic Text, Underline Text, Strike Text, Monospaced Font, Super-Script Text, Sub-Script Text, Inserted Text, Deleted Text, Larger Text, Smaller Text, Grouping Content.

One by one all above Tags will Explain with Example.

Bold Text (<b>) Tag

<b> Tag is used Bold the Text in HTML without any extra Importance.
<b> Tag always start with <b> and end with </b>

HTML Example :
---------------------------------------------------------------------------------
<p>My mother has <b>blue</b> eyes.</p>
---------------------------------------------------------------------------------

Italic Text (<i>) Tag

<i> Tag is used make the Text Italic in HTML without any extra Importance. Means Text slant the text little bit toward right side.
<i> Tag always start with <i> and end with </i>

HTML Example :
---------------------------------------------------------------------------------
<p>My mother has <i>blue</i> eyes.</p>
---------------------------------------------------------------------------------

Underline Text (<u>) Tag

<u> Tag is used make the Text Underlined in HTML without any extra Importance. Means all the Text between <u>.........</u> displayed with underline.
<u> Tag always start with <u> and end with </u>

Strike Text () Tag

<strike> Tag put a line through the Text in HTML. Means all the Text between <strike>.........</strike> displayed with Strike-through which is thin line through the Text.
<strike> Tag always begin with <strike> and end with </strike>

HTML Example :
---------------------------------------------------------------------------------
<p>My father has <u>blue</u> eyes.</p>
---------------------------------------------------------------------------------

Mono-spaced Font (<tt>) Tag

<tt> Tag is used in HTML to display the Text in Mono-Spaced means "Each letter in the text have same distance or width with its neighbor letter". Most of the fonts are known as variable-width fonts because different letter have different widths. 

(Example : The Letter "M" has greater width than an another Letter "I") 

but in Mono-Spaced fonts each and every letter has same or equal width.

<tt> Tag always begin with <tt> and end with </tt>

HTML Example :
---------------------------------------------------------------------------------
<p>My <tt>uncle has blue</tt> eyes.</p>
---------------------------------------------------------------------------------

Super-Script Text (<sup>) Tag

The content or Text between the ^.......... Tags/Element is written in form of Super-Script the font size is same as the character surrounding it but is displayed half a character's height. 

(Example : Mostly in mathematics we write "Square of 'x' " as X² is the Example of Super-Script).

HTML Example :
---------------------------------------------------------------------------------
<p>The Square of 'x' " is written as X². 2 is Super-Script(X²).</p>
---------------------------------------------------------------------------------

Sub-Script Text (<sub>) Tag

Its description is totally as same as the Super-Script. The Difference is 
_......... element is used. 
(Example : Mostly in Chemistry we write a Formula "H2O" as H₂O is the Example of Sub-Script).

HTML Example :
---------------------------------------------------------------------------------
<p>In the formula "H<sub>2<sub>O" is written as as H₂O  . 2 is Sub-Script.</p>
---------------------------------------------------------------------------------

Inserted Text (<ins>) Tag

Anything that is Appeared within the <ins>.......</ins> element is displayed or present as Inserted Text.The formal difference between depends on the HTML specification that we choose to regard as official.

HTML Example :
---------------------------------------------------------------------------------
<p>My mother has <ins>blue</ins> eyes.</p>
---------------------------------------------------------------------------------

Deleted Text (<del>) Tag

Anything that is Appeared within <del>.......</del> element is displayed or present as Deleted Text.The formal difference between depends on the HTML specification that we choose to regard as official.

HTML Example :
---------------------------------------------------------------------------------
<p>My mother has <del>brown</del> eyes.</p>
---------------------------------------------------------------------------------

Larger Text (<big>) Tag

Anything that is written within the <big>.......</big> element is displayed little bit larger or one font larger than the rest of Text.

HTML Example :
---------------------------------------------------------------------------------
<p>My father has <big>black</big> eyes.</p>
---------------------------------------------------------------------------------

Smaller Text (<small>) Tag

Anything that is written within the <small>.......</small> element is displayed little bit smaller or one font smaller than the rest of Text.

HTML Example :
---------------------------------------------------------------------------------
<p>My sister has <small>green</small> eyes.</p>
---------------------------------------------------------------------------------

Grouping Content (<div>, <Span>) Tag

In HTML <div>, <Span> tags are used for grouping the elements or allow us to group together several elements to create sections or sub sections of page.
Means the Tag divide the elements in Block Form. 
(Example : More than one <p> or other tags within <div>........</div> elements and also can apply same designing to all elements in that <div>.)
The <span> tag enable in Web page to group/blocked inline-elements in a document/Web page.

The <span> tag makes no visual effect by itself.

HTML Example :
---------------------------------------------------------------------------------
<div style="color:#0000FF">
  <h3>This is Div Example heading</h3>
  <p>This is Div Example paragraph.</p>
</div>
---------------------------------------------------------------------------------
<p>My baby has <span style="color:blue">blue</span> eyes.</p>
---------------------------------------------------------------------------------


Thanks for paying attention !

NOTE : Friends and Fellow Plzzzzzzzzzzzzzzzzz Follow me to get my post. You get Notification on each new Post. Thank You.


If you get any Mistake or any confusion in POST so plzzzzzzz tell in Comments. Questions are also be Entertained.

Tutor : Asad Saleem