HTML-тег <blockquote>

HTML-тег <blockquote> используется для обозначения фрагмента, цитируемого из другого источника. Обычно он отображается с отступом, чтобы отличить его от окружающего содержимого.

Тег <blockquote> является семантическим элементом, то есть он предоставляет информацию о типе содержащегося в нем контента, что улучшает доступность и SEO.

Атрибуты HTML-тега <blockquote>

  • cite: Указывает источник цитаты. Значение должно быть URL-адресом, указывающим на первоисточник.

Базовый пример HTML-тега <blockquote>

Вот пример использования тега <blockquote> : 

<!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>
Базовый пример HTML-блокцитаты Тег

По умолчанию большинство браузеров отображают тег <blockquote> с отступами, что делает его визуально различимым.

Пример с атрибутом Cite

Атрибут cite позволяет указать источник цитаты: 

<!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>
Пример цитаты с атрибутом Cite

Примечание: атрибут cite не отображается по умолчанию, но предоставляет метаданные, которые могут быть полезны для браузеров, вспомогательных технологий или разработчиков.

Стилизация тега <blockquote>

Вы можете стилизовать тег <blockquote> с помощью CSS, чтобы настроить его внешний вид: 

<!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>
Оформление цитаты Тег

Пример использования вложенных цитат

При цитировании нескольких уровней источников можно вкладывать цитаты друг в друга: 

<!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>
Пример использования вложенных цитат

Результат: вложенная цитата имеет больший отступ, визуально отображая иерархию цитат.