HTML <blockquote> Tag

The HTML <blockquote> tag is used to define a section that is quoted from another source. It is typically displayed as indented text to distinguish it from the surrounding content.

The <blockquote> tag is a semantic element, meaning it provides information about the type of content it contains, which improves accessibility and SEO.

Attributes of HTML <blockquote> Tag

  • cite: Specifies the source of the quote. The value should be a URL pointing to the original source.

Basic Example of HTML <blockquote> Tag

Here’s an example of using the <blockquote> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Blockquote Example</h2>
        <blockquote>
            The only limit to our realization of tomorrow is our doubts of today.
        </blockquote>
    </body>
</html>
Basic Example of HTML <blockquote> Tag

By default, most browsers render the <blockquote> tag with indented margins, making it visually distinct.

Example with Cite Attribute

The cite attribute allows you to specify the source of the quote:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Blockquote with Source</h2>
        <blockquote cite="https://example.com/famous-quote">
            The greatest glory in living lies not in never falling, but in rising every time we fall.
        </blockquote>
    </body>
</html>
Example of blockquote with Cite Attribute

Note: The cite attribute is not displayed by default but provides metadata that can be useful for browsers, assistive technologies, or developers.

Styling the <blockquote> Tag

You can style the <blockquote> tag with CSS to customize its appearance:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            blockquote {
                font-style: italic;
                background-color: #f9f9f9;
                border-left: 4px solid #ccc;
                padding: 10px 20px;
                margin: 20px 0;
            }
        </style>
    </head>
    <body>
        <h2>Styled Blockquote Example</h2>
        <blockquote>
            The only way to do great work is to love what you do.
        </blockquote>
    </body>
</html>
Styling the <blockquote> Tag

Example using Nested Blockquotes

You can nest blockquotes when quoting multiple levels of sources:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Nested Blockquote Example</h2>
        <blockquote>
            A wise person once said:
            <blockquote>
                Success is not final, failure is not fatal: it is the courage to continue that counts.
            </blockquote>
        </blockquote>
    </body>
</html>
Example using Nested Blockquotes

Result: The nested blockquote is indented further, visually representing the hierarchy of quotes.