HTML TUTORIAL PART 5 :EXPLANATION OF CHARACTER FORMAT TAGS

HTML TUTORIAL PART 5 :EXPLANATION OF CHARACTER FORMAT TAGS

Character format elements are used to specify either the logical meaning or the physical appearance. We will discuss every tag used in html for character formatting in this tutorial.



B tag is used to indicate that the enclosed text must be rendered in a bold typeface.If you want to indicate strong emphasis, use the STRONG element instead. B should only be used when you want bold typeface for some other reason than to denote strong emphasis. While the two tags usually produce the same output, the B tag does not provide any reasons why the enclosed text is in boldface. This means an indexer or text-only browser cannot pick a good alternative, with STRONG this is possible.

USAGE EXAMPLE:

Code:

<b>This text is in bold</b>

OUTPUT:
This text is in bold

NOTE:Putting large blocks of text in boldface makes the text hard to read.




The FONT tag can be used to change the appearance of the current block, in terms of size and color. The SIZE attribute can either take an absolute value, ranging from 1 (smallest) to 7 (largest), or a relative value. Using the latter will change the font relative to the font size as set in the most recent BASEFONT tag. For example, <FONT SIZE="+1"> will make the font size one step bigger.

The COLOR attribute takes a hex value, which is the RGB-notation of the desired color. You can also use a color name, although the names are less widely supported than the codes. See the section on BODY for a more detailed explanation on how to specify colors.
In both cases, the closing tag </FONT> restores the previous font size and/or color.

USAGE EXAMPLE:

Code:

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

NOTE:
-> Avoid making extreme font changes if possible. They can make a document hard to read. If possible, use BIG instead of <FONT SIZE="+1"> and SMALL instead of <FONT SIZE="-1">.
-> The color attribute is not very widely supported, so do not rely on it.
-> None of the browsers which support FONT allow their users to disable it. It is possible to disable body colors, so if you use FONT COLOR to change font colors and the visitor has overriden your body colors, the text may wind up invisible.
-> Do not use the FONT tag to emulate headers. Indexers rely on the six header elements to generate an overview of a document, and they will not be able to index your document if you use FONT instead. FONT should be used only as an enhancement of the presentation.



I is used to indicate that the enclosed text must be rendered in a italic (slanted) typeface. It must be rendered distinct from B-bold text.
You should use EM or CITE instead of I if you can. While they usually produce the same output, the I tag does not provide any reasons why the enclosed text is in italics. This means an indexer or text-only browser cannot pick a good alternative. With EM and CITE this is possible. The browser can now distinguish between emphasized text and citations and choose different methods to display them.

USAGE EXAMPLE:

Code:

<i>This text is in italics</i>

EM is used to indicate emphasized text. While it is often rendered identical to I, italics, using EM rather than I is preferred. It allows the browser to distinguish between emphasized text and other text which can be drawn in italics.

USAGE EXAMPLE:

Code:

<em>Emphasized text</em>

The BIG tag (as well as SMALL) is new. A browser should draw the enclosed text in a larger font if available, and ignore the tag otherwise. Since this tag is new, support for it is not universal. The FONT tag can do the same, with SIZE="+1".

USAGE EXAMPLE:

Code:

<big>Big text</big>

The SMALL tag (as well as BIG) is new. A browser should draw the enclosed text in a smaller font if available, and ignore the tag otherwise. Since this tag is new, support for it is not universal. The FONT tag can do the same, with SIZE="-1".

USAGE EXAMPLE:

Code:

<small>Small text</small>

STRONG is used to indicate strongly emphasized text. While it is often rendered identical to B, boldface, using STRONG rather than B is preferred. It allows the browser to distinguish between strongly emphasized text and other text which must be drawn in boldface in the case where boldface is not available.STRONG text should be rendered distinct from EM text.

USAGE EXAMPLE:

Code:

<strong>Strong text</strong>

SUP specifies that the enclosed text should be rendered in superscript, with the enclosed text slightly higher than the surrounding text. This can be useful for mathematical formulas.

USAGE EXAMPLE:

Code:

<p>This text contains ^superscript text.</p>

SUB specifies that the enclosed text should be rendered in subscript, with the enclosed text slightly lower than the surrounding text. This can be useful for mathematical formulas.

USAGE EXAMPLE:

Code:

<p>This text contains _subscript text.</p>

bdo stand for bidirectional override.

The <bdo> tag allows you to specify the text direction and override the bidirectional algorithm.

USAGE EXAMPLE:

Code:

<bdo dir="rtl">Here is some Hebrew text!</bdo>

U is used to indicate the enclosed text should be underlined. As most browsers use underlining to indicate hyperlinks, try to avoid this tag. It can confuse your users if they see "hyperlinks" that do not work.

Underlining is an alternative rendering for italic text (for example, on typewriters). Since HTML has an I tag for italics, use that if this is what you are using U for.

USAGE EXAMPLE:

Code:

<p>Do not <u>underline</u> text if it is not a hyperlink!</p>

-Arvind