Presentational Tags:

If you use a word processor, you are 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. As we know our browser understand only tags language, so we have to give these formatting with the help of tags only which are made specially for this purpose. This blog will provide you all the information about the formatting tags which we can use in web site designing language HTML. There will be an example at the end which will show you the formatting implemented by the tags.

Emphasizing Text Implicitly and Explicitly :

➤Explicit Tags (also called physical tags) specifically tell the Web Browser how the designer wants text to appear physically. the browser has no say in the matter.  Two physical tags can be applied together on the same portion of text.

Bold Text - The <b> Element:

Anything that appears in a <b>...</b> element is displayed in bold.

 

Italic Text - The <i> Element:

Anything that appears in a <i>...</i> element is displayed in italicized, like the word italicized here:

  

Underlined Text - The <u> Element:

Anything that appears in a <u>...</u> element is displayed with underline, like the word underlined here:

 

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:

 

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.

 

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.

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.

Larger Text - The <big> Element:

The content of the <big> element is displayed one font size larger than the rest of the text surrounding it.

 

Smaller Text - The <small> Element:

The content of the <small> element is displayed one font size smaller than the rest of the text surrounding it.

For Example:-

 ➤ Implicit Tags (also called Logical Tags) allow the browser some freedom in displaying text. 

These are called logical since they are relative to one another, depending upon the browser. 

Tag	Description
<abbr>	Defines an abbreviation
<acronym>	Defines an acronym - indicate that the text between an opening <acronym> and closing </acronym> element is an acronym.
<address>	Defines an address element - used to contain any address.
<cite>	Defines a citation- If you are quoting a text, you can indicate the source placing it between 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
<code>	Defines computer code text - Any code to appear on a Web page should be placed inside a <code> element. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.
<blockquote>	Defines a long quotation -When you want to quote a passage from another source, you should use the <blockquote> element. Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font
<del>	Defines text
<dfn>	Defines a definition term - allows you to specify that you are introducing a special term. Its use is similar to the words that are in italics in the midst of paragraphs in this book when new key concepts are introduced.
<em>	Defines emphasized text
<ins>	Defines inserted text
<kbd>	Defines keyboard text - When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd> element to indicate what should be typed in, as in this example. The content of a <kbd> element is usually represented in a monospaced font rather like the content of the <code> element.
<pre>	Defines preformatted text
<q>	Defines a short quotation - intended to be used when you want to add a quote within a sentence rather than as an indented block on its own.
<samp>	Defines sample computer code - indicates sample output from a program, script, or the like. Again, it is mainly used when documenting programming concepts. For example:
<strong>	Defines strong text
<var>	Defines a variable - This element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that element is a variable that can be supplied by a user.

Some  Examples:

This Code	Would Display
<abbr title="World Wide Web">WWW</abbr>	WWW
<p>You <em>must</em> remember to close elements in XHTML.</p>	You must remember to close elements in XHTML.
<p>You <strong>must</strong> remember to close elements in XHTML.</p>	You must remember to close elements in XHTML
<p>This chapter covers marking up text in <acronym title="Extensible Hypertext Markup  language">XHTML</acronym>. </p>	This chapter covers marking up text in XHTML.
<p>This lesson teaches you how mark up your documents for the web using <dfn>XHTML</dfn>.</p>	This lesson teaches you how mark up your documents for the web using XHTML.
<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>	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.
<p>Amit is in Spain, <q>He is their at my home. I think I am wrong</q>.</p>	Amit is in Spain, He is their at my home. I think I am wrong.
<p>This HTML Tutorial is derived from <cite>World Wide Web Standard for HTML</cite>.</p>	This HTML Tutorial is derived from World Wide Web Standard for HTML.
<h1> <code>This is inside code element</code></h1>	This is inside code element
<h1> <kbd>This is inside kbd element</kbd></h1>	This is inside kbd element
<p><code>document.write("<var>user-name</var>")</code></p>	document.write("user-name")
<p>Result produced by the program is <samp>Hello World</samp></p>	Result produced by the program is Hello World
<address>304, Menna Colony, Hyderabad - INDIA, 500032</address>	304, Menna Colony, Hyderabad - INDIA, 500032

Block and Inline Elements:

We can categories all the elements into two sections:

➤   Block-level elements - Block-level elements appear on the screen as if they have a carriage return or line break before and after them. For example the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line.

➤   Inline elements - Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

Block Level Elements -  For Example :-

Using <PRE> Tag :- It is most common and useful pre-formatting tag. Text in a <PRE> conatiner is basically free form, with line feeds causing the line to break at the beginning of the next line. Any of the physical and logical text formatting elements can be used inside the <PRE> tag. A common use of the <PRE> container is to display large blocks of computer code, which if reformatted by the browser would be difficult to read.

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>
 

 Another Example of Div Tag which divide out page in sections is :-

 <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>


<div id="content1" align="left" style="background-color: lightblue";> <h5>Content Articles</h5>
<p>Division I - Actual content goes here.....</p> </div>

<div id="content" align="left" style="background-color: Red";> <h5>Content Articles</h5>
<p>Division II - Actual content goes here.....</p> </div>

Note - Div Tag play a very important role in the Website Designing so this we will discuss it further in the CSS tutorial.

HTML Comments

Comments are piece of code which is ignored by any web browser. It is good practice to comment your code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Comments help you and others understand your code.

HTML Comment lines are indicated by the special beginning tag <!-- and ending tag --> placed at the beginning and end of EVERY line to be treated as a comment.

Comments can not be nest, and the double-dash sequence "--" may not appear inside a comment except as part of the closing --> tag. You must also make sure that there are no spaces in the start-of-comment string.

For example: Given line is a valid comment in HTML
<!-- This is a valid comment -->

But following line is not a valid comment and will be displayed by the browser. This is because there is a space between the left angle bracket and the exclamation mark.

< !-- This is commented out -->

Be careful if you use comments to "comment out" HTML that would otherwise be shown to the user, since some older browsers will still pay attention to angle brackets inside the comment and close the comment prematurely -- so that some of the text that was supposed to be inside the comment mistakenly appears as part of the document.

Multiline Comments:

You have seen how to comment a single line in HTML. You can comment multiple lines by the special beginning tag <!-- and ending tag --> placed before the first line and end of the lastline to be treated as a comment.

For Example:-

<!--

This is a multiline comment <br />

and can span through as many as lines you like. -->

Conditional Comments :

Conditional comments only work in Explorer on Windows, and are thus excellently suited to give special instructions meant only for Explorer on Windows. They are supported from Explorer 5 onwards, and it is even possible to distinguish between 5.0, 5.5 and 6.0.

Conditional comments work as follows:

<!--[if IE 6]>

Special instructions for IE 6 here <![endif]-->

•          Their basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.
•         Explorer Windows, though, has been programmed to recognize the special <!--[if IE]> ntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
•          Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files.

Using Comment tag

There are few browsers who supports <comment> tag to comment a part of code.

<p>This is <comment>not</comment> Internet Explorer.</p>

Commenting Scripts and Style Sheets:

If you are using Java Script or VB Script in your HTML code then it is recommended to put that script code inside proper HTML Comments to make old browser works properly.

For example:

<script> <!--

document.write("Hello World!") //-->

</script>

Similarly if you are using Cascading Style Sheet in your HTML code then it is recommended to put that style sheet code inside proper HTML Comments to make old browser works properly.

For example:

<style> <!--img{

border:0px; }

//--> </style>