Etiqueta cite en HTML: títulos de obras y referencias
La etiqueta <cite> en HTML identifica el título de una obra, como un libro, una película o un artículo. Úsala cuando menciones una obra en un párrafo o prepares una bibliografía: permite distinguir el título del nombre de su autor y del resto de la referencia.
Ejemplo mínimo de cite
<p>Estamos leyendo <cite>Manual de HTML práctico</cite>.</p>El navegador muestra una sola frase y normalmente presenta Manual de HTML práctico en cursiva. El título es ficticio; fíjate en que el nombre del autor queda fuera de <cite>.
Si retiras <cite> y </cite>, el texto sigue apareciendo, pero deja de estar marcado como título y pierde la cursiva predeterminada. Si conservas el elemento y cambias su estilo, el significado permanece.
Qué títulos admite y dónde se escribe
No necesitas copiar palabras de una obra para usar <cite>: basta con mencionarla. Además de libros y artículos, puede identificar títulos de canciones, pinturas, videojuegos u obras de teatro. El HTML Living Standard define su significado y contexto.
Es un elemento de contenido de frase: encaja dentro de un párrafo, un elemento de lista o un pie de figura que admita ese contenido. Escribe siempre la apertura <cite> y el cierre </cite>; ninguno se puede omitir. En su interior puedes incluir el texto del título y elementos de frase, como un enlace, pero no párrafos, listas o secciones completas.
Marca únicamente el título. El autor, la editorial, el año y expresiones como «la novela» permanecen fuera. Si añades comillas alrededor de un título por una convención editorial, esas comillas también quedan fuera del elemento.
Elemento cite frente al atributo cite
Comparten nombre, pero cumplen funciones distintas:
| Forma | Qué representa | Qué ve el lector |
|---|---|---|
<cite>Título</cite> | El título de una obra. | El texto del título, normalmente en cursiva. |
cite="URL" en <q> o <blockquote> | La dirección de la fuente de una cita literal. | El atributo no añade por sí solo una referencia visible ni un enlace para pulsar. |
cite="URL" en <del> o <ins> | La dirección de un documento que explica la eliminación o inserción. | El atributo no muestra automáticamente esa explicación. |
El valor del atributo debe ser una URL válida, que puede ser relativa; no escribas en él el nombre del autor o el título como si fueran una dirección. Las reglas están en las secciones de citas breves, citas en bloque y atributos de las modificaciones.
Por tanto, <cite> y el atributo de <blockquote cite="URL"> no son lo mismo. Pueden aparecer en un mismo documento: uno marca un título visible y el otro registra una dirección. Para ofrecer acceso a la fuente, escribe también un enlace con <a href="URL">.
Bibliografía con títulos, autores y un enlace
Esta página reúne dos obras reales y mantiene sus autores fuera de <cite>. El enlace de la primera entrada lleva a su ficha bibliográfica en la Biblioteca Virtual Miguel de Cervantes.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lecturas del club</title>
</head>
<body>
<h1>Lecturas del club</h1>
<ul>
<li>
<cite><a href="https://www.cervantesvirtual.com/obra/don-quijote-de-la-mancha/">Don Quijote de la Mancha</a></cite>,
de Miguel de Cervantes.
</li>
<li>
<cite>La vida es sueño</cite>, de Pedro Calderón de la Barca.
</li>
</ul>
</body>
</html>Para probarlo, guarda el código completo en un archivo UTF-8 llamado bibliografia.html y ábrelo en tu navegador. Verás un encabezado y dos entradas con los títulos normalmente en cursiva; los nombres de los autores quedan en texto normal. Pulsa Tab para enfocar el enlace y Enter para abrirlo. La página local no necesita CSS, JavaScript ni servidor; visitar la ficha externa requiere conexión.
La referencia identifica las obras sin reproducir fragmentos: una bibliografía no es una cita literal. Puedes comprobar títulos y autores en las fichas de Don Quijote de la Mancha y La vida es sueño.
En la primera entrada, <cite> aporta el significado y <a> aporta la navegación. También es válido envolver el título como <a href="URL"><cite>Título</cite></a>. Si quitas el enlace, conservas la referencia pero ya no puedes abrirla; si quitas <cite> y conservas <a>, el enlace sigue funcionando, aunque pierde el marcado de título. Consulta la guía de la etiqueta a para ampliar el uso de enlaces.
Atributos, presentación y accesibilidad
<cite> no tiene atributos específicos vigentes. Admite los atributos globales de HTML: class para seleccionar el elemento con CSS, id para identificarlo de forma única y lang para indicar el idioma del título cuando difiere del texto que lo rodea.
href pertenece al enlace <a>, no a <cite>. Si prefieres mostrar los títulos sin cursiva, aplica cite { font-style: normal; } en tu hoja CSS. El título seguirá marcado como tal.
Mantén el título, el autor y la relación entre ambos escritos en el texto. No dependas de la cursiva para distinguirlos ni supongas que todos los lectores de pantalla anunciarán «título de obra». <cite> no tiene un rol ARIA implícito equivalente, según ARIA in HTML. En un título enlazado, usa palabras que identifiquen la obra y conserva un foco visible para quien navega con teclado.
Errores frecuentes y dudas
¿Puedo poner el nombre del autor en cite? No cuando solo es el nombre de una persona. En la bibliografía, <cite>Miguel de Cervantes</cite> sería incorrecto: deja el autor fuera y marca el título. Si necesitas estilizar el nombre, puedes agruparlo con <span> y una clase.
¿Sirve cite para cualquier texto en cursiva? Elígelo por tratarse de un título. Para cambiar únicamente la apariencia de otro texto, usa CSS; no conviertas una palabra cualquiera en una referencia a una obra.
¿Cómo marco una cita literal? Usa <q> para una cita breve dentro de una frase o <blockquote> para un fragmento en bloque. <cite> puede identificar el título de la fuente en la atribución, pero no envuelve las palabras citadas. Tampoco incluye automáticamente al autor, una nota bibliográfica o un enlace.
Compatibilidad y fuentes
<cite> está ampliamente disponible en los navegadores actuales. La referencia de MDN recoge su compatibilidad y la cursiva habitual; los estilos del sitio pueden modificar esa apariencia. Los dos ejemplos funcionan sin JavaScript.
Las fuentes se consultaron el 3 de octubre de 2026. Para elegir el elemento y comprobar sus restricciones, toma como referencia el estándar; para verificar la presentación y el soporte en navegadores, consulta MDN.