HTML Quotation
What is HTML Quotation?
There are some elements in html by which you can add a quote within a short and long sentence or you can show the sentence differently on the webpage that make the sentence more meaningful.
In this article we'll learn about the <q>, <blockquote>, <abbr>, <address>, <cite>, and <bdo> HTML elements. Lets see the examples below-
HTML <q> element-
HTML <q> defines inline quotation for a short text that don't need paragraph breaks.
Example of HTML <q> element-
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML <q> element example </title>
</head>
<body>
<p> <q>The most disastrous thing that you can ever learn is your first programming language</q> - Alan Kay </p>
</body>
</html>Result
Have a close look at the result, you can see using <q> element we can add a quote within a sentence. Also notice that <q> is an inline element that's why it doesn't break the paragraph.
HTML <blockquote> element-
We use <blockquote> element for quoting text but instead of adding a quote within a sentence we can show the sentence differently. As <blockquote> is a block-level element that's why it always starts on a new line. See the example below -
Example of HTML <blockquote> element-
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML <blockquote> element example </title>
</head>
<body>
<p> <blockquote>Programming is breaking of one big impossible task into several very small possible tasks.</blockquote> ― Jazzwant </p>
</body>
</html>Result
Have a close look at the result, you can notice the margin at left and right side of the sentence.
HTML <blockquote> element with cite attribute-
You can use cite attribute with <blockquote> element to include the source of the text adding URL as value. The value of the cite attribute must be a URL,not a name or title.
To use name or title as value, you can use <cite> element what discussed later in this article.
Example of HTML <blockquote> element with cite attribute-
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML <blockquote> element example </title>
</head>
<body>
<blockquote cite="https://www.goodreads.com/quotes/6684246-programming-is-breaking-of-one-big-impossible-task-into-several">
<p>Programming is breaking of one big impossible task into several very small possible tasks.</p>― Jazzwant
</blockquote>
</body>
</html>Result
Though you can't see the URL on the page but it's useful for SEO(Search Engine Optimization). Here one thing you can notice that we put p element inside of blockquote element. So the text "― Jazzwant" is not a part of the p element and it makes the difference adding spaces around the text.
HTML <cite> element-
HTML <cite> element represents the title of a quoted or referenced work. It can be a book, an essay, a poem, a song, a web page, a Facebook post, a painting, a film, a game And so forth. Most browsers display <cite> elements in italics.
Example of HTML <cite> element-
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML <cite> element example </title>
</head>
<body>
<p> The <cite>Mona Lisa</cite> is a half-length portrait painting by the Italian artist Leonardo da Vinci. </p>
<p> <cite>PlayerUnknown's Battlegrounds (PUBG)</cite> is an online multiplayer battle royale game developed and published by PUBG Corporation.</p>
</body>
</html>Result
Have a close look at the result, the font of the text of cite element is italic.
HTML <abbr> element-
HTML <abbr> element defines an abbreviation or acronym - a shortened form of a lengthy term. For instance, HTML is an abbreviation of Hyper Text Markup Language and ATM is an abbreviation of Automatic Teller Machine. Lets see the example-
Example of HTML <abbr> element-
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML <abbr> element example </title>
</head>
<body>
<p> An <abbr title="Automatic Teller Machine" >ATM</abbr> allows you to withdraw cash. </p>
</body>
</html>Result
Have a close look at the result, you can see the dotted underline, it's just because of title attribute. The value of title attribute must be the expanded form of the abbreviation and nothing else.
HTML <address> element-
HTML <address> element can be use to provide contact information for a person or people, or for an organization. An address often belongs in a footer element. Most browsers display <address> element in italic.
Example of HTML <address> element-
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML <address> element example </title>
</head>
<body>
<p> contact informnation </p>
<address>
<a href="mailto:admin@example.com">admin@example.com</a><br>
<a href="tel:+15555551234">(555) 555-1234</a>
</address>
</body>
</html>Result
Address element can be used inside of footer element. Notice that address element should not contain more than contact information.
HTML <bdo> element-
The HTML <bdo> stands for "Bidirectional Text Override" which is used to Override the current or default directionality of text. So you can show the text in different direction. It can be left to right or right to left. For changing the direction of the text we use dir attribute.
Example of HTML <bdo> element-
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML <bdo> element example </title>
</head>
<body>
<p> .won ti dnatsrednu lliw uoy.cigam si sihT </p>
<p> <bdo dir="rtl"> .won ti dnatsrednu lliw uoy.cigam si sihT </bdo> </p>
</body>
</html>Result
So You can see using <bdo> element we can change the direction of a text. For left to right you can use "ltr" as attribute's value.