HTML <q> Element

Publish in HTML Tutorial el 25/05/2025 15:35

The <q> tag in HTML is used to define a short inline quotation. Browsers usually render the content inside this element with quotation marks around it, making it an ideal choice for including quoted text within paragraphs or other inline elements without breaking the flow of the document.

This element also supports the cite attribute, which allows you to specify the source URL of the quotation. While the quotation marks are automatically added by the browser, developers can further style the <q> element using CSS for more visual control.

Basic Syntax

To use the <q> element, simply wrap the quoted text inside the opening and closing tags:

This will display as a short quote wrapped in quotation marks by default:

Play Code

<p>Here is a quote: <q>Keep it simple, stupid.</q></p>

Examples Using <q>

Example 1: Basic Inline Quote

This example shows how to use the <q> element inside a paragraph to denote a short quote.

Play Code

<p>
    As Albert Einstein once said: 
    <q>Everything should be made as simple as possible, but no simpler.</q>
</p>

Example 2: Styled Quote with Custom Styling

In this example, we apply some custom CSS to make the quote stand out visually.

Play Code

<style> 
q { 
    background-color: #f1f1f1; 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-style: italic; 
}
</style>
<p>Another famous saying is: <q>Simplicity is the ultimate sophistication.</q></p>

Example 3: JavaScript Dynamic Quote Display

This example demonstrates how to dynamically insert a quote using JavaScript inside a <q> element.

Play Code

<script> 
window.onload = function() { 
    const quote = "The only way to do great work is to love what you do."; 
    document.getElementById('quote').innerText = quote; 
};
</script>
<p>Steve Jobs once said: <q id="quote"></q></p>

Example 4: Dynamic Source Attribution with JavaScript

This example adds a dynamic attribution link based on the quote shown, demonstrating how JavaScript can interact with the <q> element's cite attribute.

Play Code

<script> 
window.onload = function() { 
    const quoteText = "Stay hungry, stay foolish."; 
    const quoteSource = "https://api.api-ninjas.com/v1/quotes";  
    const quoteElement = document.getElementById('dynamicQuote'); 
    quoteElement.innerText = quoteText; 
    quoteElement.setAttribute('cite', quoteSource);  
    const citeLink = document.getElementById('citeLink'); 
    citeLink.href = quoteSource; 
    citeLink.innerText = "Read more"; 
};</script>
<p>
    A notable quote: 
    <q id="dynamicQuote"></q> - 
    <a id="citeLink" href="#"></a>
</p>

Example 5: Random Quote Generator

This final example uses JavaScript to randomly select and display a quote from a predefined array of quotes each time the page loads.

Play Code

<script> 
const quotes = [ 
    {
        text: "Life is what happens when you're busy making other plans.", 
        author: "John Lennon"
    }, 
    {
        text: "The journey of a thousand miles begins with one step.", 
        author: "Lao Tzu"
    }, 
    {
        text: "That which does not kill us makes us stronger.", 
        author: "Friedrich Nietzsche"
    } 
]; 
window.onload = function() { 
    const randomIndex = Math.floor(Math.random() * quotes.length); 
    const selected = quotes[randomIndex]; 
    document.getElementById('randomQuote').innerText = selected.text; 
    document.getElementById('quoteAuthor').innerText = "— " + selected.author; };
</script>
<p>
    <q id="randomQuote"></q> 
    <span id="quoteAuthor"></span>
</p>

Tips and Tricks

Use the cite attribute to reference the source of the quote, even if it's just a placeholder.
Combine <q> with <blockquote> for longer citations that require paragraph-level structure.
Style the <q> element using CSS to enhance readability or match your site's design language.
Avoid nesting multiple <q> elements unless necessary; use sparingly to maintain semantic clarity.
You can dynamically change the content of a <q> element using JavaScript, just like any other HTML element.

The <q> element is a powerful tool for marking up inline quotations with semantic meaning. By understanding its usage and styling options, you can enhance both the accessibility and presentation of quoted content on your website.