The blockquote tag’s default styling results in a block-level block of text with a left indent.
The following HTML code:
<h1>HTML <blockquote> (with a Shakespeare parody)</h1> <blockquote> To slack, or not to slack, that is the question;<br /> Whether 'tis nobler in the mind to suffer<br /> The zeros and low marks of outrageous assignments,<br /> Or to take pens against a sea of compositions,<br /> And by opposing, finish them. </blockquote> <p>To understand the <code>quote</code> attribute used in the CSS, read the w<sup>3</sup>school's <a href="https://www.w3schools.com/cssref/pr_gen_quotes.asp">https://www.w3schools.com/cssref/pr_gen_quotes.asp</a>.</p> <p>Shakespeare parody credit: <a href="https://www.angelfire.com/oh/Pretzel/Parody.html">Enoch Tung</a></p> <p>Adapted from Chris Cordier's : <a href="https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/">https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/</a></p>
results in the following:
HTML <blockquote> (with a Shakespeare parody)
To slack, or not to slack, that is the question;
Whether ’tis nobler in the mind to suffer
The zeros and low marks of outrageous assignments,
Or to take pens against a sea of compositions,
And by opposing, finish them.
To undertsand the quote
attribute used in the CSS, read the w3school’s https://www.w3schools.com/cssref/pr_gen_quotes.asp.
Shakespeare parody credit: Enoch Tung
Adapted from Chris Cordier’s : https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
The below Codepen uses CSS to add some visual impact to the blockquote element.
See the Pen Blockquote CSS by David Fox (@foxbeefly) on CodePen.