Master the common HTML tags used to reference content in web pages

Time:2022-2-4

Use block quote for long quotes, q for short quotes, and cite for references. In practice, only block quote and Q are usually used.
According to the HTML specification of, there are three elements for referencing content, namely < blockquote > < Q > < cite >. In reality, the use of these tags is still relatively small. Therefore, when you really apply them, what tags should you use? You must know their semantics like the back of your hand.
<blockquote>

Blockquote is a reference to the content. Content must include block level elements such as titles, lists, paragraphs, or div tags. This element can also have a location specified by the optional attribute cite (in the form of URI), for example:
<blockquote cite=”https://www.jb51.net/reference/htmltags/blockquote/”>
<p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s.</p>
<p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p>
</blockquote>

<q>

<q> A tag defines a short reference< q> Tags are essentially the same as < blockquote >. The difference lies in their display and application< q> Tags are used for short inline references.
Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q>

Although < Q > is almost never used, it has some useful properties. For example, you can specify the appearance of quotation marks for < Q > through CSS. This is allowed
Q {}
Q {quotes: ‘»’ ‘«’ }
Q {quotes: ‘„’ ‘“’}

It seems good, but the whole series of IE doesn’t support it, even the latest IE8. Great embarrassment~~
<cite>

Use this tag to define references, such as titles of books or magazines. For example:
<p>And <cite>Bob</cite> said <q>No, I think it’s a banana</q>.</p>

Summary:
Long quotes use < blockquote >, short quotes use < Q >, and references use < cite >. In practice, only < blockquote > and < Q > are usually used.