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 Manny
visit 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.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Quotations in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Comments.