When creating quotes in HTML, most people are aware of the <blockquote> element, but for shorter quotes you might want an inline element, and that is where the <q> element comes in (not to be confused with CSS’ Q unit).

It can vary a bit, but the APA style guide says that for quotations of fewer than 40 words, add quotation marks around the words and incorporate the quote into your own text, and to use a blockquote if you quote more than 40 words (see what I did there? 😉).

Not only is it the correct semantic element to use, but it comes with with automatic quotation marks as well, which is pretty handy.

Additionally, you can use the cite attribute to provide the source for the quote as well.

Go deeper

CSS-Tricks has a good article looking at all the different ways we can quote and cite things, including <blockquote> and <q>, as well as <cite>, and how <figure> and <figcaption> play into it all as well.