There are several ways to cite sources or discern quotes from its surrounding text in HTML. Today, we go over the HTML Quotation Elements: <blockquote>, <q>, <abbr>, <address>, <bdo> and <cite>. Each has their own unique use cases – we discern between each and show you how to use them in your markup.
Blockquote
The <blockquote> element is used for multi-line, lengthy quoted text. The element is used to differentiate the quote itself from the surrounding paragraphs or other HTML elements. Look at this example that uses a certain famous playwright’s soliloquy:
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
blockquote p {
width: 80%;
margin: 0px 20px;
text-align: right;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p>
<blockquote>
"To be, or not to be: that is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them?..."
<p>—<em>Hamlet</em>, Act III, Scene I</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora doloribus quae mollitia vitae inventore minus sed id ut facere officiis cupiditate corporis, ratione, neque repellat cumque temporibus, dicta at labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aliquam adipisci at earum, optio consequatur et, alias corrupti voluptatum voluptates repellendus, tenetur suscipit qui nostrum totam veritatis doloremque laborum officia! Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum voluptate, perferendis amet hic totam perspiciatis excepturi. Nam earum, neque, in nihil magni aliquid id, iste deserunt tempore corporis eaque?</p>
</body>
</html>q
The <q> element puts quotation marks around a short quote. This is an inline element, much like <span> or <strong>, but for quotes. If your quote spans multiple lines, you should use <blockquote> instead.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<p>
The mission statement for the Make-A-Wish Foundation is <q>Together, we create life-changing wishes for children with critical illnesses.</q>
</p>
</body>
</html>abbr
There are times you want to define an acronym without having to include it in the flow of your writing. You do that with the <abbr> tag. It is also an inline element, similar to <span>, <em>, or <q>. Define your acronym inside the title attribute in your <abbr> tag.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<abbr title="COrona VIrus Disease 2019">COVID-19</abbr> was first discovered in December 2019 in Wuhan, China.
</body>
</html>address
The address element defines the contact information for the creator, either a person or business, and any of the following: physical address, email address, social media links, phone number, personal website, and other contact-like items.
The text renders in italic and has a line break before and after the address block.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<address>
Written for Career Karma by Christina Kopecky<br />
Other Articles: <a href="https://careerkarma.com/blog/author/christina-kopecky/">Career Karma Author Page</a><br/>
Twitter: <a href="https://twitter.com/cmvnk" target="_blank" rel="noopener noreferrer">@cmvnk</a><br />
Github: <a href="https://github.com/ckopecky" target="_blank" rel="noopener noreferrer">ckopecky</a><br />
</address>
</body>
</html>bdo
When working with languages that read from right to left, it’s easier to use a tag that renders text right-to-left for you as opposed to trying to do it on your own. Use the <bdo> element to render text with a bi-directional override. It takes a dir attribute that will indicate the direction. The default is “ltr”. “rtl” will render text right-to-left.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
</style>
</head>
<body>
<bdo dir="rtl">This renders Right-to-Left</bdo><br />
<bdo>This renders Left-to-Right</bdo>
</body>
</html>cite
The cite element is the final quotation element we talk about today. The cite tag defines the title of a creative work. It is an inline element and renders in italic.
<html>
<head>
<style>
body {
font-family: 'Roboto';
margin: 20px;
}
p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>
<cite>Mona Lisa</cite>, Leonardo da Vinci <br />
<sup>The Louvre (since 1797)</sup>
</p>
</body>
</html>Conclusion
Let’s review. Today we have looked at:
<blockquote>– used for longer quotes<q>– used for shorter quotes no longer than one line<abbr>– used to define abbreviations in our text<address>– used to define contact information for the creator or author<bdo>– used to control whether text is rendered left-to-right or right-to-left<cite>– used to define the title of something
There are many quotation elements and each one has their use case. Be sure to correct the right one(s) for your project!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
