Menu
HTML

Quoting Text

Quoting text in HTML can be done using the <q> and <blockquote> elements. Each serves a different purpose and is used in different contexts based on the length and type of the quotation.

 

<q>: Inline Quotation

The <q> element is used for short, inline quotations. Browsers typically render the content of <q> elements with quotation marks.

Example Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Quotation Example</title>
</head>
<body>
    <p>She said, <q>The quick brown fox jumps over the lazy dog.</q></p>
</body>
</html>

In this example, the text "The quick brown fox jumps over the lazy dog." is displayed with quotation marks around it.

 

<blockquote>: Block Quotation

The <blockquote> element is used for longer quotations that are usually displayed as a block of text, indented from the rest of the content. The cite attribute can be used to provide a URL that indicates the source of the quotation.

Example Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Quotation Example</title>
</head>
<body>
    <blockquote cite="https://www.example.com/source">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    </blockquote>
</body>
</html>

In this example, the quoted text is displayed as a separate block, typically indented, and the cite attribute provides a reference to the source of the quote.

 

Combining <q> and <blockquote>

You can also combine <q> and <blockquote> elements when you need to quote text within a block quotation.

Example Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Combined Quotation Example</title>
</head>
<body>
    <blockquote cite="https://www.example.com/source">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <p>He also said, <q>The quick brown fox jumps over the lazy dog.</q></p>
    </blockquote>
</body>
</html>

In this example, a block quotation includes both block-level quoted text and an inline quotation.

 

Accessibility Considerations

When quoting text, consider the following for better accessibility:

  • Use the cite attribute in <blockquote> to reference the source of the quote.
  • Ensure the content within <q> and <blockquote> elements is clearly marked as a quotation to assistive technologies.

By using the <q> and <blockquote> elements appropriately, you can ensure that quoted text is semantically correct and accessible.

HTML