HTML Quotation and Citation Elements
In HTML, a quotation refers to a passage of text that is taken from another source and included in a web page. This quoted text can be short or long. HTML provides specific elements to mark up different types of quotations.
These quotation elements are used to insert the quoted text on the web page that is distinct from the standard text on the website. There are two main elements used for marking up quotations in HTML:
- <blockquote> element
- <q> element
Let’s understand both <blockquote> and <q> tags one by one.
HTML <blockquote> Element for Quotation
We use the <blockquote> element to quote a passage from another source. This <blockquote> element specifies a section of text within the HTML document that is quoted from another source. This could include sources such as another website, a webpage, books, journals, and other media forms.
The <blockquote> element is generally used to mark up longer quotations in HTML. Browsers usually indent the text inside a <blockquote> element from the left and sometimes the right sides to visually differentiate it from the main body of text on the web page.
The basic syntax to use <blockquote> quotation element in HTML document is as:
<blockquote><p>Enter your text here.</p></blockquote>
Here are a few examples to illustrate how to use the <blockquote> element in HTML document:
Example 1:
<!DOCTYPE html>
<body>
<p>Here’s a famous quote from a renowned scientist, Albert Einstein:</p>
<blockquote>
<p>"Look deep into nature, and then you will understand everything better." — Albert Einstein</p>
</blockquote>
</body>
</html>
Output:
In this example, we have used the <blockquote> tag to display the quoted text as a block with an indentation at the beginning that shows that it is a quotation.
Using cite Attribute with < blockquote > Element
We can also use the cite attribute on the < blockquote > element to indicate the source of the quoted text. The value of this attribute must be a URL that points to an online document. However, the cite attribute is an optional attribute.
The basic syntax to use <blockquote> element with cite attribute is as:
<blockquote cite="URL-to-source">
<!-- Quoted content goes here -->
</blockquote>
Let’s take an example in which we will see how can we quote a section of text from the scientech easy article.
Example 2:
<!DOCTYPE html>
<body>
<p>Here’s a quote from a Scientech Easy website:</p>
<blockquote cite="https://www.scientecheasy.com/2023/02/html-tutorial.html/">
Hypertext Markup Language is a widely used language on the web to make a webpage or website. Berners-Lee created HTML in late 1991 but “HTML 2.0” was the first standard HTML specification which was published in the year 1995.
The major version of HTML was 4.01 that published in the late 1999. The current and latest of version of HTML published in the year 2012 is HTML 5.2, that is an extension to HTML 4.01.
</blockquote>
</body>
</html>
Output:
In this example, we have used the HTML quotation <blockquote> element with a cite attribute. This attribute within the <blockquote> element adds URL, pointing to the source of the quoted text. However, most browsers do not visually display the URL.
HTML <q> Element for Short Quotation
In HTML, the <q> element is used to add a quote within a sentence, rather than as an indented block on its own. This tag defines a short quotation that does not require paragraph breaks.
In other words, it is useful when we want to add a brief quote within a paragraph without breaking the flow of text. Most modern browsers automatically insert quotation marks around the quotation. That is, the text enclosed in a < q > element should begin and end in double quotes.
The < q > element can also carry the cite attribute. The value should be a URL pointing to the source of the quote. The basic syntax is as:
<p><q>This is a text within the short quotation</q></p>
Here’s an example of how to use the <q> element in HTML document:
Example 3:
<!DOCTYPE html>
<body>
<p>
As Mark Twain famously said, <q>The secret of getting ahead is getting started.</q>
This advice is particularly relevant in today's fast-paced world.
</p>
</body>
</html>
Output:
In this example, we have used the <q> element within a paragraph to insert a short quote from Mark Twain. The browser will automatically include double quotation marks around “The secret of getting ahead is getting started,” in the sentence.
Example 4:
<!DOCTYPE html>
<body>
<p>
Albert Einstein once remarked, <q cite="https://example.com/source-of-quote">Imagination is more important than knowledge.</q> This emphasizes the value of creative thinking alongside factual learning.
</p>
</body>
</html>
In this example, we have used the <q> element with a cite attribute pointing to a URL that points to the source of the quote. Thus, we can add the short quote within the paragraph, maintaining the flow of the text.
HTML < cite > Element for Citations
In HTML, we specifically use the <cite> element for referencing the title of a creative work. It can include the title of a book, a play, a poem, a film, a song, a painting, etc. Note that a name of person is not the title of a work.
By default, the most browsers usually displays the text inside the <cite> element in italic, indicating that the text is a citation or a reference to other works. Here is an example demonstrating how to use the <cite> element in HTML to cite a book:
Example 5:
<!DOCTYPE html>
<body>
<p>This chapter is taken from <cite>Beginning Web Development</cite>.</p>
</body>
</html>
In this example, we have properly used the <cite> tag to denote the title of a book “Beginning Web Development”. It will typically render in italics to emphasize that it is a title of book.
In this tutorial, we have explained HTML quotation and citation elements, such as <blockquote>, <q>, and <cite>, through examples. We hope that you have understood the basic concepts and have practiced all the examples.
