In this article, we'll dive into the world of HTML quotation tags, examining their functions along with examples how they can be incorporated into our web content.
HTML Quotations
Apart from text formatting, sometimes you want to show text in quotes or double quotes or you want to quote a famous saying of personalities and so on.
HTML has various quotation and citation elements. Let’s look at them
Text Abbreviation (<abbr> tag)
It helps to abbreviate long text by putting it within <abbr>…</abbr> tags. If present, the title attribute must contain the full description. If not present, it is treated as normal text.
Example
<p>My belong to <abbr title = "Gujarat”>Guj </abbr> state.</p>
Block Level Quotation (<blockquote> tag)
It is used to define long quotations or block-level quotes. When you want to use a piece of text from another source as a reference in your content, you should put it within <blockquote>...</blockquote> tags.
Browsers usually indent the text specified within the <blockquote> element.
Example
<blockquote> Non Violence is best form of defence </blockquote>
Short Quotations / Inline Quotation (<q> tag)
It is used to define a short inline quotation. It is used to add a double quote within a sentence. When browser displays the page , it usually inserts quotation marks around the text specified within <q>…</q> element.
Example
<p> We must <q> Save Trees </q>.</p>
Text Citations (<cite> tag)
If you are quoting text from other sources, you can indicate the source from where it is quoted as a confirmation or specify the title for it.
It defines the title of the source. Just place it within <cite>…</cite> elements.
It defines the title of the source. Just place it within <cite>…</cite> elements.
Browsers usually display the text within <cite>…</cite> in italic.
Example
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
Displaying Code and Computer Output with <code> and <kbd>
The <code> tag is used to define a piece of computer code, and the <kbd> tag represents user input, such as keyboard commands.
Example
<p>Open the terminal and type <code>npm install</code> to install the dependencies.</p>
<p>To save a file in most applications, press <kbd>Ctrl + S</kbd>.</p>
In the first example, the <code> tag is used to encapsulate a code snippet, indicating to the reader that "npm install" is a command to be typed in the terminal. The second example uses the <kbd> tag to represent the keyboard input for saving a file, using the common shortcut "Ctrl + S."
Address Text
It is used to define the contact information of the document’s or article’s owner. The text specified within <address>...</address> element is displayed in italic.
Example
<address>F-33, R K Habitat , Station Road, Bharuch - Gujarat</address>
Full Program
<html>
<head> <title> HTML Quotation Tags </title> </head>
<body>
<p> Use of Quotation Tags </p>
<hr/>
<p> We must <q> Save Trees </q>.</p>
<blockquote> Non Violence is best form of defence </blockquote>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
<address>F-33, R K Habitat , Station Road, Bharuch - Gujarat</address>
<p>I belong to <abbr title = "Gujarat"> Guj </abbr> state.</p>
<p>Open the terminal and type <code>npm install</code> to install the dependencies.</p>
<p>To save a file in most applications, press <kbd>Ctrl + S</kbd>.</p>
</body>
</html>
Output:
Conclusion
HTML quotation tags allows developers to integrate quotes seamlessly into web page. Whether it's a short inline quote using the <q> tag or a longer block-level quotation using the <blockquote> tag, these HTML elements are important to the semantic structure of the document.
