HTML <q> Tag
The <q> tag is an inline element, defining short quotes. Tag description, attributes and examples of using.
The <q> tag is an inline element used for short quotes that don't span multiple lines. To insert longer quotes, you need to use the <blockquote> block-level element.
Besides defining quotes, the <q> tag is also used to define words or phrases used in a figurative sense.
Browsers generally surround the text inside the <q> tag with quotation marks, the appearance of which depends on the HTML document encoding and the browser. You can change the appearance of quotation marks with the help of CSS styles.
Syntax
The <q> tag comes in pairs. The content is written between the opening (<q>) and closing (</q>) tags.
Example of the HTML <q> tag:
HTML <q> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Bernard Show says:
<q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q>
</p>
</body>
</html>Result
Example of the HTML <q> and <blockquote> tags:
Example of the HTML <q> tag used with the <blockquote> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll</p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
<q cite="https://www.wikiquote.org/">He who can, does, he who cannot, teaches.</q>
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
| cite | URL | Indicates the quote source. The user cannot see this information. |
| lang | language-code | Specifies the language of the element's content. |
The <q> tag supports the Global Attributes and the Event Attributes.
How to style an HTML <q> Tag
<style>
q {
color: #2a7ae2;
font-weight: bold;
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>Practice
What is the function of HTML <q> tag?