Master the commonly used HTML tags for quoting content in web pages

Master the commonly used HTML tags for quoting content in web pages

Use blockquote for long citations, q for short citations, and cite for references. In practice, only blockquote and q are usually used.
According to the HTML specification, there are three elements for quoting content, namely <blockquote> <q> <cite>. In reality, these tags are rarely used, so when you do apply them, which tags should you use? You have to be very familiar with their semantics.
<blockquote>
A blockquote is a quotation of content. The content must include block-level elements such as headings, lists, paragraphs, or div tags. This element can also have an optional attribute cite that specifies the location (in the form of a 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>
The <q> tag defines a short quote. The <q> tag is essentially the same as a <blockquote>. The difference lies in their display and application. The <q> tag is used for short inline quotations.
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 the <q> quotation mark symbol through CSS. This is allowed
Q {}
Q {quotes: '»' '«' }
Q {quotes: '„' '“'}
It seems good, but it is not supported by the entire IE series, not even the latest IE8. Huge embarrassing~~
<cite>
Use this tag to define a reference, such as a book or journal title. For example:
<p>And <cite>Bob</cite> said <q>No, I think it's a banana</q>.</p>
Summarize:
Use <blockquote> for long citations, <q> for short citations, and <cite> for references. In practice, only <blockquote> and <q> are usually used.

<<:  Detailed explanation of the use of the clip-path property in CSS

>>:  Issues installing Python3 and Pip in ubuntu in Docker

Blog    

Recommend

Detailed explanation on how to modify the default port of nginx

First find out where the configuration file is wh...

React Router V6 Updates

Table of contents ReactRouterV6 Changes 1. <Sw...

Implementation of FIFO in Linux process communication

FIFO communication (first in first out) FIFO name...

Solution to the failure of docker windows10 shared directory mounting

cause When executing the docker script, an error ...

Setting up VMware vSphere in VMware Workstation (Graphic Tutorial)

VMware vSphere is the industry's leading and ...

How does JS understand data URLs?

Table of contents Overview Getting started with d...

JavaScript to implement slider verification code

This article shares the specific code of JavaScri...

How to use Webstorm and Chrome to debug Vue projects

Table of contents Preface 1. Create a new Vue pro...

A quick solution to accidentally delete MySQL data (MySQL Flashback Tool)

Overview Binlog2sql is an open source MySQL Binlo...

Analysis and solution of flex layout collapse caused by Chrome 73

Phenomenon There are several nested flex structur...

CSS positioning layout (position, positioning layout skills)

1. What is positioning? The position attribute in...

Detailed explanation of MySQL instance with SSD storage enabled

Detailed explanation of MySQL instance with SSD s...

Let’s talk in detail about how browsers view closures

Table of contents Preface Introduction to Closure...