Formatting Tags

Formatting Tags
They are used to format the text on the web page. HTML defines a lot of elements for formatting output, like bold or italic text. There are 2 types of Formatting Tags:

Text Level Paragraph Level or Block Level

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Text Level Formatting Tags

The Text Level is further divided into 2 types:

Font Formatting Phrase Formatting

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Font Formatting
Type / Attributes Example Function <B> Bold Container NONE <B> Displays text Bold Effect in BOLD </B> <BIG> Container NONE <BIG> Displays text Effect of in a font size BIG tag bigger than </BIG> default
Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College 4

Tag Name

Tag Name

<SMALL>

<I> Italic

Type / Attributes Function Container NONE Displays text in a font size smaller than default Container NONE Displays text in Italic
Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Example

<SMALL> Effect of SMALL tag </SMALL>

<I> Italic Effect </I>

5

Tag Name

<FONT>

Type / Attributes Function Container color Sets base size size, color, face properties for the body text font

Example

<FONT size=12 color=red face=arial> Effect of FONT tag </FONT>

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Tag Name <S> / <STRIKE>

<SUB> Subscript

<SUP> Superscript

Type / Function Container Displays text with strike mark Container Displays the text in subscript Container Displays the text in superscript

Attributes NONE

Example <S> Strike Effect </S> H<sub>2</su b>0

NONE

NONE

x ²

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Tag Name <TT> Teletype

<U> Underline

Type / Function Container Contains text to be displayed in fixed width form Container Displays the text in Underline

Attributes NONE

Example <TT> Effect of Teletype Tag </TT>

NONE

<U> Underline Tag </U>

Example

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Phrase Formatting
Tag Name Type / Function Attributes Example
<ADDRESS>

<ADDRESS>

Container

NONE

Effect of Address Tag

</ADDRESS>

<EM> Emphasize

Container

NONE

<EM> Effect of Emphasize Tag </EM>

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Tag Name
<DFN> Definition

Type / Function Container

Attributes
NONE

Example
<DFN> Effect of Definition Tag </DFN> <DEL> Effect of DELETE Tag </DEL>
10

<DEL> Delete

Container

cite datetime

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Tag Name <INS> Insert

Type / Function Container

Attributes NONE

Example <INS> Effect of INSERT Tag </INS>

<STRONG>

Container

NONE

<STRONG> Effect of Strong Tag </STRONG>

Example

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

11

Block-Level Formatting
Tag Name <BR> Break <CENTER> Type Standalone Container Purpose Inserts a line break in the document. Indicates that the browser should horizontally center the contained text. Draws a horizontal line across the page <BR> <CENTER> </CENTER> <HR ALIGN=left| right| center| justify SIZE=num_value WIDTH=pixels or % of screen COLOR=value NOSHADE>
12

Syntax

<HR> Horizontal

Standalone

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Tag Name <Hn> n=1,2,3,4,5,6 Heading <P> Paragraph <PRE>

Type Container

Purpose Creates headings H1 Highest Size H6 Lowest Size

Syntax <Hn ALIGN=left| right| center| justify> </Hn> Where, n=1,2,3,4,5,6 <P ALIGN=left| right| center| justify> </P> <PRE> . </PRE>

Container

Contains a paragraph It forces a break before & after text Specifies that the browser is to render text as is, with its embedded line breaks and spaces intact Controls the direction of the text
Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

Container

Preformatted

<BDO> bidirectional order Example

Container

<BDO dir=ltr|rtl> </BDO>

13

Character Entities
To display the characters such as <, >, &, , , ,, and more Example

Text Formatting Example

Mrs. Hiyashini Tanwani, SYBFM 2012, CHM College

14