Full width home advertisement

How To

Science

Post Page Advertisement [Top]

Bold Text

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 a strikethrough 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 Globe Blog




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.




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!




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

Bottom Ad [Post Page]

| Designed by Colorlib