Что такое тег <cite> в HTML?

Тег <cite> в HTML используется для обозначения заголовков произведений, таких как книги, статьи, фильмы, музыкальные альбомы и другие работы. По семантике этот тег означает "источник цитирования" и помогает поисковым системам и программам чтения с экрана правильно интерпретировать контент.

1. Как работает <cite>?

Пример использования:

<p>Моя любимая книга — <cite>Война и мир</cite> Льва Толстого.</p>
<p>Недавно посмотрел фильм <cite>Интерстеллар</cite> – это было потрясающе!</p>

Браузеры обычно отображают <cite> в курсиве, но это можно изменить через CSS.

2. Что можно помещать в <cite>?

Тег <cite> предназначен только для названий произведений:
Можно использовать:

• Названия книг, статей, фильмов
• Названия картин, скульптур
• Музыкальные произведения
• Научные публикации
• Нельзя использовать:
• Имена авторов (для этого лучше использовать <address>)
• Цитаты из текста (лучше <blockquote> или <q>)

Пример ошибки:

<p><cite>Лев Толстой</cite> написал Войну и мир.</p> <!-- Неправильно -->

3. <cite> в сочетании с <blockquote>

Часто <cite> используется вместе с <blockquote> для указания источника цитаты:

<blockquote>
    "Будьте реалистами – требуйте невозможного!"
    <cite>Че Гевара</cite>
</blockquote>

Но по стандарту HTML5 имя автора не должно быть в <cite>. Вместо этого можно использовать атрибут cite в <blockquote>:

<blockquote cite="https://example.com/article">
    "Будьте реалистами – требуйте невозможного!"
</blockquote>

4. Стилизация <cite> через CSS

Можно изменить стандартный курсив на другой стиль:

cite {
    font-style: normal;
    color: #555;
    font-weight: bold;
}

Итог

Тег <cite> помогает сделать HTML-код более семантическим и понятным как для людей, так и для поисковых систем.