Introduction
This chapter demonstrates about the HTML Quotations which are used to insert the quotations to the simple text by the browsers. Following are the concepts covered.
- Quotations
- Types of Quotations
Description
Users can get the quotation marks to the simple text by using the <q> element which gives quotation marks around the <q> element. The code below demonstrates the use of quotation tags.
[html]
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>SPlessons : <q>Simple Programming Lessons</q></p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Html introduced different types of quotations and similar elements for the text which are used to highlight the simple and short form of text. Following are few elements of HTML quotations with examples.
<blockquote>
<blockquote> is used for block of sentences which means for long quotations. These elements are usually indent by the browsers. The code below demonstrates the use <blockquote> elements.
[html]
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
SPLessons stands for Simple Programming Lessons and
was started with a motive to present programming codes and
to help the developers all around
the globe with different queries in different Programming Languages.
</blockquote>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
<abbr>
<abbr> element is used to explain the abbreviation of a text which can give helpful information to the browsers, interpretation frameworks and web search tools, the code below demonstrates the use of <abbr> element
[html]
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="Simple Programming Lessons">SPlessons</abbr> Tutorials.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
<address>
<address> element used to display the contact information of the author or document. Basically address element get displayed in the italic format and with some line breaks in between the elements. The code below demonstrates the use of <address> element.
[html]
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information of a document or author.</p>
<address>
published by SPlessons.<br>
Visit us at:<br>
splessons.com<br>
Box 123<br>
USA
</address>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
<bdo>
<bdo> element is used to override the text in bi-directional, the snippet code below explain the use of <bdo> element.
[html]
<!DOCTYPE html>
<html>
<body>
<p>If the browser supports bi-directional override (bdo), then next line will be written from right to left (rtl):</p>
<bdo dir="rtl">Simple Programming Languages</bdo>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
<cite>
<cite> element is used to get the title of the present text and display the text in italic format. The code below explains use of <cite> element.
[html]
<!DOCTYPE html>
<html>
<body>
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<img src="splessons.jpg" width="220" height="277" alt="The Scream">
<p><cite>SPlessons</cite>Tutorial</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Quotations are used to mark the text.
- Abbreviations have the useful information.
- <bdo> element override the current text.