The bold text is declared by the tag <b>..</b>, used to make a text element bold. Anything that shows within <b>...</b> element, is displayed in bold.
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 the following result:
The following word uses a bold typeface.
Italic Text
The italics text is declared by the <i>…</i> tag it is used to make any text element display in italics format. Anything that shows within <i>...</i> element is displayed in italicized is 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 the following result:
The following word uses an italicized typeface.
Underlined Text
The <u>…</u> tag is used to underline a text element. Anything that shows 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 the following result:
The following word uses an underlined typeface.
Strikethrough Text
The <strike>…</strike> tag is used to display text element in strike through text format. Anything that shows within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below:
Strikethrough
Example
<!DOCTYPE html>
<html>
<head>
<title>Strikethrough Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses astrikethrough typeface.
Monospaced Font
The content of a <tt>...</tt> tag 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 typeface.</tt> </p>
</body>
</html>
This will produce the following result:
The following word uses a monospaced typeface.
Superscript Text
The <sup>…</sup> tag is used to make a text element in superscript format. The content between <sup>...</sup> element is written in superscript form, so that the element is placed high above other text from base to top.
Example
<!DOCTYPE html>
<html>
<head>
<title>Scholars Globe HTML Example</title>
</head>
<body>
<p>Scholars <sup>Globe</sup> HTML Example.</p>
</body>
</html>
This will produce the following result:
Scholars Globe HTML Example.
Subscript Text
The <sub>…</sub> tag is used to make a text element show in subscript text format. The content of a <sub>...</sub> element is written in subscript; so that the element is placed below other text from base to bottom.. Example of subscript text:
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Blog</title>
</head>
<body>
<p>This is <sub>Scholars Globe</sub> Blog .</p>
</body>
</html>
This will produce the following result:
This is Scholars Globe Blog.
Inserted Text
The <ins>…</ins> tag is used to make a text element displayed as inserted text format. Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Blog</title>
</head>
<body>
<p> This is Scholars <ins>Globe</ins> Blog</p>
</body>
</html>
The result will be
This is Scholars Globe Blog
Deleted Text
The <del>…</del> tag is used to display a text element in deleted text format. Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Blog</title>
</head>
<body>
<p> This is Scholars Globe <del>Blog</del> </p>
</body>
</html>
The result will be
This is Scholars GlobeBlog
Larger Text
The <big>…</big> tag is used to make a font size larger than the other font size in its surrounding. The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Example</title>
</head>
<body>
<p>This is Scholars<big> Globe </big>Example</p>
</body>
</html>
This will produce the following result:
This is Scholars Globe Example
Smaller Text
The <small>…</small> tags is used to make font size smaller than the other fonts in it surrounding. The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Example</title>
</head>
<body>
<p>This is Scholars <small>Globe</small> Example </p>
</body>
</html>
This will produce the following result:
This is Scholars Globe Example.
Emphasized Text
The <em>…</em> tag is used to display text element in emphasized format. Anything that appears within <em>...</em> element is displayed as emphasized text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses an emphasized typeface.
The <strike>…</strike> tag is used to display text element in strike through text format. Anything that shows within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below:
Strikethrough
Example
<!DOCTYPE html>
<html>
<head>
<title>Strikethrough Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses a
Monospaced Font
The content of a <tt>...</tt> tag 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 typeface.</tt> </p>
</body>
</html>
This will produce the following result:
The following word uses a monospaced typeface.
Superscript Text
The <sup>…</sup> tag is used to make a text element in superscript format. The content between <sup>...</sup> element is written in superscript form, so that the element is placed high above other text from base to top.
Example
<!DOCTYPE html>
<html>
<head>
<title>Scholars Globe HTML Example</title>
</head>
<body>
<p>Scholars <sup>Globe</sup> HTML Example.</p>
</body>
</html>
This will produce the following result:
Scholars Globe HTML Example.
Subscript Text
The <sub>…</sub> tag is used to make a text element show in subscript text format. The content of a <sub>...</sub> element is written in subscript; so that the element is placed below other text from base to bottom.. Example of subscript text:
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Blog</title>
</head>
<body>
<p>This is <sub>Scholars Globe</sub> Blog .</p>
</body>
</html>
This will produce the following result:
This is Scholars Globe Blog.
Inserted Text
The <ins>…</ins> tag is used to make a text element displayed as inserted text format. Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Blog</title>
</head>
<body>
<p> This is Scholars <ins>Globe</ins> Blog</p>
</body>
</html>
The result will be
This is Scholars Globe Blog
Deleted Text
The <del>…</del> tag is used to display a text element in deleted text format. Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Blog</title>
</head>
<body>
<p> This is Scholars Globe <del>Blog</del> </p>
</body>
</html>
The result will be
This is Scholars Globe
Larger Text
The <big>…</big> tag is used to make a font size larger than the other font size in its surrounding. The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Example</title>
</head>
<body>
<p>This is Scholars<big> Globe </big>Example</p>
</body>
</html>
This will produce the following result:
This is Scholars Globe Example
Smaller Text
The <small>…</small> tags is used to make font size smaller than the other fonts in it surrounding. The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Example</title>
</head>
<body>
<p>This is Scholars <small>Globe</small> Example </p>
</body>
</html>
This will produce the following result:
This is Scholars Globe Example.
Emphasized Text
The <em>…</em> tag is used to display text element in emphasized format. Anything that appears within <em>...</em> element is displayed as emphasized text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
This will produce the following result:
The following word uses an emphasized typeface.
Marked Text
Elements between <mark>...</mark> tag, is displayed as marked with yellow background.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Example</title>
</head>
<body>
<p>This is <mark>Scholars Globe</mark> Example</p>
</body>
</html>
Result: This is Scholars Globe Example.
Elements between <mark>...</mark> tag, is displayed as marked with yellow background.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Example</title>
</head>
<body>
<p>This is <mark>Scholars Globe</mark> Example</p>
</body>
</html>
Result: This is Scholars Globe Example.
Strong Text
The <strong>...</strong> tag is used to display a text element in strong or important text format. It makes bolder than other text around it. Anything that comes between <strong>...</strong> element is displayed as important text.
Example
<!DOCTYPE html>
<html>
<head>
<title>This is Scholars Globe Example</title>
</head>
<body>
<p>This is Scholars <strong>Globe</strong> Example </p>
</body>
</html>
This will produce the following result:This is Scholars Globe Example
Text Abbreviation
The <abbr>…</abbr> tag is used to abbreviate any text element. You can abbreviate a text by inserting it between the opening <abbr> and closing </abbr> tags. If present, the title attribute must contain this full description and nothing else.
Example
<!DOCTYPE html>
<html>
<head>
<title>Scholars Globe</title>
</head>
<body>
<p>Scholars<abbr title="Globe">G</abbr>.</p>
</body>
</html>
Result:
Scholars G.
Grouping Content (Div Tags and Span Tags)
The <div> and <span> tags are used in grouping several elements together to create sections or subsections of a page.
For instance, you might want to put all of the footnotes on a page within a <div> element to specify 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>This is Scholars Globe</title>
</head>
<body>
<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>Scholars</p>
</div>
</body>
</html>
This will produce
HOME | CONTACT | ABOUT
Content Articles
Scholars.
On the other hand, the <span> tag 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 the following result:
This is the example of span tag
and the div tag along with CSS
These tags are usually used with CSS to allow you to attach a style to a section of a page.
Acronym Element
The <acronym> element allows you to specify that the text within <acronym> and </acronym> tags is an acronym.
Currently, the major browsers do not change the appearance of the content of the <acronym> element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>
This will produce the following result:
This chapter covers marking up text in X H T M L.
Text Direction
The <bdo>...</bdo> element represents Bi-Directional Override and it is used to override the current text direction.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
This will produce the following result:
This text will go left to right.
This text will go right to left.
Special Terms
The <dfn>...</dfn> element allows you to indicate that you are introducing a special term. It's usage is related to italic words in the center of a paragraph.
Normally, you would use the <dfn> element the first time you introduce a key term. Most latest browsers render the content of a <dfn> element in an italic font.
Example
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>
This will produce the following result:
The following word is a special term.
Quoting Text
When you want to quote a passage from another source, you should put it in between<blockquote>...</blockquote> tags.
Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font.
Example
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
This will produce the following result:
The following description of XHTML is taken from the W3C Web site:
XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.
Short Quotations
The <q>...</q> element is introduce when you want to add a double quote within a sentence. Double quote example : Scholars Globe is the best, “I think am right”.
Example
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p> Scholars Globe is the best, <q>I think am right <q>. </p>
</body>
</html>
This will produce the following result:
Scholars Globe is the best, “I think am right”.
Text Citations
If want to quote a text, you can specify the source inserting it within an opening <cite>tag and closing </cite> tag
As you would expect in a print publication, the content of the <cite> element is rendered in italicized text by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>
This will produce the following result:
This HTML tutorial is derived from W3 Standard for HTML.
Computer Code
Any programming code that will appear on a Web page should be located inside <code>...</code>tags. Generally the content of the <code> element is displayed in a monospaced font, just like the code in most programming books.
Example
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>
This will produce the following result:
Regular text. This is code. Regular text.
Keyboard Text
When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd>...</kbd> element to indicate what should be typed in, as in this example.
Example
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>
This will produce the following result:
Regular text. This is inside kbd element Regular text.
Programming Variables
This element is often used in combination with the <pre> and <code> elements to specify that the content of that element is a variable.
Example
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>
This will produce the following result:
document.write("user-name")
Program Output
The <samp>...</samp> element shows sample output from a program, and script etc. Once more, it is primarily introduced when documenting programming or coding concepts.
Example
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>
This will produce the following result:
Result produced by the program is Hello World!
The <samp>...</samp> element shows sample output from a program, and script etc. Once more, it is primarily introduced when documenting programming or coding concepts.
Example
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>
This will produce the following result:
Result produced by the program is Hello World!
Address Text
The <address>...</address> element is used to display any text in address format.
Example
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>57A, Kelvin Road, New Hills - New York</address>
</body>
</html>
This will produce the following result:
57A, Kelvin Roa, New Hills Drive – New York
No comments:
Post a Comment