Etiqueta HTML <cite>
La etiqueta HTML <cite> marca el título de una obra creativa, como un libro, película o canción. Aprende su uso, atributos y ejemplos.
La etiqueta <cite> marca el título de una obra creativa — un libro, artículo, canción, película, pintura, escultura, programa de televisión, sitio web, etc. Es un elemento semántico en línea (a nivel de texto): le indica al navegador y a las tecnologías de asistencia que el texto incluido es una obra referenciada, no texto ordinario.
Usa el elemento <blockquote> para citas largas y el elemento <q> para citas cortas en línea.
El elemento <cite> frente al atributo cite
Estos dos son fáciles de confundir porque comparten el mismo nombre, pero realizan funciones diferentes:
- El elemento
<cite>envuelve el título de una obra como texto en la página (por ejemplo,<cite>The Lord of the Rings</cite>). Es visible para los lectores. - El atributo
citees algo distinto — recibe una URL que apunta a la fuente de una cita, y se usa en los elementos<blockquote>y<q>(por ejemplo,<blockquote cite="https://example.com/source">). Es metadato; la mayoría de los navegadores no lo muestran.
En resumen: el elemento nombra la obra, el atributo enlaza a la URL de la fuente.
¿Debe <cite> incluir el nombre del autor?
Las especificaciones difieren ligeramente. La antigua especificación W3C HTML 5.2 permite que una cita incluya el nombre del autor. El actual Estándar HTML de referencia de WHATWG indica que <cite> debe contener solo el título de la obra, no el nombre del autor.
En la práctica, sigue la orientación de WHATWG: coloca el título dentro de <cite> y escribe el nombre del autor como texto sin formato fuera de él.
<p><cite>Pride and Prejudice</cite> was written by Jane Austen.</p>Sintaxis
La etiqueta <cite> viene en pares. El contenido se escribe entre las etiquetas de apertura <cite> y cierre </cite>.
Ejemplo de la etiqueta 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>Combinar <cite> con una cita
Un patrón completo y habitual consiste en citar una fuente con <blockquote> (usando su atributo cite para la URL de la fuente) y nombrar la obra con el elemento <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>La misma idea funciona en línea con <q>:
<p>
As the narrator says in
<cite>Moby-Dick</cite>:
<q cite="https://www.gutenberg.org/ebooks/2701">Call me Ishmael.</q>
</p>Accesibilidad
<cite> tiene significado semántico: identifica el título de una obra referenciada para que los lectores de pantalla y otras herramientas puedan reconocerlo. No recurras a <i> o a una regla CSS font-style: italic solo para inclinar un título — el aspecto en cursiva es presentacional, mientras que <cite> transmite qué es el texto. El significado es lo importante; el estilo es secundario y puede cambiarse libremente.
Atributos
El elemento <cite> no tiene atributos específicos del elemento. Admite los Atributos Globales y los Atributos de Evento.
Ten en cuenta que <cite> no admite href. Para enlazar un título a su fuente, envuelve <cite> dentro de un elemento <a>:
<p>According to <cite><a href="https://example.com/source">The Art of Sculpting</a></cite>, Michelangelo...</p>Aplicar estilos a <cite>
De forma predeterminada, los navegadores renderizan el texto <cite> en cursiva. Puedes cambiar esto con la propiedad CSS font-style:
cite {
font-style: normal;
}Elementos semánticos en línea relacionados
<q>— una cita corta en línea, con un atributocitepara la URL de la fuente.<abbr>— marca una abreviatura o acrónimo.<dfn>— marca la instancia definitoria de un término.