☰
In this tutorial, we will learn about HTML Quotations.
Quoting text on a web page is a common practice when you want to include excerpts from external sources, emphasize specific statements, or add attribution to your content.
HTML provides several elements and attributes that enable you to incorporate quotations effectively.
In this tutorial, we'll explore the various ways you can use HTML to format and display quotations on your web pages.
The <blockquote> element is the primary HTML tag used for presenting block-level quotations.
Block-level elements create a new "block" or section in the content, typically with line breaks before and after the quoted text.
Here's how you use the <blockquote> element:
<blockquote> This is an example of a block-level quotation.
It creates a separate block of text. </blockquote>
By default, browsers often render block-level quotations with indentation and/or other styles to distinguish them from the rest of the text on the page.
To provide a source or citation for the quoted text, you can use the cite attribute within the <blockquote> element.
This attribute specifies the URL of the source document where the quotation was taken from.
It's a way to give proper credit and context to your quotes:
<blockquote cite="https://www.example.com/article">
This is a quoted text with a source citation.</blockquote>
Including the cite attribute is not mandatory, but it is considered good practice and can enhance the credibility of your web content.
The <q> element is used for inline or short quotations.
Unlike the <blockquote> element, it doesn't create a separate block for the quoted text. Instead, it wraps the quotation within double quotation marks and is typically used within a paragraph or sentence:
<p>He said, <q>This is an inline quotation.
</q> And then continued with his statement.</p>
The <q> element also supports the cite attribute for providing a source URL, just like the <blockquote> element.
In some cases, you might need to include quotations within quotations.
HTML allows you to nest quotation elements to represent this hierarchical structure:
<blockquote> This is the main quotation.
<blockquote> This is a nested quotation
within the main quotation. </blockquote> </blockquote>
By nesting <blockquote> elements, you can clearly indicate which part of the content belongs to which source.
While HTML provides the structural elements for quotations, CSS (Cascading Style Sheets) allows you to control the visual presentation of quoted text. You can define custom styles for <blockquote> and <q> elements using CSS properties like margin, padding, and font-style.
For example, you can create custom styles for <blockquote> elements to change the default indentation:
blockquote { margin-left: 40px; }
And for <q> elements, you can adjust the quotation marks:
q::before, q::after { content: '"'; }
HTML offers a range of elements and attributes to handle quotations, from simple inline quotes using the <q> element to more complex block-level quotations with the <blockquote> element. Using these elements correctly not only enhances the visual presentation of your content but also adds credibility and context to your quotes. When combined with CSS for styling, you can create web pages that effectively communicate your message while giving proper credit to external sources.
© 2022-2023 All rights reserved.