What is the difference between the 'q' and 'blockquote' and 'cite' tags in HTML? And how do you use them correctly?

6

What is the difference between <q> and <blockquote> and <cite> , because everything stops me being for citation. Is there any good practice or correct way to use these tags correctly? We can use these tags one inside the other since in HTML there is also the cite="" attribute and the single quotes " ...

I also noticed that each of these tags is rendered differently on the page. It seems that the user-agent has a particular CSS style for each of the tags, one has italic ( <cite> ) another not, one has some spaces ( <blockquote> ) others do 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? Is there a different semantic value for each of them, or do they all mean the same thing and there is no difference between them?

    
asked by anonymous 17.09.2018 / 14:51

2 answers

7

Everything about HTML semantics

The HTML element <cite> represents a reference to an artwork. It should include the title of the paper or a reference URL, which may be in abbreviated form according to the conventions used for adding the citation metadata.

The HTML element <blockquote> (or block citation HTML element) indicates that the included text is a long quote. Usually, this is processed visually by the indentation (see Notes on how to change it). The URL for the citation source can be given using the cite attribute, while a font text representation can be given using the <cite> element.

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

References:

link
link
link

    
17.09.2018 / 15:01
9

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

<q>...</q> you cite inline , that is, in the middle of a text. My experience is that it serves more for a highlight, yet it should only be used as an actual quote of something said earlier. It's how we use the '' here on the site through markdown '' (but it has the code-citation semantics that here is different from the basic citation).

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

<cite>...</cite> is to set a reference and not to place the citation, the text itself, although you can use it as well. Mainly to indicate who said, it is more to place a URL with the text of the author or material quoted, meaning the source indicates. It can facilitate formatting and searches for various tools. Can be used within <blockquote> .

    
17.09.2018 / 15:03