Webpage creators often want to display quotations in their HTML documents. But this can't be done with regular HTML elements like <span>, <p>, etc. To achieve the required result, you need to use HTML quotations, which is what you'll learn about in this topic.
HTML quotations
HTML quotations can be used to display exact quotes from authors in a different format to normal HTML text. They allow you to highlight content by adding multiple stylesheet attributes to change its appearance. As you will see, HTML quotations can be block-level or inline elements. It's also important to remember that they are case-sensitive. Explanations and examples of the various types of HTML quotations are provided in the following sections.
The <q> tag
The HTML <q> tag is used to insert a short quotation from another source. It's an inline element, so it creates inline quoted text. This means that it does not insert line breaks before and after the <q> tag.
You can place quoted text on your webpage by inserting it inside an opening and closing <q> tag:
<q>This is a quote</q>The following example demonstrates how you can add short quotations to your HTML code:
<body>
<h1>Example of q tag</h1>
<p><q>This is the quote element with some text.</q> And this is the normal text.</p>
</body>Most modern browsers add quotation marks (❝ ❞) when you apply the <q> tag.
The output of the above code snippet is shown below:
The <blockquote> tag
The HTML <blockquote> tag defines a passage of text that has been quoted from another source. This tag can be utilized when you want to quote a large section of content by changing the text's alignment — browsers typically indent the <blockquote> to achieve this effect. It's a block-level element that can be created by placing the content inside an opening and closing <blockquote> tag:
<blockquote>Dive into Java, Python, and other programming languages in a project-based
learning environment that is integrated with JetBrains IDEs</blockquote>The example below illustrates how to use the <blockquote> tag in a simple HTML document:
<body>
<h1>Example of blockquote tag</h1>
<h2>JetBrains Academy</h2>
<p>Learn to program by creating working applications</p>
<blockquote>
Try a holistic approach to learning in which you study the theory and
immediately put it into practice by building working applications. Dive
into Java, Python, and other programming languages in a project-based
learning environment that is integrated with JetBrains IDEs.
</blockquote>
</body>And this is the output:
The <cite> tag
HTML <cite> tags can be used to highlight the names of creative works, such as poems, pieces of artwork, or movies. Browsers usually render the text written inside the <cite> tag in italics. Text wrapped in a <cite> tag is known as a citation element. These elements can also be utilized to provide a reference to the source of content included in a <q> or <blockquote> element.
The syntax of the <cite> tag is shown below:
<cite>This is the citation element.</cite>The following example shows how you can add citation elements to your HTML code:
<body>
<p><cite>Fleet</cite> Next-generation IDE by JetBrains</p>
</body>The output of the above code snippet can be seen below:
The citation attribute
HTML also provides a citation attribute that can be used with the <q> and <blockquote> elements. The cite attribute enables you to provide an URL that identifies the source of the cited text. As shown in the following code snippet, the attribute's value is the URL that specifies the source:
<q cite="URL"></q>
<blockquote cite="URL"></blockquote>The below example demonstrates how you can add citation attributes to <q> and <blockquote> elements:
<body>
<q cite="https://www.jetbrains.com/fleet">Fleet - Next-generation IDE by JetBrains</q>
<blockquote cite="https://www.jetbrains.com/remote-development/space-dev-environments/">
Space cloud dev environments for JetBrains IDEs
</blockquote>
</body>And the output of the above code snippet is below:
The URLs defined with cite attributes aren't visible on the webpage, as you can see. But it's important to note that they are accessible to screen readers and JavaScript engines.
Conclusion
In this topic, you have learned about the different quotation tags provided by HTML. You've seen how to include short quotations in a webpage with the <q> tag. And that the <blockquote> tag can be used when you want to quote a larger amount of content from another source. You also know how to highlight creative work with the <cite> element and identity the source of a cited piece of text with the cite attribute. Now you can insert these semantic quotation elements into your HTML code whenever they are required.