HTML For Beginners: Part 5

Before reading this article please visit the following links:

• HTML For Beginners: Part 1
• HTML For Beginners: Part 2
• HTML For Beginners: Part 3
• HTML For Beginners: Part 4

HTML Quotation, Citation and Computer Code Elements

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation. Browsers usually insert quotation marks around the <q> element.

Example 

<q> The starting point of all achievements is desire. </q>

HTML <blockquote> for Long Quotations

The HTML <blockquote> element defines a quoted section. Browsers usually indent <blockquote> elements.

Example

<blockquote cite="http://www.brainyquote.com/quotes/topics/topic_success.html">Success is not final, failure is not fatal :it is the courage to continue that counts.
<blockquote >

HTML <abbr> for Abbreviations

• The HTML <abbr> element defines an abbreviation or an acronym.
• Marking abbreviations can provide useful information to browsers, translation systems and search-engines.

Example

<p>The <abbr title=" United Nations International Children's Emergency Fund ">UNICEF</abbr> was founded in December 11, 1946.</p>

HTML <address> for Contact Information

• The HTML <address> element defines contact information of a document or article.
• The element is usually displayed in italics. Most browsers will add a line break before and after the element.

Example

<address>
    Biography of HELEN KELLER written by helen keller
    Visit – “http://www.biography.com/people/helen-keller-9361967 ”
</address>

HTML <cite> for Work Title

The HTML <cite> element defines the title of a work. Browsers usually display <cite> elements in italics.

Example

<p><cite> The Dandi March </cite> also known as the Salt Satyagraha, began on 12 March 1930 .</p>

Result

HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines Bi-Directional Override. If your browser supports BDO, this text will be written from right to left.

 

Example

<bdo dir="rtl">Chipko Andolan is a movement that practiced the Gandhian methods of satyagraha and non-violent resistance </bdo>

Result

Computer Code

var person = {
firstName:"shresthi",
lastName:"jaiswal",
age:15,
eyeColor:"brown"
}

Result

HTML Computer Code Formatting

Normally, HTML uses a variable letter size and variable letter spacing. This is not wanted when displaying examples of computer code. The <kbd>, <samp>, and <code> elements all support fixed letter sizes and spacing.

HTML Keyboard Formatting

The HTML <kbd> element defines keyboard input.

Example

<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p

Result

HTML Sample Formatting

The HTML <samp> element defines sample output.

Example

<samp>
http://www.c-sharpcorner.com/
</samp>

Result

HTML Code Formatting

• The HTML <code> element defines programming code.

Example

<code>
var person = { firstName:"shresthi", lastName:"jaiswal", age:15, eyeColor:"brown" }
</code>

• The <code> element does not preserve extra whitespace and line-breaks.

Example

<code>
   var person =
   {
   firstName:"shresthi",
   lastName:"jaiswal",
   age:15,
   eyeColor:"brown"
   }
</code>

• To fix this, you must wrap the code in a <pre> element.

Example

<p>Coding Example:</p>
<code>
    <pre>
        var person =
     {
        firstName:"shresthi",
        lastName:"jaiswal",
        age:15,
        eyeColor:"brown"
    }
    </pre>
</code>

HTML Variable Formatting

  

The HTML <var> element defines a mathematical variable.

Example

<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>

Result

 

HTML Quotations, Citations, Definition and Computer Code

Elements

1. <abbr>: Defines an abbreviation or acronym
2. <address>: Defines contact information for the author/owner of a document
3. <bdo>: Defines the text direction
4. <blockquote>: Defines a section that is quoted from another source
5. <dfn>: Defines the definition of a term or an abbreviation
6. <q>: Defines a short inline quotation
7. <cite>: Defines the title of a work
8. <code>: Defines programming code
9. <kbd>: Defines keyboard input 
10. <samp>: Defines computer output
11. <var>: Defines a mathematical variable
12. <pre>: Defines preformatted text