El Atributo CITE

Se utiliza para referenciar la fuente de una cita, una modificación en un texto o una obra creativa.

El atributo cite en HTML se utiliza para referenciar la fuente de una cita, una modificación en un texto o una obra creativa. Este atributo es semántico, lo que significa que ayuda a navegadores, motores de búsqueda y tecnologías de asistencia (como lectores de pantalla) a entender el contexto del contenido referenciado. A continuación, te explicamos cómo usarlo correctamente.

¿Qué es el atributo `cite`?

Propósito:
Proporcionar una URL o referencia que indique la fuente original de:
- Una cita (en elementos <blockquote> o <q>).
- Una modificación en el texto (en elementos <ins> o <del>).
No es visible:
El atributo cite no muestra ningún enlace o texto automáticamente; solo agrega metadata semántica.
Compatibilidad:
Funciona en todos los navegadores modernos, pero requiere código adicional para mostrar la fuente al usuario.

Sintaxis básica

En citas (`<blockquote>` o `<q>`)

<blockquote cite="https://ejemplo.com/fuente">
  "El conocimiento es poder."
</blockquote>

<!-- Cita en línea -->
<q cite="https://ejemplo.com/fuente">Saber es crecer</q>

En modificaciones de texto (`<ins>` o `<del>`)

<p>
  El evento será el <del cite="https://ejemplo.com/cambio-fecha">15</del>
  <ins cite="https://ejemplo.com/cambio-fecha">20</ins> de marzo.
</p>

Casos de uso prácticos

Citar un libro o artículo

<blockquote cite="https://es.wikipedia.org/wiki/Don_Quijote_de_la_Mancha">
  <p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme...</p>
</blockquote>

Mostrar una cita corta con fuente

<p>
  Como dijo <q cite="https://ejemplo.com/filosofo">La vida es una aventura</q>, 
  debemos vivirla plenamente.
</p>

Documentar cambios en un texto

<p>
  Precio original: <del cite="https://ejemplo.com/descuento">$100</del>  
  Nuevo precio: <ins cite="https://ejemplo.com/descuento">$80</ins>.
</p>

Cómo mostrar la fuente al usuario

Dado que cite no es visible, puedes agregar un enlace manualmente o usar JavaScript/CSS para mostrar la URL:

Ejemplo con HTML y CSS:

<blockquote cite="https://ejemplo.com/fuente">
  <p>"La creatividad es contagiosa."</p>
  <footer>
    Fuente: <a href="https://ejemplo.com/fuente">Albert Einstein</a>
  </footer>
</blockquote>

Ejemplo con JavaScript:

<blockquote cite="https://ejemplo.com/fuente" id="cita1">
  <p>"La simplicidad es la máxima sofisticación."</p>
</blockquote>

<script>
  const cita = document.getElementById("cita1");
  const fuente = document.createElement("a");
  fuente.href = cita.getAttribute("cite");
  fuente.textContent = "Ver fuente";
  cita.appendChild(fuente);
</script>

Mejores prácticas

Usa URLs absolutas:
Asegúrate de que el valor de cite sea una URL completa (ej: https://...) o una ruta relativa válida.
Combínalo con texto visible:
Agrega manualmente un enlace o referencia para que los usuarios puedan acceder a la fuente.
No lo uses para atribuciones genéricas:
El atributo cite no reemplaza a las citas académicas completas (APA, MLA, etc.), pero sí complementa su estructura.
Prioriza la accesibilidad:
Si usas cite en <ins> o <del>, explica claramente el motivo de la modificación.

Errores comunes

Usar cite en elementos no soportados:

El atributo cite solo funciona en <blockquote>, <q>, <ins> y <del>.

Incorrecto: <p cite="...">Texto</p>

Dejar la fuente oculta:

Si no añades un enlace visible, los usuarios no podrán consultar la referencia.

Enlaces rotos o irrelevantes:

Verifica que la URL en cite sea válida y esté relacionada con el contenido.

Ejemplo avanzado: Sistema de citas académicas

<article>
  <h2>Teoría de la relatividad</h2>
  <blockquote cite="https://einstein.com/relatividad">
    <p>La energía no se crea ni se destruye, se transforma.</p>
  </blockquote>
  <footer>
    Fuente: 
    <a href="https://einstein.com/relatividad">
      Albert Einstein, "Fundamentos de la física moderna"
    </a>
  </footer>
</article>

Importancia para SEO y accesibilidad

SEO:
Los motores de búsqueda utilizan cite para rastrear y validar fuentes, mejorando la credibilidad del contenido.
Accesibilidad:
Los lectores de pantalla pueden anunciar la presencia de una fuente, pero es crucial agregar un enlace visible.

Conclusión

El atributo cite es clave para:

Dar contexto semántico a citas y modificaciones de texto.
Mejorar la credibilidad del contenido al vincularlo a fuentes verificables.
Optimizar la experiencia de usuarios y motores de búsqueda.

Ejemplo final:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Uso del atributo cite</title>
</head>
<body>
  <blockquote cite="https://www.un.org/es/about-us/universal-declaration-of-human-rights">
    <p>Todos los seres humanos nacen libres e iguales en dignidad y derechos.</p>
    <footer>
      Fuente: 
      <a href="https://www.un.org/es/about-us/universal-declaration-of-human-rights">
        Declaración Universal de los Derechos Humanos
      </a>
    </footer>
  </blockquote>
</body>
</html>

¡Usa cite para construir contenido bien referenciado y profesional!

¿Qué es el atributo cite?