Categories
Learn HTML

HTML: blockquote tag

HTML: <blockquote> tag

In this series of learning HTML, we will teach you how to use HTML blockquote tag with proper syntax and lots of examples. Let’s start on the HTML blockquote tag.

Description of HTML blockquote tag

The HTML “blockquote” tag is used to indicate a section of quoted content from another source within a document. The “blockquote” tag is used to visually distinguish the quoted content from the surrounding text, and it is typically used in conjunction with the “cite” attribute to provide the source of the quote.

Here is an example of how to use the “blockquote” tag in HTML:

<blockquote>
<p>The only way to do great work is to love what you do.</p>
<cite>Steve Jobs</cite>
</blockquote>

In the example above, a “blockquote” element is used to enclose the quoted content, which consists of a “p” element containing the quote itself and a “cite” element indicating the author of the quote. The “blockquote” element is styled differently from the surrounding text to visually distinguish the quoted content.

The “blockquote” tag can also be used to indicate nested quotes or multiple levels of quoting. For example:

<blockquote>
<p>The only way to do great work is to love what you do.</p>
<cite>Steve Jobs</cite>

<blockquote>
<p>Success is not final, failure is not fatal: it is the courage to continue that counts.</p>
<cite>Winston Churchill</cite>
</blockquote>
</blockquote>

In the example above, a nested “blockquote” element is used to enclose a second quote within the first quote. This approach can be used to indicate multiple levels of quoting within a document.

Overall, the “blockquote” tag is useful for indicating quoted content within a document and can be used to improve the readability and organization of content, particularly in longer documents or articles.

 

Syntax of HTML blockquote tag

The HTML <blockquote> tag is used to indicate a block of quoted content from another source. The syntax of the <blockquote> tag is as follows:

<blockquote>
<!-- quoted content goes here -->
</blockquote>

Here, the opening tag <blockquote> is used to indicate the start of the quoted content, and the closing tag </blockquote> is used to indicate the end of the quoted content.

The cite attribute can be used to specify the source of the quoted content, such as a URL or a book title. However, it is not required, and can be omitted if the source is unknown or not important.

Example:

<blockquote>
"Be the change you wish to see in the world."
</blockquote>
<p>- Mahatma Gandhi</p>

In this example, the <blockquote> element contains a quote by Mahatma Gandhi, and the author is specified using a separate <p> element. The <blockquote> element is used to visually separate the quoted content from the rest of the page, and to indicate that it is a quote from another source.

Global Attributes

The <blockquote> tag in HTML has the following global attributes:

  1. accesskey: Specifies a shortcut key to activate the element.
  2. class: Specifies one or more class names for the element (refers to a class in a style sheet).
  3. contenteditable: Specifies whether the content of the element is editable by the user.
  4. data-*: Allows you to store custom data private to the page or application.
  5. dir: Specifies the direction of the text within the element (either “ltr” for left-to-right or “rtl” for right-to-left).
  6. hidden: Specifies that the element should be hidden.
  7. id: Specifies a unique id for the element.
  8. lang: Specifies the language of the element.
  9. style: Specifies inline CSS styles for the element.
  10. tabindex: Specifies the tab order of the element.
  11. title: Specifies extra information about the element (displayed as a tooltip).

Note that the <blockquote> tag also has specific attributes that are unique to it, such as cite, which specifies the URL of the source of the quotation, and type, which specifies the format of the quotation (e.g. HTML, XML, or plain text).

 

 

Event Attributes

The <blockquote> tag in HTML does not have any event attributes specific to it. However, like any other HTML element, it can use any of the global event attributes, which are:

  1. onblur: Triggers when the element loses focus.
  2. onclick: Triggers when the element is clicked.
  3. oncontextmenu: Triggers when the element is right-clicked or the context menu is opened.
  4. ondblclick: Triggers when the element is double-clicked.
  5. onfocus: Triggers when the element receives focus.
  6. onkeydown: Triggers when a key is pressed down while the element is in focus.
  7. onkeypress: Triggers when a key is pressed while the element is in focus.
  8. onkeyup: Triggers when a key is released while the element is in focus.
  9. onload: Triggers when the element has finished loading.
  10. onmousedown: Triggers when the element is pressed down with the mouse button.
  11. onmousemove: Triggers when the mouse pointer moves while over the element.
  12. onmouseout: Triggers when the mouse pointer leaves the element.
  13. onmouseover: Triggers when the mouse pointer enters the element.
  14. onmouseup: Triggers when the mouse button is released while over the element.
  15. onresize: Triggers when the size of the element is changed.
  16. onscroll: Triggers when the element is scrolled.
  17. onselect: Triggers when text within the element is selected.
  18. onsubmit: Triggers when a form is submitted.

These event attributes can be used to attach JavaScript functions to various actions or states of the <blockquote> element, allowing for custom behavior or interactions.

 

 

Other Attributes

The <blockquote> tag in HTML does not have any attributes other than global attributes and the specific attributes that are unique to it, such as cite and type.

The cite attribute specifies the URL of the source of the quotation, and is used to provide a reference to the original source of the content that is being quoted.

The type attribute specifies the format of the quotation, and is used to indicate whether the content being quoted is HTML, XML, or plain text.

For example, here is an example of a <blockquote> element with the cite and type attributes:

<blockquote cite="https://www.example.com/quote" type="cite">
<p>The only way to do great work is to love what you do.</p>
<footer>Steve Jobs</footer>
</blockquote>

In this example, the cite attribute specifies the URL of the source of the quote, and the type attribute specifies that the content being quoted is a citation. The <p> element contains the actual quote, and the <footer> element provides the name of the person who said it.

 

Notes on HTML blockquote tag

Here are some important notes to keep in mind when using the <blockquote> tag in HTML:

  1. The <blockquote> tag is used to indicate a block of quoted text from another source. It is typically used to format a longer quotation, and can be used in conjunction with the <cite> tag to provide a citation for the source of the quote.
  2. It is common practice to use indentation, spacing, or other visual cues to differentiate the quoted text from the rest of the document.
  3. The <blockquote> tag should not be used to format a short quote or a phrase. In these cases, the <q> tag should be used instead.
  4. The cite attribute of the <blockquote> tag should be used to provide a reference to the original source of the content being quoted. This can be a URL or other identifier that allows readers to locate the original source.
  5. The type attribute of the <blockquote> tag can be used to specify the format of the content being quoted, such as “cite” for a citation, “code” for code examples, or “blockquote” for long quotations.
  6. The <blockquote> tag can be used in conjunction with other HTML tags, such as <p> for paragraphs, <em> for emphasis, and <footer> for attribution.
  7. The <blockquote> tag can also be used to format content that is not a quote, such as lyrics, poems, or other text that requires special formatting.
  8. It is important to use the <blockquote> tag appropriately and only when necessary. Overuse of the tag can make the document difficult to read and may cause confusion for the reader.

 

 

Browser Compatibility

The HTML blockquote tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

 

Examples of HTML blockquote tag

We will discuss the <blockquote> tag below, exploring examples of how to use the <blockquote> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML blockquote tag below, with some examples of how to use the blockquote tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

HTML5 Document

Here is an example of how to use the <blockquote> tag in an HTML5 document:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Quotation Example</h1>
<blockquote>
<p>"The only way to do great work is to love what you do."</p>
<footer>Steve Jobs</footer>
</blockquote>
</body>
</html>

In this example, the <blockquote> tag is used to indicate a quote from Steve Jobs. The quote is contained within a <p> tag, and the name of the person who said it is contained within a <footer> tag.

When rendered in a web browser, the quote will be visually distinguished from the rest of the document. By default, the browser will indent the quoted text and provide space around it to make it stand out.

Note that in HTML5, the cite attribute is optional for the <blockquote> tag. If you wish to provide a citation for the source of the quote, you can do so by including the citation within the <footer> tag, as shown in the example above.

HTML 4.01 Transitional Document

Here is an example of how to use the <blockquote> tag in an HTML 4.01 Transitional document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Quotation Example</h1>
<blockquote>
<p>"The only way to do great work is to love what you do."</p>
<footer>Steve Jobs</footer>
</blockquote>
</body>
</html>

In this example, the <blockquote> tag is used in the same way as in the HTML5 example. The main difference is that the document type declaration is for HTML 4.01 Transitional instead of HTML5.

When rendered in a web browser, the quote will be visually distinguished from the rest of the document. By default, the browser will indent the quoted text and provide space around it to make it stand out.

Note that in HTML 4.01, the cite attribute is also optional for the <blockquote> tag. If you wish to provide a citation for the source of the quote, you can do so by including the citation within the <footer> tag, as shown in the example above.

 

XHTML 1.0 Transitional Document

Here is an example of how to use the <blockquote> tag in an XHTML 1.0 Transitional document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
</head>
<body>
<h1>Quotation Example</h1>
<blockquote>
<p>"The only way to do great work is to love what you do."</p>
<footer>Steve Jobs</footer>
</blockquote>
</body>
</html>

 

In this example, the <blockquote> tag is used in the same way as in the previous examples. The main difference is that the document type declaration is for XHTML 1.0 Transitional.

When rendered in a web browser, the quote will be visually distinguished from the rest of the document. By default, the browser will indent the quoted text and provide space around it to make it stand out.

Note that in XHTML 1.0 Transitional, the cite attribute is also optional for the <blockquote> tag. If you wish to provide a citation for the source of the quote, you can do so by including the citation within the <footer> tag, as shown in the example above.

 

 

XHTML 1.0 Strict Document

Here is an example of how to use the <blockquote> tag in an XHTML 1.0 Strict document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
</head>
<body>
<h1>Quotation Example</h1>
<blockquote>
<p>"The only way to do great work is to love what you do."</p>
<footer>Steve Jobs</footer>
</blockquote>
</body>
</html>

 

In this example, the <blockquote> tag is used in the same way as in the previous examples. The main difference is that the document type declaration is for XHTML 1.0 Strict.

When rendered in a web browser, the quote will be visually distinguished from the rest of the document. By default, the browser will indent the quoted text and provide space around it to make it stand out.

Note that in XHTML 1.0 Strict, the cite attribute is optional for the <blockquote> tag. If you wish to provide a citation for the source of the quote, you can do so by including the citation within the <footer> tag, as shown in the example above. However, note that in XHTML 1.0 Strict, the <footer> tag is not defined, so you may wish to use a <cite> tag instead, as it is defined in the specification.

 

 

XHTML 1.1 Document

Here is an example of how to use the <blockquote> tag in an XHTML 1.1 document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
</head>
<body>
<h1>Quotation Example</h1>
<blockquote cite="https://www.brainyquote.com/quotes/steve_jobs_416015">
<p>"The only way to do great work is to love what you do."</p>
<footer>Steve Jobs</footer>
</blockquote>
</body>
</html>

 

In this example, the <blockquote> tag is used in the same way as in the previous examples. The main difference is that the document type declaration is for XHTML 1.1.

When rendered in a web browser, the quote will be visually distinguished from the rest of the document. By default, the browser will indent the quoted text and provide space around it to make it stand out.

Note that in XHTML 1.1, the cite attribute is required for the <blockquote> tag. If you wish to provide a citation for the source of the quote, you must include the URL of the source within the cite attribute. The footer tag can also be used to provide additional information about the quote, such as the author or publication date.