Quote // feature recommendation Public discussion

The Quote feature provides the user with the ability to insert a self-contained quote, that can be referenced from edited content.

The quote is usually accompanied with a source reference.

UI / UX

• UI: A feature inserting the proper quote element into the editor’s editable area, usually represented as a button with the “Quote” icon
• Title: “Quote”
• Keystroke: –

HTML Markup

The <figure> element MUST be used to represent the Quote feature as it is the standard way to express self-contained non-textual additional content^[1].

The <figure> element SHOULD have a class attribute which value is set to quote to identify that the element is being used for representing quote and to allow styling that particular use-case.

The <blockquote> element MUST be used to represent the quote itself as it is the standard way to express a quote in HTML^[2].

The <blockquote> element MAY have cite attribute^[3], containing a valid URL^[4] pointing to the source of citation.

The name of the source of citation, if it is present, MUST be represented by the <cite> element^[5] nested inside <figcaption> element^[6]. If the name of the source is not present, the <figcaption> element MAY be used to provide a caption for the quote.

Example:

<figure class="quote">
	<blockquote cite="https://en.wikipedia.org/wiki/Apollo_11">
		<p>Apollo 11 was the first spaceflight that landed humans on the Moon. Americans Neil Armstrong and Buzz Aldrin landed on July 20, 1969, at 20:18 UTC (46 years ago). Armstrong became the first to step onto the lunar surface six hours later on July 21 at 02:56 UTC. Armstrong spent about two and a half hours outside the spacecraft, and together with Aldrin collected 47.5 pounds (21.5 kg) of lunar material for return to Earth. The third member of the mission, Michael Collins, piloted the command spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it just under a day later for the trip back to Earth.</p>
	</blockquote>
	<figcaption><cite><i>Apollo 11</i>, Wikipedia.org</cite></figcaption>
</figure>

References

1. The <figure> element definition in the HTML5 standard.
2. The <blockquote> element definition in the HTML5 standard.
3. The cite attribute definition in the HTML5 standard.
4. The definition of a valid URL in the HTML5 standard.
5. The <cite> element definition in the HTML5 standard.
6. The <figcaption> element definition in the HTML5 standard.