October 22, 2011

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.

2 comments:

ielenna said...

thanks for sharing. I am looking for more techniques in formatting my site.

Aileen said...

Ah so that's how we make text effects. Thanks for the comprehensive list. I could use some of these.