<blockquote> HTML Tag » (2022)

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Element of
Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
What does <blockquote> HTML Tag do?
The <blockquote> element defines a block of text that is a direct quotation. The <quote> element should be used when a quotation is presented inline with the surrounding text, but when the quotation is presented as a separate paragraph, <blockquote> is the appropriate element to use to identify the quotation.
Display
block
Usage
semantic | textual

Contents

  • 1 Code Example
  • 2 Styling Blockquotes
  • 3 Using <cite> with <blockquote>
  • 4 The <q> element
  • 5 Browser Support for blockquote

Code Example

When quoting more than a few words in your document, you should use a <code>&lt;blockquote&gt;</code> to set the quoted text off from the surrounding text.<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae.</blockquote>

When quoting more than a few words in your document, you should use a <blockquote> to set the quoted text off from the surrounding text.

(Video) HTML Tutorial - 11: The Blockquote and Quote Tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae.

Styling Blockquotes

How you style <blockquotes> depends on your specific site design, but there are a handful of things that have become fairly common practice. You don’t have to follow them, but you might find that it is helpful to do so. The most common practice for <blockquote> styling is indentation via CSS margin. This is usually done just on the left side. In fully-justified text, though, it can be helpful to place margins on both sides of the quote.

.justified { text-align: justify; } blockquote { margin: 0 50px; } 
<div class="justified"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus felis eget tempor lobortis. Nunc iaculis lacus risus, a molestie libero facilisis sit amet. Proin vitae diam non leo commodo ullamcorper euismod vel lacus. Morbi iaculis tincidunt enim. Nunc semper facilisis elit, quis pulvinar sem efficitur sit amet.</p> <blockquote> Fusce vestibulum molestie ultricies. Quisque non eros nec leo elementum elementum. Etiam non fermentum leo, in mollis urna. Quisque quis tortor tempus, sollicitudin turpis et, tempus enim. </blockquote> <p> Proin sed tincidunt urna, et auctor mauris. Vestibulum gravida tellus sit amet interdum ultrices. Nulla suscipit odio ut est efficitur sollicitudin.</p> </div> 

#justify-bq{ text-align: justify; } #justify-bq blockquote { margin: 0 50px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus felis eget tempor lobortis. Nunc iaculis lacus risus, a molestie libero facilisis sit amet. Proin vitae diam non leo commodo ullamcorper euismod vel lacus. Morbi iaculis tincidunt enim. Nunc semper facilisis elit, quis pulvinar sem efficitur sit amet.

Fusce vestibulum molestie ultricies. Quisque non eros nec leo elementum elementum. Etiam non fermentum leo, in mollis urna. Quisque quis tortor tempus, sollicitudin turpis et, tempus enim.

Proin sed tincidunt urna, et auctor mauris. Vestibulum gravida tellus sit amet interdum ultrices. Nulla suscipit odio ut est efficitur sollicitudin.

(Video) HTML blockquote Element Tutorial

The other very common styling pattern is to place a vertical line or border along the left edge of the blockquote. This is usually done in alignment with the edge of the surrounding text, which requires using padding in place of margin to achieve proper indentation. (CSS borders go inside of margin and outside of padding.) You may also want to set the left margin to 0 to override the default margin. This works well whether or not the text is justified.

blockquote { padding: 0 50px; margin-left: 0; border-left: 2px solid gray; } 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus felis eget tempor lobortis. Nunc iaculis lacus risus, a molestie libero facilisis sit amet. Proin vitae diam non leo commodo ullamcorper euismod vel lacus. Morbi iaculis tincidunt enim. Nunc semper facilisis elit, quis pulvinar sem efficitur sit amet.</p> <blockquote> Fusce vestibulum molestie ultricies. Quisque non eros nec leo elementum elementum. Etiam non fermentum leo, in mollis urna. Quisque quis tortor tempus, sollicitudin turpis et, tempus enim. </blockquote> <p> Proin sed tincidunt urna, et auctor mauris. Vestibulum gravida tellus sit amet interdum ultrices. Nulla suscipit odio ut est efficitur sollicitudin.</p> 

#border-blockquote { padding: 0 50px; margin-left: 0; border-left: 2px solid gray; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus felis eget tempor lobortis. Nunc iaculis lacus risus, a molestie libero facilisis sit amet. Proin vitae diam non leo commodo ullamcorper euismod vel lacus. Morbi iaculis tincidunt enim. Nunc semper facilisis elit, quis pulvinar sem efficitur sit amet.

Fusce vestibulum molestie ultricies. Quisque non eros nec leo elementum elementum. Etiam non fermentum leo, in mollis urna. Quisque quis tortor tempus, sollicitudin turpis et, tempus enim.

Proin sed tincidunt urna, et auctor mauris. Vestibulum gravida tellus sit amet interdum ultrices. Nulla suscipit odio ut est efficitur sollicitudin.

(Video) "HTML" for Beginners/Non-porgrammers - blockquote tag, q tag, cite tag

Using <cite> with <blockquote>

Some people recommend using the <cite> element to identify the source of a quote.

<blockquote> You should use the <cite> element to identify the source of a quote. —<cite>Some People</cite> </blockquote> 

However, this is not allowed according to the HTML5 standard. There is some contention about what exactly the <cite> element should contain, but both the W3C and WHATWG agree that this is not how the element should be used. The <cite> element should be used to identify the title of a work, not its author or the source of an arbitrary quote.

<blockquote> The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.) —<cite><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-cite-element">HTML Living Standard</a></cite>, Web Hypertext Application Technology Working Group </blockquote> 

The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. A person’s name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people’s names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.) —HTML Living Standard, Web Hypertext Application Technology Working Group

While the W3C’s recommendation for HTML5 said that the <cite> element could include an author’s name (along with the title), it is best to follow the WHATWG standard and use it only for the title of the work.

(Video) Blockquote tag - html 5 tutorial in hindi - urdu - Class - 19

The <q> element

Almost everyone knows and used the <blockquote> element, but very few composers of HTML documents know about or use the <q> element, which represents a inline quote. Since quote punctuation marks are actually different in different regions, you may want to consider using <q> as an alternative to typographical quote marks.

<blockquote> HTML Tag » (1)

Adam Wood

(Video) Learn HTML code: blockquote

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for blockquote

FAQs

What is blockquote tag in HTML? ›

The <blockquote> tag in HTML is used to display the long quotations (a section that is quoted from another source). It changes the alignment to make it unique from others. It contains both opening and closing tags. In blockquote tag, we can use elements like heading, list, paragraph, etc.

How do you format a block quote in HTML? ›

The <blockquote> tag is placed within the <body> tag. You can use the margin-right and/or margin-left properties, or the margin shorthand property to change indentation applied to the quoted text. For short quotes in a document, use the <q> tag.

What is the meaning of blockquote? ›

Blockquote definition

Filters. (Internet) A lengthy quotation that is formatted so as to be set off from the main text on a webpage, as by italicization and indentation.

How do you write a block quote? ›

Basics
  1. Block quotations start on their own line.
  2. The entire block quotation is indented 0.5 inches, the same as the indentation for a new paragraph, and is double spaced.
  3. Block quotations are not surrounded by any quotation marks.
  4. The punctuation at the end of the block quotation goes before the citation.

How do I block text in HTML? ›

  1. <canvas>
  2. <caption>
  3. <center>
  4. <cite>
  5. <code>
  6. <col>
  7. <colgroup>
  8. <content>
Feb 18, 2022

What is quote HTML? ›

The HTML Quotations is used to create quotation in HTML. The HTML <q> tag is used to define a short quotation. It is a block-level element and HTML <blockquote> tag is used to define a section that is quoted from another source. It is also a block-level element.

How do you quote a sentence in HTML? ›

The HTML <q> tag defines a short quotation. Browsers normally insert quotation marks around the quotation.

How many block quotes can I use? ›

How many block quotes can I unsuspiciously fit into one research paper? quote a poem, it takes up a bunch of room. depending on paper length, the ration should could be 1 block quote per page, if over 5 pages. MLA says two, but you know...

How long is a block quote? ›

The block quote is used for direct quotations that are longer than four lines of prose, or longer than three lines of poetry. A block quote is always used when quoting dialogue between characters, as in a play.

How do you quote more than 4 lines? ›

Long quotations

For quotations that are more than four lines of prose or three lines of verse, place quotations in a free-standing block of text and omit quotation marks. Start the quotation on a new line, with the entire quote indented 1/2 inch from the left margin while maintaining double-spacing.

What is quote in HTML? ›

The HTML Quotations is used to create quotation in HTML. The HTML <q> tag is used to define a short quotation. It is a block-level element and HTML <blockquote> tag is used to define a section that is quoted from another source. It is also a block-level element.

How do you define a document's body? ›

Definition and Usage

The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Note: There can only be one <body> element in an HTML document.

What means HR in HTML? ›

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Videos

1. Blockquote and q tag in HTML
(Slide Hunt)
2. Blockquote in HTML | BLOCKQUOTE vs Q tag
(Amit Thinks)
3. Lesson 14 HTML5 Blockquote & Quote & Cite Tags
(Fathi Khalfi)
4. HTML Tutorial no 11-The Blockquote and Quote Tags
(N&N Education)
5. Blockquote Tag in html | HTML basics lesson-25 | Blockquote Tag and cite attribute in html in hindi
(Computer Gyan Guruji)
6. HTML dərsləri | "blockquote" elementi | "cite" atributu
(Ali Huseynli)

Top Articles

Latest Posts

Article information

Author: Geoffrey Lueilwitz

Last Updated: 10/13/2022

Views: 5468

Rating: 5 / 5 (60 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Geoffrey Lueilwitz

Birthday: 1997-03-23

Address: 74183 Thomas Course, Port Micheal, OK 55446-1529

Phone: +13408645881558

Job: Global Representative

Hobby: Sailing, Vehicle restoration, Rowing, Ghost hunting, Scrapbooking, Rugby, Board sports

Introduction: My name is Geoffrey Lueilwitz, I am a zealous, encouraging, sparkling, enchanting, graceful, faithful, nice person who loves writing and wants to share my knowledge and understanding with you.