HTML Formatting

If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.

Bold Text

Anything that appears within <b>…</b> element, is displayed in bold as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a bold typeface.

Italic Text

Anything that appears within <i>…</i> element is displayed in italicized as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a italicized typeface.

Underlined Text

Anything that appears within <u>…</u> element, is displayed with underline as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a underlined typeface.

Strike Text

Anything that appears within <strike>…</strike> element is displayed with strikethrough, which is a thin line through the text as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a strikethrough typeface.

Monospaced Font

The content of a <tt>…</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter ‘m’ is wider than the letter ‘i’). In a monospaced font, however, each letter has the same width.

Example

<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a monospaced typeface.

Superscript Text

The content of a <sup>…</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character’s height above the other characters.

Example

<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a superscript typeface.

Subscript Text

The content of a <sub>…</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character’s height beneath the other characters.

Example

<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a subscript typeface.

Inserted Text

Anything that appears within <ins>…</ins> element is displayed as inserted text.

Example

<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

This will produce following result:

I want to drink

cola

 

wine

Deleted Text

Anything that appears within <del>…</del> element, is displayed as deleted text.

Example

<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

This will produce following result:

I want to drink

cola

 

wine

Larger Text

The content of the <big>…</big> element is displayed one font size larger than the rest of the text surrounding it as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a big typeface.

Smaller Text

The content of the <small>…</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below:

Example

<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a small typeface.

Grouping Content

The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.

Example

<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>


id="content" align="left" bgcolor="white">
Content Articles

Actual content goes here.....

</body> </html>

This will produce following result:

CONTENT ARTICLES

Actual content goes here…..

The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows

Example

<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>

This will produce 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s