13. q Element
Introduction
Section titled “Introduction”The <q> element represents a short inline quotation. Unlike <blockquote>, which is for block-level quotes, <q> is for shorter quotes that appear within a paragraph or sentence. Browsers typically add quotation marks around q elements.
Basic Usage
Section titled “Basic Usage”<p>He said, <q>This is a quote.</q></p>With Citation
Section titled “With Citation”<p>As the author wrote, <q cite="https://example.com/source">Important quote.</q></p>Common Use Cases
Section titled “Common Use Cases”Inline Quote
Section titled “Inline Quote”<p>The teacher said, <q>Always validate your HTML.</q></p>Multiple Quotes
Section titled “Multiple Quotes”<p>First, <q>Quote one.</q> Then, <q>Quote two.</q></p>Browser Behavior
Section titled “Browser Behavior”Browsers automatically add quotation marks:
<p>He said <q>Hello</q>.</p><!-- Renders as: He said "Hello". -->Best Practices
Section titled “Best Practices”Short Quotes
Section titled “Short Quotes”Use q for short, inline quotes:
<!-- Good: Short inline quote --><p>She said, <q>This is important.</q></p>
<!-- Use blockquote for longer quotes --><blockquote> <p>This is a longer quotation that spans multiple sentences and should be displayed as a block.</p></blockquote>