Inline quote in html 5 and accessibility

Question

What is the recommended way to quote someone else in an HTML text? Especially if I'd like to make sure screen-readers will handle it properly?

• Should I use double-quotes like this: "
• Should I write " that will look like this: " ?
• Should I use the <q></q> pair that apparently I cannot demo here?
• Something else?

http://html5doctor.com/blockquote-q-cite/ has a bunch of explanation on how <q> works, but I did not see a recommendation.

Answer 1

For short inline quotations, use the <q></q> tag. Most browsers will insert quotation marks around the quotation, however if you are using a css reset the following may be required:

q:before, q:after {
    content: """
}

For any longer quotations I would advise using the <blockquote></blockquote> tag in combination with the <cite></cite> tag, as follows:

<blockquote>
    This text is from another source
    <cite>
        <a href="http://source-url.com">Source Title</a>
    </cite>
</blockquote>

As per the HTML5 spec:

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Source: https://w3c.github.io/html/grouping-content.html#the-blockquote-element

Avoid using inline quotation marks in conjunction with the <q></q> tag, however they can be used with the <blockquote></blockquote> tag. In either case it would be advisable to make some sort of graphical distinction (eg italics or a different background colour) between quotes from external sources and the page's original content.

Answer 2

TL;DR: use q for inline quotes, without marks, and blockquote for long snippets (with marks when it's not the only content inside the blockquote )

You have two options:

• The <q> element , for quotes

This element must not include the quotation punctuation

Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the user agent.

But you can use CSS to override the default values. For instance:

:lang(en) q:before {
  content: "“";
}
:lang(en) q:after {
  content: "”";
}

:lang(fr) q:before {
  content: "«";
}
:lang(fr) q:after {
  content: "»";
}

As you would see, this can differ per language

Example:

<p>Shakespeare said <q>To be or not to be</q> was a question
     but never said what the answer was.</p>

• The <blokquote> element , for snippets

This element may include quotation marks:

Quotation marks may be used to delineate between quoted text and annotations within a blockquote.

Be careful with the <cite> element which is intented for reference a creative work or the name of its author. It does not contain a quote. Example

<blockquote>
 <p>My favorite quote of Shakespeare is "To be or not to be ?"</p>
  <footer>
    — <cite class="title">The Tragedy of Hamlet, Prince of Denmark</cite>
    by <cite class="author">William Shakespeare</cite>
  </footer>
</blockquote>