Lesson 7 – HTML Phrase and Quotation Tags

admin

HTML Phrase / Quotation tags are used to give special focus to a text. They are quite similar to text formatting tags. In this lesson, we will learn how to use Phrase and Quotation tags in html.

  •  Emphasized Text:

 Any text that is inserted between html <em>…</em> tag will appear as Emphasized text. Example is explained below: 

<!DOCTYPE html>
<html>
<head>
<title>Emphasized  Text </title>
</head>
<body>
<p>This is a <em>emphasized</em> text example</p>
</body>
</html>

The result will be displayed as:

  Emphasized Text

This is a emphasized text example

 

  • Quotation Text:  

 Any text that is inserted between html <q>…</q> tag will appear in double quotes. Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title>Quotation Text Example </title>
</head>
<body>
<p>This is a <q>quotation</q> text example</p>
</body>
</html>

The result will be displayed as:

 This is a “quotation” text example

 

  • Abbreviation Text:

Any text that is inserted between html <abbr>…</abbr> tag swill appear as abbreviated. Once you have implemented the abbreviation code, take your mouse courser over abbreviated text, it will show you its full meaning. Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title> Abbreviation Example </title>
</head>
<body>
<p>This is a <abbr title = “Hyper Text Markup Language”>HTML</abbr> abbreviation text example</p>
</body>
</html>

The result will be displayed as:

  Abbreviation Example

This is a HTML abbreviation text example

 

  • Address:

    Any text that is inserted between html <address>…</address>tag will appear in address form. Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body> <p><address> House no. 2872 A, Sector – 22, Chandigarh</address> </p>
</body>
</html>

The result will be displayed as:

  Address Example

House no. 2872 A, Sector - 22, Chandigarh

 

  • Marked Text:

    Any text that is inserted between html <mark>…</mark> tag will mark/highlight text in yellow color. The example is explained below:

<!DOCTYPE html>
<html>
<head>
<title>Mark Example</title>
</head>
<body>
<p>This is a <mark>marked</mark> text example/p>
</body>
</html>

The result will be displayed as:

  Mark Example

This is a marked text example

 

  • Text Direction:

You can override any text direction rule on a web page using html <bdo>…</bdo> tag. Text direction can be set either from left to right or right to left.

<!DOCTYPE html>
<html>
<head>
<title> Example </title>
</head>
<body>
<p> <bdo dir=ltr”> Here text will flow from left to right </bdo></P>
<p><bdo dir=”rtl”> Here text will flow from right to left</bdo></p>
</body>
</html>

The result will be displayed as:

  Text direction Example

Here text will flow from left to right

Here text will flow from right to left

 

  • Blockquote Text:

Any text inserted between html <blockquote>…</blockquote> tag will represent that it is taken from some other source or website. The example is explained below:

<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<h1>How to hide tummy  fat.</h1>
<p><blockquote>Tummy fat is a reality that, unless you are genetically blessed with a supermodel physique, we all have to contend with at some point in our lives. </blockquote></p>
</body>
</html>

The result will be displayed as:

  Blockquote Example

How to hide tummy fat.

Tummy fat is a reality that, unless you are genetically blessed with a supermodel physique, we all have to contend with at some point in our lives.

 

  • Text Citation:

Any text that is inserted between html <cite>..</cite> tag will appear as a citation from original author/writer. The text will appear in italics. Example is explained below:

<!DOCTYPE html>
<html>
<head>
<title>Text Citations Example</title>
</head>
<body>
<p> <cite>Tim Berners-Lee </cite>  was the inventor of HTML</p>
</body>
</html>

The result will be displayed as:

  Text Citations Example

Tim Berners-Lee was the inventor of HTML

 

  • Keyboard Input Text:

Any text that is inserted between html <kbd>..</kbd> tag will appear as keyboard input text. It represents user input by a keyboard and is displayed in monospace font.  Example is shown below:

<!DOCTYPE html>
<html>
<head>
<title>Keyboard Example</title>
</head>
<body>
<p>Normal font <kbd>This is kbd font </kbd> Normal font</p>
</body>
</html>

The result will be displayed as:

  Keyboard Text Example

Normal font 'This is kbd font' Normal font

 

  • Computer Code Text:

Any text that is inserted between html <code>…</code> tag will appear as computer code text. It represent that displayed text is a computer code. Example is shown below:

<!DOCTYPE html>
<html>
<head>
<title> Code Example</title>
</head>
<body>
<p>Normal text <code> write your code here </code> Normal text</p>
</body>
</html>

The result will be displayed as:

  Code Example

Normal text 'write your code here' Normal text

 

  • Variable Text:

Any text inserted between html <var>..</var> tag will appear as mathematical variable. Example is shown below: 

<!DOCTYPE html>
<html>
<head>
<title> Variable Example</title>
</head>
<body>
<p> Formula =<var> (x + y)<sup>2</sup> </var></p>
</body>
</html>

The result will be displayed as:

  Variable Example

Formula = (x + y)2

 

  • Computer Output Text:

Any text that is inserted between html <samp>…</samp> tag will appear as computer output text. Example is shown below:

<!DOCTYPE html>
<html>
<head>
<title>Computer Program Output Example</title>
</head>
<body>
<p>Normal text. <samp>’This is computer programme output text'</samp></p>
</body>
</html>

The result will be displayed as:

  Computer Program Output Example

Normal text. 'This is computer programme output text'.

Chapter Summery:

  • Use html <em> tag for emphasized text.
  • Use html <q>  tag to add double quotes. (e.g. “some text”).
  • Use html <abbr> tag for text abbreviation.
  • Use html <address> tag to write text in address form.
  • Use html <mark> tag to highlight text background in yellow color.
  • Use html <bdo> tag to override any existing text direction rule.
  • Use html <blockquote> tag to quote original source of the content.
  • Use html <cite> tag to cite name/title of original author/writer/picture.
  • Use html <kbd> tag to display computer input text.
  • Use html <code> tag to display computer code text.
  • Use html <var> tag to add mathematical expression.
  • Use html <samp> tag to display computer output text.

 

Interview Question:

  • What is Bi-Directional Override element in html?

Bi-Directional Override element is also known as Text Direction element. It is used to override any existing text direction rules in html document and its syntax is represented by <bdo>…</bdo>.

 

Practice Exercise:

<!DOCTYPE html>
<html>
<head >
<title>Practice Exercise</title>
</head>
<body>
<p Html stands for Hyper Text Markup Language, which is used to create web pages on internet.  Html is easy to learn and can be understood by a non IT personnel also.  </p>
</body>
</html>

In above html code:

  • Apply double quotes around text ‘Hyper Text Markup Language’.
  • Highlight background of text ‘non IT personnel’ with yellow color.
  • Use abbreviation for text ‘Hyper Text Markup Language’ (HTML).
  • Change direction of text from right to left.
  • Convert paragraph text into computer output text.
Click here to practice above exercise in real time HTML code editor