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