Prev Next

HTML Quotations

HTML provides specific elements to mark quotations and cited text. These elements clarify when text is borrowed from other sources or should be treated as a quotation. Tags like <q> and <blockquote> add semantic meaning and often apply default styling (like indentation) to quoted content. <cite> is used to reference the source or author.

Key Topics

Common Quotation Elements

Below are commonly used quotation tags with a brief explanation and single-element code snippets.

Example: The <q> element is for short inline quotes.

<q>This is a short quote.</q>

Example: The <blockquote> element is for longer quotations, often displayed as an indented block.

<blockquote>This is a longer quotation from another source.</blockquote>

Example: The <cite> element is used to reference the source or author of a quote.

<cite>Author Name</cite>

Basic Page Structure Example

This example demonstrates how quotation tags can be used in a simple HTML page. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page with Quotations</title>
</head>
<body>
    <h1>Famous Quotes</h1>
    <p>Here is a short inline quote: <q>Knowledge is power.</q></p>
    <blockquote>
        "In the middle of difficulty lies opportunity." <br>
        <cite>Albert Einstein</cite>
    </blockquote>
    <p>Blockquotes are useful when you want to reference a longer passage from a source, making it stand out as a distinct section of text.</p>
</body>
</html>

Explanation: The page above uses <q> for a short inline quote and <blockquote> along with <cite> for a longer quotation and attribution. This semantic markup makes it clear which text is quoted and where it comes from.

More Complex Example: Tables

Quotations can also be integrated into tables. Below is another code-box demonstration showing how quoted text might appear in a tabular format.

<h2>Quote Table</h2>
<table border="1" style="border-collapse:collapse; width:60%;">
    <tr>
        <th>Quote</th>
        <th>Author</th>
    </tr>
    <tr>
        <td><q>The only true wisdom is in knowing you know nothing.</q></td>
        <td><cite>Socrates</cite></td>
    </tr>
    <tr>
        <td><blockquote>Be yourself; everyone else is already taken.</blockquote></td>
        <td><cite>Oscar Wilde</cite></td>
    </tr>
</table>

Explanation: In this example, both <q> and <blockquote> are used within a table to present quotes. The <cite> element adds attribution, making it clear who said or wrote the text.

Key Takeaways

  • Use <q> for short, inline quotations and <blockquote> for longer, block-level quotations.
  • Use <cite> to reference the author or source of a quote, enhancing semantic clarity.
  • Quotation tags improve the understanding of borrowed text, making it clear which parts are quoted material.
  • These tags also help search engines and assistive technologies better interpret your content.
  • Integrate quotations into various layouts, including tables, to provide context alongside data or other elements.
Prev Next