What is the difference between <q>, <blockquote> and <cite> tags in HTML? And how to use them correctly?

Question

What’s the difference between <q> and <blockquote> and <cite>, because everything seems to be for quote. Is there any good practice or correct way to use these tags correctly?

We can use these tags inside each other since in HTML there is also the attribute cite="" and single quotes " ".

I also noticed that each of these tags is rendered differently on the page. It seems to me that the user-agent has a particular CSS style for each of the tags, one has italics (<cite>) one has some spacing (<blockquote>) others not...

<q>Lorem ipsum dolor sit amet.</q><br>
<blockquote>Lorem ipsum dolor sit amet.</blockquote><br>
<cite>Lorem ipsum dolor sit amet.</cite><br>

After all, how should these tags be used? There is a different semantic value for each of them, or they all mean the same thing and there is no difference between them?

Answer 1

In theory each can be used almost for the same purpose, but it should not, the correct use is semantic and indicates the intention of what you are doing. Note that the presentation can be customized even to be equal (or almost), although it makes little sense.

<q>...</q> you make a quote inline, in the middle of a text. My experience is that it serves more for a highlight, although it should only be used as a real quote of something said earlier. That’s how we use the `` here on the website through markdown (but it has code citation semantics that here is different from basic citation).

<blockquote>...</blockquote> is the same, but it creates paragraph (to some extent it works as a <div> with more specific function), so it is not exactly equal to the <q>. It should be used for an isolated highlight of the quote and possibly, but not necessarily, decorated with CSS differently. That’s how we use the > in the markdown (there is the code quote also, which is a little different, but at the bottom falls in the same internally, in HTML).

<cite>...</cite> is to define a reference and not to place the quote, the text itself, although you can use it as well. Mainly to indicate who said, it is more to put a URL with the text of the author or cited material, ie, indicates the source. Can facilitate formatting and searching of various tools. Can be used within the <blockquote>.

Answer 2

All about HTML semantics

The HTML element <cite> represents a reference to an artistic work. Should include the title of the work or a reference URL, which can be in an abbreviated form according to the conventions used for adding the citation metadata.

The HTML Element <blockquote> (or HTML block citation element) indicates that the included text is a long citation. Normally, this is visually processed by recoil (see Notes on changing it). The URL to the source of the quote can be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

The HTML element <q> indicates that the attached text is a short quotation in line. Most modern browsers implement this by enclosing the text in quotes. This element is intended for short quotations that do not require paragraph breaks; for long quotations, use the element <blockquote>.

References:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q

Answer 3

<blockquote>: It’s a long quote or a quote that you need to isolate from other content around you, and browsers often indent your content using margin. The attribute cite receives a URL that says where that information came from (from a news, message, comment...). If you want to make a mention and also quote visually from where that quote came from do the following:

<figure>
    <blockquote>
    Essa é uma citação a nível de bloco.
    </blockquote>

    <figcaption>
        <span class="author">João Pedro</span>
        <cite>Qualquer trabalho criativo</span>
        <data>05/10/2020</data>
    </figcation>
</figure>

This is the most semantic and ideial way of making this structure. Of course, you can also put a <footer> within the <blockquote> to do this assignment, but this is not recommended by specifying HTML.

<q>: Represents an in-line quote, where newer browsers automatically insert the quotes, but you can do the following to confirm that the quotes will be applied:

q::before {
    content: open-quote;
}

q::after {
    content: close-quote
}

<q>Isso é uma citação</q>

Since this is the way new browsers use to self-apply quotes, there is no way to duplicate quotes in both old and new browsers. It can also receive the attribute cite.

<cite>: It only serves to quote creative works, nothing else. If you want to quote the author/company who did that work/content, use a tag <b> or a <span> with a class="author", don’t use the <cite>. It’s this little guy who usually gets the italics.

PS: You can very well change the styles of the elements above and any other to leave them the way you want. This is normal, just be careful not to leave the element in a confusing format.