Цитаты в веб-статье: как оформить длинный фрагмент и указать источник

Цитата в веб-статье должна одновременно точно передавать чужие слова, отделяться от авторского текста и показывать читателю, откуда она взята. Для длинного фрагмента используют отдельный блок, для короткой фразы внутри предложения — строчную цитату. В этой инструкции разберём HTML-разметку, подпись автора и произведения, ссылку на первоисточник и оформление, которое остаётся понятным без цвета и курсивного шрифта.

Цитата уместна, когда важна точная формулировка: например, в статье о редактуре нужно разобрать конкретное предложение, эксперт сформулировал позицию необычно точно, а документ устанавливает условие, которое нельзя пересказать без потери смысла. Если ценность только в факте, обычно проще изложить его своими словами и дать ссылку на источник. Так читатель быстрее поймёт мысль, а страница не превратится в подборку чужого текста.

До вёрстки проверьте три вещи: слова воспроизведены точно, цитата не меняет смысл исходного фрагмента, а объём нужен для аргумента. Контекст вокруг цитаты должен объяснять, зачем она здесь. Если фрагмент выглядит как самостоятельная карточка и после него авторский текст не продолжает мысль, возможно, цитата служит декором, а не доказательством.

Не смешивайте выделенную цитату с рекламной фразой, отзывом или репликой диалога. Отзыв может быть оформлен карточкой и иметь отдельную атрибуцию, а реплики разговора обычно лучше оставить в структуре диалога. Элемент `<blockquote>` обозначает именно цитируемый из другого источника блок, а не любой текст, который дизайнер хочет визуально отодвинуть.

Для короткого фрагмента без разрыва абзаца HTML предлагает `<q>`. Например: «Редактор назвал этот вариант <q>коротким и ясным</q>, поэтому команда оставила его в заголовке». Браузер может добавить кавычки автоматически. Не вставляйте кавычки одновременно в текст и через CSS, иначе пользователь увидит двойную пару; проверьте результат в браузерах и не полагайтесь на оформление конкретной операционной системы.

Для цитаты, которая занимает отдельный абзац или состоит из нескольких абзацев, применяют `<blockquote>`. Внутри можно сохранить исходную структуру: абзацы, список или другие подходящие элементы. Не оборачивайте весь текст в один `<p>`, если источник содержит отдельные абзацы и это деление важно для понимания. Визуальный отступ — лишь стандартное оформление браузера, его можно изменить CSS.

<p>В письме редактора есть точное определение: <q>текст должен вести читателя к следующему шагу</q>.</p>

<blockquote cite="https://example.org/editorial-principles">
  <p>Хорошая инструкция помогает выполнить действие без догадок.</p>
  <p>Каждый шаг должен объяснять, что сделать и как проверить результат.</p>
</blockquote>

Адрес в `cite` связывает блок с исходным документом на уровне разметки, но сам по себе не даёт читателю видимой ссылки. Поэтому если происхождение цитаты важно, рядом нужна текстовая атрибуция и доступный переход к источнику. HTML Standard описывает `<blockquote>` как фрагмент, процитированный из другого источника; MDN отдельно поясняет назначение атрибута `cite` и `<cite>`.

Подпись должна позволять понять, кто говорит и из какого материала взяты слова. Эти сведения не нужно прятать в `title`, комментарий кода или только в атрибут `cite`: они должны быть видны на странице. Для книги полезны автор и название, для интервью — имя собеседника и название публикации, для документа — организация, название и дата или номер раздела, если это помогает найти место.

Атрибуцию ставят рядом с цитатой, обычно после неё. В HTML спецификация требует размещать атрибуцию вне `<blockquote>`, потому что имя источника не входит в процитированные слова. Если подпись тесно связана именно с цитатой, её удобно объединить с ней в `<figure>` и `<figcaption>`:

<figure class="article-quote">
  <blockquote cite="https://example.org/book/chapter-2">
    <p>Внимание читателя ограничено; ясность начинается с выбора главного.</p>
  </blockquote>
  <figcaption>
    Мария Петрова, <cite><a href="https://example.org/book">«Редакторская практика»</a></cite>, глава 2
  </figcaption>
</figure>

Элемент `<cite>` предназначен для названия произведения — например, книги, статьи, фильма или страницы сайта. Он не является универсальным тегом для имени человека. Имя автора в примере остаётся обычным текстом, а название книги выделено `<cite>`. Оформление тега курсивом по умолчанию — браузерный стиль, а не его смысл; если курсив мешает дизайну, задайте его через CSS.

Сделайте названием источника ссылку, если читателю полезно открыть оригинал. Анкор должен сообщать, куда ведёт переход: «статья о редакторских принципах» информативнее, чем «источник» или «здесь». Для печатной книги ссылка не нужна; укажите библиографические данные так, чтобы книгу можно было найти. Если URL длинный или временный, не выводите его целиком рядом с цитатой без необходимости.

Скопируйте цитату из первоисточника, затем сверяйте её после правок и перед публикацией. Особенно легко исказить отрицание, дату, единицу измерения или оговорку: предложение может остаться грамматически гладким, но поменять позицию автора. Не исправляйте внутри цитаты опечатки молча. Если точность важна, сохраните оригинал и кратко поясните редакционное вмешательство; принципы юридически значимого цитирования зависят от юрисдикции и задачи, поэтому для спорного случая нужна профильная консультация.

Когда часть текста пропущена, обозначьте пропуск принятым в редакции способом и убедитесь, что он не удаляет условие, которое меняет значение. Если внутрь цитаты добавлено пояснение, отделите его квадратными скобками или другим ясно оговорённым способом. Не переписывайте лицо, время или термин так, будто это исходные слова. Для одного-двух замен часто лучше дать пояснение после цитаты.

Фрагмент должен быть достаточным для понимания, но не больше, чем нужно. Длинная цитата замедляет чтение и оттесняет собственный разбор автора статьи. Перед включением задайте себе вопрос: какие конкретные слова читатель не сможет проверить или понять без полного фрагмента? Сохраните именно их, а остальное перескажите и свяжите с источником. Это одновременно помогает читателю и делает авторский вклад заметным.

Визуально выделяйте цитату несколькими независимыми признаками: отступом, тонкой вертикальной линией, фоном умеренного контраста или изменением размера. Не рассчитывайте только на цвет — он может быть плохо различим, исчезнуть при печати или в пользовательской теме. Не увеличивайте цитату настолько, чтобы она стала похожа на заголовок, и не уменьшайте подпись до неразборчивого кегля.

Кавычки можно показать графически, но не добавляйте их декоративно, если в самом цитируемом материале уже есть вложенная пара и читателю трудно определить начало внешней цитаты. В русском тексте стандартные кавычки внутри цитаты можно сохранить как в источнике. Когда редакционные правила требуют адаптации, придерживайтесь их последовательно и не меняйте смысл.

На узком экране проверьте длину строк, отступ подписи и то, что цитата не выглядит отдельным рекламным блоком. Если в цитате есть очень длинная ссылка или идентификатор, убедитесь, что контейнер не расширяет страницу. Для обычной прозы применяйте переносы осторожно: автоматический перенос, принудительный разрыв и горизонтальная прокрутка решают разные задачи. Не вставляйте ручные `<br>` в каждую строку, если это не часть оригинальной поэзии.

**Использовать `<blockquote>` для любого акцентного текста.** Так теряется смысл разметки: подсказка редактора или рекламный слоган не становится цитатой только из-за отступа. Для стилистического контейнера подойдёт нейтральный `<div>` или тематический компонент.

**Оставить только `cite="..."`.** Атрибут не заменяет видимую подпись и ссылку. Посетитель должен иметь возможность понять происхождение фрагмента, даже если не открывает исходный HTML.

**Поместить атрибуцию внутрь цитаты.** Имя автора и название источника не являются словами цитируемого фрагмента. Разместите подпись после блока, а для тесной связи используйте `<figure>` и `<figcaption>`.

**Считать `<cite>` тегом имени автора.** По смыслу он обозначает название произведения. Имя человека укажите рядом обычным текстом или отдельной ссылкой на профиль, если такой переход уместен.

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

**Выделить цитату только курсивом или цветом.** Семантическая структура и контраст должны сообщать о цитировании без зависимости от одного визуального эффекта. Проверяйте блок в режиме высокой контрастности и после отключения пользовательских стилей.

Элемент сообщает браузеру и вспомогательным технологиям, что содержимое является отдельной цитатой; он не обязан добавлять печатные кавычки. Решение зависит от редакционного стиля и того, как блок визуально отделён. Проверьте также, не появляются ли кавычки одновременно из текста и CSS.

Атрибут `cite` хранит адрес источника у элемента цитаты. HTML-элемент `<cite>` отмечает название произведения, например книги или статьи. Для читателя URL атрибута не заменяет видимую ссылку, а имя автора не следует помещать в `<cite>` только потому, что это атрибуция.

Разметка всё ещё обозначает фрагмент, процитированный из другого источника, но отсутствие атрибуции может оставить читателя без способа проверить его происхождение. Если источник не установлен, не выдавайте фрагмент за дословную цитату; перескажите мысль как свою интерпретацию и укажите, что известно о происхождении.

Автор может быть обычным текстом в подписи, название книги — внутри `<cite>`, а при наличии полезного URL название можно заключить в ссылку. Если подпись относится к блоку целиком, сгруппируйте `<blockquote>` и `<figcaption>` внутри `<figure>`.

Подойдёт, если вы действительно воспроизводите дословные слова клиента из отдельного источника. Тогда укажите автора отзыва и, если это возможно и уместно, площадку или ссылку. Если карточка содержит рекламный пересказ или агрегированную оценку, используйте обычную структуру карточки, а не семантику цитаты.

Для короткой цитаты без отдельного абзаца используйте `<q>`. Визуальные кавычки браузер может добавить автоматически, поэтому избегайте дублирования кавычек в разметке и CSS. Атрибуцию можно встроить в окружающее предложение или дать рядом ссылку на источник.

Хорошо оформленная цитата показывает, где заканчиваются слова автора статьи и начинаются слова источника, а подпись помогает восстановить происхождение фрагмента. Выбирайте `<q>` или `<blockquote>` по структуре текста, добавляйте видимую атрибуцию и проверяйте, что оформление не подменяет смысл. Если для примера нужен особый почерк, его можно создать в Fontgenerator и проверить на коротких фразах до публикации.