Тег cite (от английского citation, «цитирование») отмечает название творческого произведения: книги, статьи, фильма, песни, игры, картины. Тег парный, закрывающий обязателен, собственных атрибутов у него нет, работают только глобальные. Браузер выводит его курсивом, но важнее смысл: это название того, на что ссылаются или что упоминают, а не сама цитата и, по действующему стандарту, не имя автора.
Что именно прописывать в cite, допускают ли имя автора WHATWG и W3C, как указать источник рядом с blockquote и q и чем убрать курсив, если он мешает, - ответы ниже, вместе с частыми ошибками разметки HTML.
<p>Вечером я пересмотрел фильм <cite>Иван Васильевич меняет профессию</cite>.</p>В этой статье
- Тег cite в HTML: что это и что в него записывать
- Имя автора в теге cite: чем отличаются W3C и WHATWG
- Тег cite и blockquote: где указать источник цитаты
- Тег cite и q: название источника в короткой цитате
- Курсив в теге cite: как убрать и почему он не переворачивается
- Тег cite или i: какой выбрать для названия произведения
- Тег cite и ссылка на источник
- Частые ошибки с тегом cite
Тег cite в HTML: что это и что в него записывать
Тегом cite отмечают всё, у чего есть название: книгу, статью, стихотворение, песню, фильм, телепередачу, компьютерную игру, программу, картину, спектакль, выставку, судебное решение. Он нужен и когда произведение цитируют, и когда его просто упоминают: «В детстве я играл в Тетрис».
Не отмечают этим тегом сам текст цитаты (для него есть q и blockquote), обычные слова, даже похожие на название, и, по действующему стандарту, имена людей. Про имена подробно в следующем разделе.
Кавычки, которыми название обведено в тексте, находятся снаружи: они не входят в название. Верно: «Мастер и Маргарита». Неверно: «Мастер и Маргарита».
<p>Роман «<cite>Мастер и Маргарита</cite>» написал Михаил Булгаков.</p>Пример: что отметить тегом cite
Нажмите на любую запись из списка: под списком появится ответ, нужен ли ей тег cite, и почему. Для имени автора и адреса ответ зависит от того, какому стандарту следовать, об этом следующий раздел.
Имя автора в теге cite: чем отличаются W3C и WHATWG
Язык HTML описывают два документа, и о cite они говорят по-разному. Для строки с именем автора это важно.
В актуальном стандарте HTML Living Standard, который ведёт WHATWG, cite - это только название произведения. Имена людей и организаций в него нельзя: в разделе прямо сказано A person's name is not the title of a work
. Читать: раздел о cite в WHATWG.
Рекомендация W3C HTML 5.2 от допускала другое: внутри cite могло быть название произведения, имя автора (человека, группы людей или организации) или адрес (URL). Сегодня страница этой спецификации перенаправляет на актуальный стандарт WHATWG, но следы старой практики остались: в справочниках встречаются <cite>Иван Иванов</cite> и <cite>https://example.com</cite>. Читать: раздел о cite в W3C HTML 5.2.
| Что записано в cite | WHATWG, актуальный стандарт | W3C HTML 5.2, 2017 |
|---|---|---|
| Название произведения | Можно | Можно |
| Имя автора | Нельзя | Можно |
| Адрес сайта | Нельзя | Можно |
На практике держитесь действующего стандарта: в cite записывайте только название, а имя автора пишите обычным текстом рядом. Так разметка верна по обоим документам.
<p>Роман <cite>Мастер и Маргарита</cite>, автор - Михаил Булгаков.</p>Адрес источника лучше записать ссылкой, как показано в разделе про ссылку на источник ниже. Расхождение стандартов упоминает и справка MDN.
Тег cite и blockquote: где указать источник цитаты
У слова cite в HTML два значения, и их легко перепутать. Элемент cite - видимое название источника. Атрибут cite у blockquote и q - адрес источника: читателю он не показывается и нужен программам. В проверке блок с таким атрибутом получился той же высоты, что и без него, а подсказки при наведении нет. Прочитать адрес можно только скриптом, через свойство cite элемента.
Название источника находится вне blockquote: внутри должен быть только процитированный текст. Указание автора и источника цитаты называют атрибуцией. Для неё в стандарте показана связка figure и figcaption: цитата в blockquote, а название источника в cite - в figcaption. Читать: раздел о blockquote в WHATWG.
<figure>
<blockquote cite="https://example.com/a">
<p>Лишний div - лишний шум.</p>
</blockquote>
<figcaption>Из статьи <cite>Простая вёрстка</cite></figcaption>
</figure>Внутри blockquote cite допустим только тогда, когда название упомянуто в самой цитате: тогда оно часть процитированного текста, а не указание источника.
Пример: куда записать источник
Кнопки переключают способ записи. В блоке «Запись в файле» видна разметка, в блоке «Что видит читатель» - результат. Ниже подсчитано, виден ли источник, где он находится и какой высоты блок с цитатой: у первого способа она такая же, как у цитаты без источника.
Тег cite и q: название источника в короткой цитате
Короткую цитату внутри предложения записывают тегом q: кавычки браузер добавляет сам, вручную их дописывать не нужно. Название источника отмечают рядом, вне q, а адрес источника можно записать атрибутом cite у q: он, как и у blockquote, читателю не виден.
<p>В статье <cite>Простая вёрстка</cite> сказано: <q cite="https://example.com/a">лишний div - лишний шум</q>.</p>Название можно записать и после цитаты, порядок не важен: главное, чтобы cite находился рядом с q, а не внутри него. Как браузер выбирает вид кавычек и почему они иногда выглядят не так, как ожидалось, разобрано в уроке Строчная цитата: q и cite.
Курсив в теге cite: как убрать и почему он не переворачивается
По умолчанию браузер выводит cite курсивом. Курсив не переворачивается: если название находится внутри курсивного текста (в em, i или в курсивной цитате), оно выглядит так же, как всё вокруг, и выделения нет. В печати в таком случае название набирают прямым шрифтом, а браузер сам этого не делает.
Курсив убирают правилом font-style: normal. Тогда название теряет выделение, и его можно обвести кавычками из CSS: они рисуются через ::before и ::after, не входят в текст страницы и не копируются.
cite {
font-style: normal;
}
cite::before { content: "\00ab"; }
cite::after { content: "\00bb"; }В заголовке cite остаётся жирным и такого же размера, как сам заголовок, а в ссылке сохраняет цвет ссылки.
Пример: как выглядит cite в разных стилях
Кнопки задают вид абзаца и стиль тега cite. Ниже кадр сам определяет, какой шрифт получил тег, отличается ли название от текста вокруг и что попадёт в буфер при копировании абзаца: кавычки из CSS туда не попадают.
Тег cite или i: какой выбрать для названия произведения
В старой вёрстке названия книг и фильмов отмечали тегом i, потому что нужен был курсив. Сейчас у каждого тега свой смысл: cite говорит «это название произведения», а i - «текст другим голосом»: термин, иностранное слово, мысль автора.
| Что отметить | Какой тег | Пример |
|---|---|---|
| Название книги, фильма, песни, игры | cite | <cite>Тетрис</cite> |
| Иностранное слово в русском тексте | i с атрибутом lang | <i lang="en">underline</i> |
| Слово, на которое падает акцент по смыслу | em | <em>вы</em> звонили? |
| Слово, которое нужно только оформить | span с классом | <span class="brand">Фирма</span> |
Все эти теги по умолчанию выводят курсив, поэтому ошибку в выборе тега глазами не найти: она видна только в разметке. Правило для i на cite не действует, у каждого тега свой стиль. Подробнее о выборе: тег i и тег em.
Тег cite и ссылка на источник
Ссылку на источник записывают тегом a, а название отмечают в cite. Такая ссылка кликабельна и видна читателю, в отличие от атрибута cite у blockquote. В проверке ссылка внутри cite сохранила цвет ссылки и курсив.
<p>Подробнее в статье <cite><a href="https://example.com/vyorstka">Простая вёрстка</a></cite>.</p>Порядок вложенности может быть и обратным: a снаружи, cite внутри. Оба варианта допустимы, различий по смыслу нет: выберите один и держитесь его на всём сайте.
Частые ошибки с тегом cite
Почти все ошибки с этим тегом сводятся к трём: в него записывают не то (цитату, имя, адрес), путают его с атрибутом cite и рассчитывают, что курсив отличит название сам.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Весь текст цитаты записан в cite: <cite>лишний div - лишний шум</cite> | Тег отмечает название произведения, а не цитату: текст стал курсивным, но смысл записан неверно | Цитата в q или blockquote, а название источника рядом в cite |
Имя автора в cite: <cite>Михаил Булгаков</cite> | По W3C HTML 5.2 (2017) так можно, но в действующем стандарте WHATWG имена людей в cite запрещены | Имя записать обычным текстом, а в cite оставить только название |
Адрес сайта в cite: <cite>https://example.com</cite> | Адрес не название, и ссылкой такая запись не становится | Сделать ссылку: <cite><a href="...">Название</a></cite> |
Кавычки внутри тега: <cite>«Тетрис»</cite> | Кавычки не входят в название, а оказались внутри тега | Кавычки снаружи: «<cite>Тетрис</cite>» |
Название источника записано внутри blockquote | Источник смешался с чужим текстом, а стандарт требует держать его вне blockquote | figure с figcaption, а cite - внутри figcaption |
От атрибута cite у blockquote ждут, что он покажет источник | Атрибут читателю не виден, высота блока не меняется | Название записать видимым текстом рядом с цитатой |
cite ради курсива: название фирмы или просто любое слово | Тег обещает «это название произведения», а там просто оформление | span с классом и font-style или em и i по смыслу |
| Курсив убрали, а других отличий не добавили | Название ничем не выделено, и читатель не отличит его от текста | Кавычки снаружи тега или ::before и ::after |
