HTML Part 8

Strike Text - The <strike> Element:

Anything that appears in a <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text: 

<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

This will produce following result:

The following word uses a strikethrough typeface.

Monospaced font - The <tt> Element: 

The content of a <tt> element is written in monospaced font. Most 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 is the same width. 

<p>The following word uses a <tt>monospaced</tt> typeface.</p>

This will produce following result:

The following word uses a monospaced typeface.

Superscript Text - The <sup> Element: 

The content of a <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.

<p>The following word uses a ^superscript typeface.</p>  

This will produce following result:

The following word uses a ^superscript typeface.

Subscript Text - The <sub> Element: 

The content of a <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.

<p>The following word uses a _subscript typeface.</p>

This will produce following result:

The following word uses a _subscript typeface.

Grouping - The <div> and <span> Elements : 

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.

The <div> element is used to group block-level elements together:

<div id="menu" align="middle" > 
<a href="/index.htm">HOME</a> |  
<a href="/about/contact_us.htm">CONTACT</a> |  
<a href="/about/index.htm">ABOUT</a> </div>
<div id="content" align="left" bgcolor="white"> 
<h5>Content Articles</h5> 
<p>Actual content goes here.....</p> 
</div>

This will produce following result:

HOME |
CONTACT |
ABOUT

Content Articles

Actual content goes here.....

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

<div><p>This is the example of <span style="color:green">span tag</span> and the <span style="color:purple">div tag</span> alongwith CSS</p></div>

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.

HTML Phrase Tags 

While some of these phrase elements are displayed in a similar manner to the <b>, <i>, <pre>, and <tt> elements you have already seen, they are designed for specific purposes. For example, the <em> and <strong> elements give text emphasis and strong emphasis respectively and there are several elements for marking up quotes.
We will see all phrase tags in this section with examples.

Emphasized Text - The <em> Element: 

The content of an <em> element is intended to be a point of emphasis in your document, and it is usually displayed in italicized text. The kind of emphasis intended is on words such as "must" in the following sentence:

<p>You <em>must</em> remember to close elements in XHTML.</p>

This will produce following result:

You must remember to close elements in XHTML.