szabgab szabgab - 9 months ago 42
HTML Question

Inline quote in html 5 and accessibility

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
    pair that apparently I cannot demo here?

  • Something else? has a bunch of explanation on how works, but I did not see a recommendation.


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: "&quot;"

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

    This text is from another source
        <a href="">Source Title</a>

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.


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 (e.g. italics or a different background colour) between quotes from external sources and the page's original content.