About Lesson
HTML Quotations
In this tutorial, we will learn about quotations in HTML with the help of examples.
Quotation Elements
Quotation elements are used to insert quoted texts in the document/webpage.
The quotation is designed to display quoted text differently from the normal text.
<q> Tag
- HTML <q> tag is used to display text inside the quotation marks.
- The <q> tag is also known as a short quotation.
- The <q> tag have both opening and closing tag.
- Browsers usually add quotation marks around the quotation.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Quotation tag</title>
</head>
<body>
<p>This is a simple text</p>
<q>This is a quoted text</q>
</body>
</html>
Output
This is a simple text
This is a quoted text
<blockquote> Tag
- HTML <blockquote> tag is used to display a section that is quoted from another source.
- This tag did not use quotes to display text. The <blockquote> tag changes the alignment to make it unique from others.
- The <blockquote> tag is also known as a long quotation.
- The <blockquote> tag have both opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Blockquote Elements</title>
</head>
<body>
<p>This is a simple Paragraph</p>
<blockquote>This is a quoted text</blockquote>
</body>
</html>
Output
This is a simple Paragraph
This is a blockquote text
<abbr> Elements
- HTML <abbr> tag is used to define abbreviation or an acronym.
- The <abbr> tag works as same as <acronym> tag. This tag is the latest version of tag.
- The title attribute can be used to shoe the description for the abbreviation or acronym when the user mouse over the element.
- The <abbr> tag has both opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Abbreviation Elements</title>
</head>
<body>
<p><abbr title = "abbreviation/acronym tag">Hover to see
effect</abbr></p>
</body>
</html>
Output
Hover to see effect
<address> Elements
- HTML <address> tag is used to define address in a document.
- This address can be contact information for the author/owner of a document or an article.
- The text inside the <address> tag will be emphasized.
- The browser will automatically add a line break before and after the <address> element.
- The <address> tag has both opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Address Elements</title>
</head>
<body>
<address>written by James Scott and Manny<br>visit us at:
Example.com<br>Box 457, Disneyland, US</address>
</body>
</html>
Output
written by James Scott and Mannyvisit us at: Example.com
Box 457, Disneyland, US
<cite> Elements
- HTML <cite> tag is used to define the title of a work and emphasizes a text.
- This creative work can be a book, song, painting, movie, etc.
- Browsers will automatically italicize the text inside <cite> tag.
- The <cite> tag has both opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Cite Elements</title>
</head>
<body>
<p>This Site provide Simple and easier <cite>tutorials to
learn programming.</cite></p>
</body>
</html>
Output
This Site provide Simple and easier tutorials to learn programming.
<bdo> Elements
- HTML <bdo> tag stands for BiDirectional Override tag.
- BiDirectional Override means that the text written from both directions (right to left and left to right).
- The <bdo> tag used dir attribute to change the direction of the text.
- dir attribute is used two values RTL(right to left) and LTR( left to right).
- The <bdo> tag has both opening and closing tags.
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML bdo Elements</title>
</head>
<body>
<p>This is a simple paragraph.</p>
<p><bdo dir = "rtl">This is a simple paragraph using bdo
tag. </bdo></p>
<p><bdo dir = "ltr">This is a simple paragraph using
bdo tag. </bdo></p>
</body>
</html>
Output
This is a simple paragraph.
This is a simple paragraph using bdo tag.
This is a simple paragraph using bdo tag.