Цитаты HTML

Вы уже отмечали важность и акцент тегами форматирования. Цитаты — другое дело: вы повторяете чужие слова (или отрывок из произведения), и HTML должен сказать об этом ясно. Специальные элементы цитаты помогают браузерам, вспомогательным технологиям и читателям отличать цитату от вашей окружающей прозы — чего одни декоративные кавычки полностью не передают. Когда документ помечает цитату смыслом, значение остаётся устойчивым, даже если позже CSS изменит внешний вид. Это занятие связывает уже знакомое форматирование с новой ролью: указать голос и источник текста, который принадлежит не только вам.

Что считается цитатой в HTML?

Цитата — это текст, который вы представляете как сказанный другим говорящим, автором или источником. Это может быть короткая фраза внутри вашего предложения или более длинный отрывок, выделенный отдельным блоком. HTML даёт q для короткого строчного случая и blockquote для более длинного блочного. Дополнительные средства помогают с источниками: элемент cite для видимого названия произведения и атрибут cite на blockquote для машиночитаемого URL источника. Сначала решите, цитата строчная или блочная; затем — как дать кредит людям и инструментам.

Прямой ответ

Используйте q для короткой цитаты внутри предложения. Используйте blockquote для более длинного цитируемого раздела, который стоит сам по себе. Назовите произведение или статью элементом cite в видимом тексте, когда это помогает читателям. На blockquote можно также задать cite="https://…" с URL источника — этот URL для машин и обычно сам по себе не показывается как читаемое название. Если нужны только типографские кавычки без смысла цитаты, это оформление; если вы действительно цитируете кого-то, отметьте роль в HTML.

Инструменты цитаты одним взглядом

Короткие строчные цитаты с q

Когда цитируемые слова стоят внутри вашего собственного предложения, оберните их в q. Большинство браузеров сами добавляют кавычки. Вы всё равно пишете произнесённые или написанные слова между тегами; обычно не нужно вручную набирать декоративные «кавычки-ёлочки». Держите q узким: только цитируемая фраза, не окружающее повествование. Если цитата разрастается до нескольких предложений или ей нужно отдельное место на странице, переходите к blockquote, а не раздувайте гигантский q.

Разбор примера

• Внешний p — ваше повествование
• q оборачивает только цитируемую фразу
• Закрытие q возвращает остаток предложения к обычной прозе
• Если бы это был длинный многофразовый отрывок, лучше подошёл бы blockquote
• Смысл цитаты живёт в элементе, а не только в кавычках, которые браузер может нарисовать

Более длинные отрывки с blockquote

Используйте blockquote, когда цитата достаточно длинна, чтобы стоять отдельным блоком — часто один или несколько абзацев. Поместите цитируемое содержимое внутрь blockquote. Атрибут cite может хранить URL источника. Читаемое человеком название произведения дайте видимым текстом через элемент cite, обычно рядом с цитатой. Часто внутри blockquote вкладывают один или несколько p, чтобы структура оставалась ясной. Не используйте blockquote лишь ради отступа; отступ — это оформление, и CSS справляется с ним лучше, чем ложный цитатный блок.

Почему одного атрибута cite недостаточно

Атрибут cite помогает инструментам узнать URL источника. Многие посетители никогда не видят значения атрибутов. Дайте людям также читаемую строку кредита. Думайте об атрибуте как о метаданных источника, а об элементе cite — как о кредите, который читатель реально видит на странице. Две роли дополняют друг друга: URL для машин, видимое название для людей.

Выбор q против blockquote

Задайте два вопроса: Насколько длинна цитата? Прерывает ли она предложение или стоит отдельно?

• Короткая фраза внутри вашего предложения → q
• Более длинный отрывок отдельным блоком → blockquote
• Название книги, статьи или сайта в текущем тексте → элемент cite
• URL источника для блочной цитаты → атрибут cite на blockquote
  Не оборачивайте целую страницу в один гигантский blockquote только ради отступа. Отступ — оформление; blockquote — для настоящих цитат. Если сомневаетесь, прочитайте страницу вслух: если цитата звучит как короткий вставной фрагмент внутри вашей фразы, берите q; если как отдельный цитируемый блок — blockquote.

Смысл против кавычек только из CSS

Можно имитировать кавычки CSS или набранными символами ". Для настоящей цитаты предпочитайте q или blockquote, чтобы документ отметил смысл. Визуальные знаки всё равно могут появиться — браузеры часто стилизуют q кавычками — но элемент несёт роль даже если таблица стилей позже изменит вид. Одни типографские кавычки говорят глазу «это похоже на цитату»; q и blockquote говорят документу «это цитата». Разница важна для программ чтения с экрана, извлекателей содержимого и будущих смен дизайна.

Практика в редакторе

1. Напишите абзац с одной короткой цитатой q от воображаемого тренера или учителя.
2. Добавьте blockquote с двумя короткими предложениями из воображаемой статьи.
3. Ниже добавьте строку с cite, называющую заголовок статьи.
4. По желанию задайте cite="https://example.com/article" на blockquote.
5. Сохраните и откройте страницу. Проверьте, что строчная и блочная цитаты выглядят по-разному.
6. Временно замените q обычным текстом и только набранными кавычками, затем верните q — заметьте, чем роль разметки отличается от одной лишь декорации.
   Это короткое упражнение тренирует выбор элементов и кредит источника вместе — тот же шаблон, что вы будете использовать на реальных страницах.

Ошибки, которые размывают цитаты

• Оборачивание всей страницы в один гигантский blockquote без настоящей цитаты
• Использование только CSS или набранных кавычек, когда текст действительно цитируется и должен использовать q / blockquote
• Помещение единственного названия источника в атрибут cite с расчётом, что читатели его увидят
• Вложение blockquote внутрь q без ясной причины
• Цитирование самого себя ради декорации — берегите эти элементы для реально цитируемых слов
• Забывание закрыть q или blockquote, из‑за чего следующий текст остаётся помеченным как цитата
• Смешивание длинного повествования внутри q вместо ограничения элемента цитируемыми словами

Кратко

• Короткие цитаты внутри предложения → q
• Более длинные цитируемые блоки → blockquote
• Видимые названия произведений → элемент cite
• Необязательный URL источника → атрибут cite на blockquote
• Отмечайте настоящие цитаты в HTML; не полагайтесь только на стиль для смысла
• Будьте честны: используйте элементы, когда действительно цитируете источник
• Дайте людям читаемый кредит и, когда полезно, URL источника инструментам