3.4 Blockquotes | HTML

3.4 Blockquotes
Table of Contents

The <blockquote> element in HTML is used to define a section that is quoted from another source. It is typically used for longer quotations that are set off from the main text.

Basic Usage of <blockquote>

The <blockquote> element is used to indicate a block of text that is a quotation. By default, browsers often display blockquotes with some indentation.

Basic Syntax:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blockquote Example</title>
</head>
<body>
    <blockquote>
        "The only limit to our realization of tomorrow is our doubts of today."
        - Franklin D. Roosevelt
    </blockquote>
</body>
</html>

In this example, the quotation is placed within a <blockquote> element.

Using the cite Attribute

The cite attribute can be used to provide a URL that indicates the source of the quotation.

Example with cite Attribute:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blockquote with Cite Example</title>
</head>
<body>
    <blockquote cite="https://www.goodreads.com/quotes/945-the-only-limit-to-our-realization-of-tomorrow-is-our">
        "The only limit to our realization of tomorrow is our doubts of today."
        - Franklin D. Roosevelt
    </blockquote>
</body>
</html>

In this example, the cite attribute provides the URL of the source of the quotation.

Nesting Blockquotes

You can nest blockquotes within each other if the quotation itself contains another quotation.

Example of Nested Blockquotes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nested Blockquote Example</title>
</head>
<body>
    <blockquote>
        "Outer quote.
        <blockquote>
            "Inner quote."
        </blockquote>
        End of outer quote."
    </blockquote>
</body>
</html>

In this example, the inner quotation is nested inside the outer blockquote.

Styling Blockquotes with CSS

You can style blockquotes with CSS to better match your website's design.

Example of Styled Blockquote:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Blockquote Example</title>
    <style>
        blockquote {
            font-style: italic;
            color: #555;
            border-left: 4px solid #ccc;
            padding-left: 10px;
            margin-left: 0;
            margin-right: 0;
        }
    </style>
</head>
<body>
    <blockquote>
        "The only limit to our realization of tomorrow is our doubts of today."
        - Franklin D. Roosevelt
    </blockquote>
</body>
</html>

    • font-style: Sets the font style to italic.

    • color: Changes the text color.

    • border-left: Adds a left border to the blockquote.

    • padding-left: Adds padding to the left side.

    • margin-left and margin-right: Adjusts the margins.

Blockquotes with Citations

You can include a citation within the blockquote to reference the source directly within the content.

Example with Citation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blockquote with Citation Example</title>
</head>
<body>
    <blockquote>
        "The only limit to our realization of tomorrow is our doubts of today."
        <cite>- Franklin D. Roosevelt</cite>
    </blockquote>
</body>
</html>

In this example, the <cite> element is used to reference the author of the quote directly within the blockquote.

Summary

The <blockquote> element is used to define sections of text that are quoted from another source. It provides a clear visual distinction for quotations and can include the cite attribute for the source URL.

Blockquotes can be styled with CSS to fit the design of your website a

To learn more about HTML, click here: HTML

nd can be nested for complex quotations. Using blockquotes correctly enhances the readability and professionalism of your web content.

To learn more about HTML, click here: HTML

I am a passionate writer. Read more.

Post a Comment

Don't spam links or promote stuff in the comments. It's annoying and lowers the conversation quality. Contribute respectfully and helpfully instead.