HTML предоставляет два тега для вставки цитат в текст: <q> для встроенных цитат и <blockquote> для отдельных цитат.

Давайте подробно рассмотрим, как использовать каждый из них.

Тег <q> - Встроенная цитата

Тег <q> используется для обозначения встроенных цитат внутри текста. Этот тег подходит для коротких цитат, которые не требуют выделения в отдельный блок.

<p>Билл Гейтс сказал: <q>Люди часто переоценивают, что они могут сделать за один год, и недооценивают, что они могут сделать за десять лет.</q></p>

Этот код создает следующий вывод:

Билл Гейтс сказал: "Люди часто переоценивают, что они могут сделать за один год, и недооценивают, что они могут сделать за десять лет."

Тег <blockquote> - Отдельная цитата

Тег <blockquote> используется для выделения цитат, которые могут занимать несколько абзацев или быть отдельным блоком текста.

<blockquote>
 <p>Марк Твен сказал:</p>
 <p>Две самые важные даты в вашей жизни - день, когда вы родились, и день, когда вы поняли, зачем.</p>
</blockquote>

Атрибуты cite и class

Оба тега могут использовать атрибут cite, который указывает на источник цитаты. Также, можно добавлять классы для стилизации с использованием CSS.

<blockquote cite="https://www.example.com/quote" class="styled-quote">
 <p>Цитата из внешнего источника.</p>
</blockquote>

Сочетание тегов <q> и <blockquote>

Иногда, встроенные цитаты могут быть частью отдельных цитат. Пример:

<blockquote>
 <p>Джон сказал: <q>Жизнь - это то, что происходит, пока ты занят делами.</q></p>
</blockquote>

Заключение

Использование тегов <q> и <blockquote> помогает ясно представить цитаты в вашем HTML-коде. Выбирайте между ними в зависимости от контекста и длины цитаты. Эти теги являются важными инструментами для создания читаемого и структурированного контента на ваших веб-страницах.