The <q> tag is a standard quotation tag and is used for short quotations. The browser normally inserts a quotation mark around the quotation. For longer quotations, the <blockquote> tag must be used since it is a block-level element. The <q> tag requires a starting as well as an end tag.
Note: We use <blockquote> for long quotations, you can read more about it from Here.
- Represents inline quotations.
- Automatically applies quotation marks based on the browser's default style or language settings.
- Can be styled with CSS for custom quotation marks.
- The <q> tag also supports the Global Attributes and Event Attributes in HTML.
<html>
<body>
<p>
<!-- html q tag is used here -->
<q>GeeksforGeeks</q>
A computer science portal for geeks
</p>
</body>
</html>
Output:
"GeeksforGeeks" A computer science portal for geeks- The <q> tag wraps the quoted text "GeeksforGeeks"
- The browser renders quotation marks around the quoted text automatically.
Syntax:
<q>Quoted text</q>- <q>: Opens the quotation tag.
- Quoted text: The text to be quoted.
- </q>: Closes the quotation tag.
More Examples of the <q> Tag
Nested Quotations
<!DOCTYPE html>
<html>
<body>
<p>The author mentioned, <q>The phrase <q>Carpe Diem</q> means seize the day.</q></p>
</body>
</html>
- Demonstrates nesting <q> tags for quotes within quotes.
- Alternates between primary and secondary quotation marks automatically.
Quotation with Inline Styling
<!DOCTYPE html>
<html>
<body>
<p>The manager said, <q style="color: blue;">Work smarter, not harder.</q></p>
</body>
</html>
- Adds inline styling to the <q> tag, making the text appear in blue.
- Shows how <q> can be styled directly.
Why Use HTML q Tag
- Provides semantic meaning to inline quotations.
- Improves accessibility and SEO.
- Allows browsers to apply appropriate quotation marks based on the language.
- Easy to style with CSS for visual customization.
Interesting Facts about HTML q Tag
- Default quotation marks are language-sensitive. For example, French uses « and » instead of " and ".
- The <q> tag is not suitable for block quotations; use <blockquote> instead.
- Quotation marks can be overridden with the quotes CSS property.