mydomain
No ADS
No ADS

HTML Quotations Tutorial with Examples

  1. Quotation
  2. blockquote
  3. q
  4. abbr
  5. address
  6. cite
  7. bdo

1. Quotation

In HTML, <q> and <blockquote> tags are used to mark a paragraph as a quote. In addition, you may also be interested in other similar tags such as <abbr>, <address>, <cite> and <bdo>.

2. blockquote

No ADS
The <blockquote> tag is used to quote an entire paragraph. The paragraph quoted by default will be right indented a bit. It will also insert line breaks before and after the <blockquote>.
blockquote-example.html
<!DOCTYPE html>
<html>
<head>
    <title>Blockquote</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>Blockquote Example:</h3>

    I am some normal text
    <blockquote>The blockquote starts here and ends here</blockquote>
    and here is some normal text again
</body>
</html>
You may find that the quote created by <blockquote> is not really nice, but don't worry about that. To get a better quote, you should combine <blockquote> and CSS. For example, what you are reading is a quote of o7planning which was made by using the <blockquote> and CSS.

3. q

No ADS
The <q> tag helps you create an inline quote. It does not insert line breaks before and after the <q> tag.
Most of the modern browsers use quotation marks (" ") to quote the content of the <q>..</q> tag.
q-example.html
<!DOCTYPE html>
<html>
<head>
    <title>q quote</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>q-quote example:</h3>
    I am some normal text
    <q>The q-quote starts here and ends here</q>
    and here is some normal text again
</body>
</html>
The example below uses CSS to customize the quote of the <q> tag:
q-css-example.css
q {
  quotes: "«" "»";
  color: blue;
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}
q-css-example.html
<!DOCTYPE html>
<html>
<head>
    <title>q quote</title>
    <meta charset="UTF-8">
    <link href='q-css-example.css' rel='stylesheet'>
</head>
<body>
    <h3>CSS q-quote example</h3>
    I am some normal text
    <q>The q-quote starts here and ends here</q>
    and here is some normal text again
</body>
</html>
Another example uses CSS to customize the <q> tag:
q-css-example2.css
q {
  color: blue;
  font-style: italic;
}
q:before {
    content:url('quote-16.png');
    margin-left: 5px;
    margin-right: 5px;
}
q:after {
}
q-css-example2.html
<!DOCTYPE html>
<html>
<head>
    <title>q quote</title>
    <meta charset="UTF-8">
    <link href='q-css-example2.css' rel='stylesheet'>
</head>
<body>
    <h3>CSS q-quote example</h3>
    I am some normal text
    <q>The q-quote starts here and ends here</q>
    and here is some normal text again
</body>
</html>

4. abbr

You can use the <abbr> tag to provide more information on abbreviations to the browser, the translation system, or the search engines.
abbr-example.html
<!DOCTYPE html>
<html>
<head>
    <title>Tag abbr</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>abbr example:</h3>
    The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</body>
</html>

5. address

The <address> tag is used to provide contact information (author / owner) of the documents or articles. If the <address> tag is inserted into the <body> tag, it will represent the contact information of the document. If the <address> tag is inserted into the <article> tag, it will represent the contact information of this article.
Most of the browsers display the content of the <address> tag in italics and insert line breaks before and after the <address> tag.
address-example.html
<address>
    You can contact author at
    <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
    If you see any bugs, please
    <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
    You may also want to visit us:<br>
    Mozilla Foundation<br>
    331 E Evelyn Ave<br>
    Mountain View, CA 94041<br>
    USA
</address>

6. cite

No ADS
The <cite> tag is used to highlight the name (or the title) of a book, a song, a movie, artwork and so on.
Specifically, the <cite> tag is used to highlight names (or titles) for the following fields:
  1. A book
  2. A research paper
  3. An essay
  4. A poem
  5. A musical score
  6. A song
  7. A play or film script
  8. A film
  9. A television show
  10. A game
  11. A sculpture
  12. A painting
  13. A theatrical production
  14. A play
  15. An opera
  16. A musical
  17. An exhibition
  18. A legal case report
  19. A computer program
  20. A web site
  21. A web page
  22. A blog post or comment
  23. A forum post or comment
  24. A tweet
  25. A Facebook post
  26. A written or oral statement
  27. And so forth.
cite-example.html
<p>
       The learning content can be referred from <cite>Data Structures
         & Algorithms in Java</cite>.
<p>

7. bdo

The <bdo> tag is used to reverse the text content in it. BDO is short for "Bi-Directional Override".
Attribute
Value
Description
dir
ltr
(Left to right) Content of the <bdo> tag will be displayed in the left to right direction (By default).
dir
rtl
(Right to left) Content of the <bdo> tag will be displayed in the right to left direction.
bdo-example.html
<h4>bdo dir="ltr" (Default)</h4>
<bdo dir="ltr">Tom AND Jerry</bdo>

<h4>bdo dir="rtl"</h4>
<bdo dir="rtl">Tom AND Jerry</bdo>
No ADS
No ADS
No ADS
No ADS

Newest Articles

Show More
No ADS