HTML <q> element: quotation symbols not selectable?

To include a quotation in HTML, one could simply use quotation symbols:

<p>“Yes,” he said.</p>

Alternatively, one could use the inline quotation element:

<p><q>Yes,</q> he said.</p>

Using the inline quotation element has some advantages, e.g., it provides additional semantic information to any person or machine reading the HTML code.

However, I noticed something that seems to me like a severe disadvantage of the inline quotation element. In all the browsers I've tried, although quotation symbols are rendered, it is not possible to select the quotation symbols. Screenshot of quotation symbols not being selected

In Chrome and Edge, predictably, this means that the quotation symbols are omitted if the user copies and pastes. In Firefox, interestingly, quotation symbols are inserted in the pasted text, even though they do not appear to be selected.

This behavior seems jarring for the user. Is it really the best practice for quotations in HTML? When, if ever, should developers use the inline quotation element?

Tags: