Text Formatting

In the previous lesson, you have written a short code to show that you can write HTML. It feels good, right? But I know you still want to improve the look and feel of your webpage. You want some text to be noticeable, want to bold some text and use italics. Below is the list of tags used in formatting text.

TAG	Normal Text	Browser Display	Function
<b>	not formatted	formatted	It defines bold text
<i>	not formatted	formatted	It defines italic text
<em>	not formatted	formatted	It defines emphasized text
<strong>	not formatted	formatted	It defines strong text
<small>	not formatted	formatted	It defines small text
<big>	not formatted	formatted	It defines big text
<del>	not formatted	formatted	It defines deleted text
<ins>	not formatted	formatted	It defines inserted text
<sub>	not formatted	normalformatted	It defines subscripted text
<sup>	not formatted	normalformatted	It defines superscripted text
<code>	not formatted	formatted	It defines computer code text
<kbd>	not formatted	formatted	It defines keyboard text
<samp>	not formatted	formatted	It defines sample computer code
<tt>	not formatted	formatted	It defines teletype text
<abbr>	not formatted	formatted	It defines an abbreviation
<acronym>	not formatted	formatted	It defines an acronym
<address>	not formatted	formatted	It defines contact information
<q>	not formatted	formatted	It defines a short quotation
<cite>	not formatted	formatted	It defines a citation

There are two main types of formatting tags, the presentational or physical tags and the logical or idiomatic tags. Physical tags are also called as presentational tags. If the browser, let say, does not support the said tag the browser will just ignore the tag. Logical tags are also called as idiomatic tags, if the browser does not support the said tag it will find a way to emphasize or to make it stand out from the rest of the text, it could be in boldface or italic.

Examples of physical tags are the <b>, <i>, <small>, <big>, <sup>, <sub>, etc. Whereas <em>, <strong>, <ins>, <del>, <address>, etc. are examples of logical tags.

Physical tags	Browser Display
<b>happy</b>	happy
<i>happy</i>	happy
<u>happy</u> (deprecated)	happy
<s>happy</s> (deprecated)	happy
<strike>happy</strike>	happy
<small>happy<small>	happy
<big>happy</big>	happy
x<sup>2</sup>	x2
H<sub>2</sub>O	H20

Logical Tags	Browser Display
<strong>happy</strong>	happy
<em>happy</em>	happy
<ins>happy</ins>	happy
<del>happy</del>	happy
<code>happy</code>	happy

NOTE: Both logical and physical tags are container elements; requiring an opening and closing tag. Moreover, the character or formatting tags can also be nested to format some text as <b><i><ins>happy</ins></i></b> which will be displayed in the browser as happy.
Deprecated tags and attributes are parts of the HTML standard code which are no longer recommended. Several browsers provide support to deprecated tags and attributes, but in the future this may change.