HTML тег <cite>
Тег HTML <cite> обозначает название творческого произведения: книги, фильма или песни. Узнайте о его использовании, атрибутах и примерах.
Тег <cite> размечает название творческого произведения — книги, статьи, песни, фильма, картины, скульптуры, телепрограммы, веб-сайта и т. д. Это строчный (текстовый) семантический элемент: он сообщает браузеру и вспомогательным технологиям, что заключённый в него текст является ссылкой на произведение, а не обычным текстом.
Используйте элемент <blockquote> для длинных цитат и элемент <q> для коротких строчных цитат.
Элемент <cite> и атрибут cite
Их легко перепутать, так как они имеют одинаковое название, но выполняют разные функции:
- Элемент
<cite>оборачивает название произведения как видимый текст на странице (например,<cite>The Lord of the Rings</cite>). Он виден читателям. - Атрибут
cite— это отдельная вещь: он принимает URL, указывающий на источник цитаты, и используется в элементах<blockquote>и<q>(например,<blockquote cite="https://example.com/source">). Это метаданные; большинство браузеров не отображают его.
Коротко: элемент называет произведение, атрибут ссылается на URL источника.
Нужно ли включать имя автора в <cite>?
Спецификации немного расходятся во мнениях. Более старая спецификация W3C HTML 5.2 допускает включение имени автора в цитирование. Актуальный живой стандарт WHATWG HTML гласит, что <cite> должен содержать только название произведения, но не имя автора.
На практике следуйте рекомендациям WHATWG: помещайте название внутрь <cite>, а имя автора пишите как обычный текст за его пределами.
<p><cite>Pride and Prejudice</cite> was written by Jane Austen.</p>Синтаксис
Тег <cite> используется парно. Содержимое записывается между открывающим тегом <cite> и закрывающим тегом </cite>.
Пример HTML тега <cite>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Michelangelo sculpted <cite>David</cite> between 1501 and 1504.</p>
</body>
</html>Совместное использование <cite> с цитатой
Распространённый полноценный шаблон — цитировать источник с помощью <blockquote> (используя его атрибут cite для URL источника) и называть произведение с помощью элемента <cite>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://www.gutenberg.org/ebooks/2701">
<p>Call me Ishmael.</p>
</blockquote>
<p>— from <cite>Moby-Dick</cite> by Herman Melville</p>
</body>
</html>Та же идея работает в строчном варианте с <q>:
<p>
As the narrator says in
<cite>Moby-Dick</cite>:
<q cite="https://www.gutenberg.org/ebooks/2701">Call me Ishmael.</q>
</p>Доступность
<cite> несёт семантический смысл: он идентифицирует название упоминаемого произведения, чтобы программы чтения с экрана и другие инструменты могли его распознать. Не используйте <i> или CSS-правило font-style: italic лишь для того, чтобы наклонить название — курсивное оформление носит презентационный характер, тогда как <cite> передаёт что представляет собой текст. Главное — смысл; стилевое оформление вторично и может быть свободно изменено.
Атрибуты
Элемент <cite> не имеет собственных атрибутов. Он поддерживает глобальные атрибуты и атрибуты событий.
Обратите внимание, что <cite> не поддерживает href. Чтобы связать название с его источником, оберните <cite> в элемент <a>:
<p>According to <cite><a href="https://example.com/source">The Art of Sculpting</a></cite>, Michelangelo...</p>Стилизация <cite>
По умолчанию браузеры отображают текст <cite> курсивом. Это можно изменить с помощью свойства CSS font-style:
cite {
font-style: normal;
}Связанные строчные семантические элементы
<q>— короткая строчная цитата с атрибутомciteдля URL источника.<abbr>— обозначает аббревиатуру или акроним.<dfn>— обозначает определяющее вхождение термина.