Sunday, December 10, 2023
HomeVideo EditingHTML Ingredient: blockquote

HTML Ingredient: blockquote


The HTML <blockquote> aspect is used to point a extra prolonged citation or quotation taken from elsewhere. It’s sometimes used to set off a block of textual content quoted straight from a supply, comparable to a e-book or article.

The abbreviation “blockquote” stands for “block citation.”

Syntax

The syntax for the <blockquote> tag is easy:

1
<blockquote>
2
  <p>Quoted textual content goes right here.</p>
3
  <footer>Supply of the quote</footer>
4
</blockquote>

This syntax creates a block-level aspect that may comprise a number of paragraphs of quoted textual content and a footer aspect that can be utilized to offer attribution or a supply for the quote.

Instance

1
    <p>Here's a quote from Jane Austen’s Pleasure and Prejudice:</p>
2
    <blockquote>
3
      <p>“It's a reality universally acknowledged, {that a} single man in possession
4
of a luck, have to be in need of a spouse.”</p>
5
     <footer>Jane Austen, Pleasure and Prejudice</footer>
6
   </blockquote>

Right here’s one other instance; an alternate methodology of marking up a blockquote utilizing determine and figcaption tags, and this time with just a little CSS.

On this instance, the <blockquote> aspect units off the quote from the remainder of the textual content, and the <figcaption> function gives attribution. You could optionally use the cite attribute to hyperlink to, and the <cite> aspect to show the unique supply (be aware that browsers will show the <cite> tag with italicized textual content by default).

Attributes

The <blockquote> aspect has no required attributes, however it may possibly use the next non-obligatory attributes:


  • cite: Specifies the URL of the supply of the quote. This attribute can be utilized to hyperlink to the quote’s authentic supply.

Content material

The <blockquote> aspect can comprise any block-level aspect, together with textual content, headings, lists, and different HTML parts.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments