HTML - Formatting

IfIf you use a word processor,, you must be familiarfamiliar with thethe ability toto make texttext bold, italicized,italicized, or underlined; thesethese are justjust threethree of thethe tenten options available toto indicateindicate how texttext can appear inin HTML and XHTML.

Bold Text

Anything that appears within ... element,element, isis displayeddisplayed inin boldbold asas shownshown belowbelow −−

Example

Live Demo

Bold Text Example

The following word uses a bold typeface.

This will produce the following result −

The following word uses a bold typeface.

Italic Text

Anything that appears within ... elementelement isis displayeddisplayed inin italicizeditalicized asas shownshown belowbelow −−

Example

Live Demo Italic Text Example

The following word uses an italicized typeface.

This will produce the following result −

The following word uses an italicized typeface.

Underlined Text

Anything that appears within ... element,element, isis displayeddisplayed withwith underlineunderline asas shownshown belowbelow −−

Example

Live Demo

Underlined Text Example

The following word uses an underlined typeface.

This will produce the following result −

The following word uses an underlined typeface.

Strike Text Anything thatthat appears within ~~...~~ element isis displayed with strikethrough, which isis a thin line through the text as shown below −

Example

Live Demo

Strike Text Example

The following word uses a ~~strikethrough~~ typeface.

This will produce the following result −

The following word uses a strikethrough typeface.

Monospaced Font

The content of a ... element isis written inin monospaced fofont. Most of thethe fontsfonts are known as variable-width fontsfonts because differeferent lettersletters are of differentferent widths (for example, thethe letterletter 'm''m' isis wider than the letter 'i'). In a monospaced font, however,, eacheach letterletter hashas thethe samesame width.width.

Example

Live Demo

Monospaced Font Example

The following word uses a monospaced typeface.

This will produce the following result −

The following word uses a monospaced typeface.

Superscript Text

The content of a ^... element isis written inin superscript; ththe fontfont size used isis thethe same size as thethe characters surrounding itit but isis displayed half a character's height above thethe other characters.

Example

Live Demo

Superscript Text Example

The following word uses a ^superscript typeface.

This will produce the following result −

The following word uses a superscript typeface.

Subscript Text

The content of a _... element isis written inin subscript; thethe fontfont size used isis thethe same as thethe characters surrounding it,it, but isis displayed half a character's height beneath thethe other characters.

Example

Live Demo Subscript Text Example

The following word uses a _subscript typeface.

This will produce the following result −

The following word uses a subscript typeface.

Inserted Text

Anything that appears within ... elementelement isis displayeddisplayed asas insertedinserted text.text.

Example

Live Demo

Inserted Text Example

I want to drink ~~cola~~ wine

This will produce the following result −

I want to drink cola wine

Deleted Text

Anything that appears within ~~...~~ element,element, isis displayeddisplayed asas deleteddeleted text.text. Example

Live Demo

Deleted Text Example

I want to drink ~~cola~~ wine

This will produce the following result −

I want to drink cola wine

Larger Text

The content of thethe ... element isis displayed one fontfont size largerlarger thanthan thethe rest of thethe texttext surrounding it as shown below −

Example

Live Demo

Larger Text Example

The following word uses a big typeface.

This will produce the following result − The following word uses a big typeface.

Smaller Text

The content of thethe ... element isis displayed one fontfont size smaller thanthan thethe rest of thethe texttext surroundingsurrounding itit asas shownshown belowbelow −−

Example

Live Demo

Smaller Text Example

The following word uses a small typeface.

This will produce the following result −

The following word uses a small typeface.

Grouping Content

The

and elements allow you toto group togethertogether several elements toto create sections or subsections of a page. For example, you might want toto put allll of thethe footnotesfootnotes on a page within a

element toto indicateindicate thatthat all of thethe elements within thatthat

element relate toto thethe footnotesfootnotes.. You might thenthen attach a style to this

element so that they appear using a special set of style rules.

Example

Live Demo Div Tag Example

Content Articles

Actual content goes here.....

This will produce the following result −

HOME | CONTACT | ABOUT

Content Articles

Actual content goes here.....

The element, on thethe other hand, can be used toto group inlineinline elements only.. So, ifif you have a part of a sentence or paragraph which you want toto group togethertogether,, you could use thethe element as follows.

Example

Live Demo

Span Tag Example

This is the example of span tag and the div tag alongwith CSS

This will produce the following result −

This is the example of span tag and the div tag alongwith CSS

These tags are commonly used with CSS to allow you to attach a style to a section of a page.