HTML Quote: Cómo citar en HTML

Las citas en HTML se utilizan para integrar fragmentos de texto citados de otras fuentes en una página web. Dependiendo del tipo de cita, se pueden utilizar las etiquetas <blockquote>, <q> o <cite>. El uso de citas en HTML ofrece varias ventajas: una mejor estructura del texto, la optimización para los motores de búsqueda y una mejor comunicación de los contenidos.

¿Qué son las citas en HTML?

Las citas en HTML, también conocidas por su nombre en inglés HTML Quote, son etiquetas especiales que se utilizan para marcar y mostrar citas en documentos HTML. Las dos etiquetas HTML más importantes para citar en HTML son <blockquote> y <q>. La etiqueta <cite> o el atributo cite también pueden usarse para las citas, especialmente para indicar las fuentes. Las citas en HTML, junto con las listas en HTML y las tablas en HTML, son una gran herramienta para evitar grandes bloques de texto y conseguir un contenido más fluido y dinámico.

El uso correcto de las etiquetas no solo hace que tus textos sean más atractivos visualmente, sino que también mejora la estructura semántica del documento. Gracias a las etiquetas, los motores de búsqueda y otras tecnologías web comprenden y procesan mejor el significado de las citas, lo que se traduce en una mejor visibilidad y una mayor accesibilidad de los contenidos.

¿Qué tipos de citas HTML hay?

La forma de integrar una cita en tus documentos HTML dependerá de la etiqueta que elijas. A continuación, te explicamos las tres variantes posibles con ejemplos para cada caso.

Etiqueta <q> (cita en línea)

La etiqueta <q> te permite integrar citas en el texto continuo en HTML y marcarlas con comillas. De esta manera, el texto no se ve interrumpido y el contenido que se cita, ya sea directa o indirectamente, queda destacado visualmente para los lectores. Además, al utilizar las etiquetas <q> se añaden automáticamente las comillas al principio y al final de cada fragmento citado, por lo que no es necesario insertarlas manualmente. Las etiquetas <q> suelen usarse para citar fragmentos de texto cortos o diálogos directos, donde no es necesario interrumpir el flujo del texto.

En el siguiente ejemplo puedes ver la sintaxis de esta etiqueta:

<p>Aquí está el texto continuo. <q>Aquí hay una cita</q></p>

Etiqueta <blockquote> (cita en bloque)

Las citas en bloque son citas que se resaltan visualmente utilizando un párrafo sangrado o un borde delgado. Para destacar un fragmento como un párrafo individual, aislado del resto del texto, se utiliza la etiqueta <blockquote>. Si estructuras tu texto de esta manera, evitarás grandes bloques de texto monótonos, resaltarás el contenido importante y respaldarás las afirmaciones relevantes con citas directas. Además, estarás optimizando la estructura del texto para los motores de búsqueda con diversos elementos de diseño. Generalmente, los elementos en bloque suelen usarse para citas más largas, aunque también pueden utilizarse para destacar visualmente frases importantes o enlaces.

La función principal de la etiqueta <blockquote> es indicar a los navegadores que marquen visualmente los elementos de texto destacados. La forma en la que se formatea la cita en bloque puede variar según el navegador, pero si deseas definir el estilo de la cita en bloque, puedes hacerlo utilizando atributos HTML o instrucciones CSS como padding para el espacio interno del texto, border para el grosor y color del borde o address para el color de la fuente.

La sintaxis sería la siguiente:

<p>A continuación, la cita correspondiente:</p>
<blockquote>
"Esta es la cita".
</blockquote>

<cite> o cite (referencia de la fuente)

Cuando incluyes citas en tu texto, no solo es importante marcarlas como tales, sino también, siempre y cuando sea posible, indicar la fuente. De esta manera, te aseguras de que los lectores comprendan de dónde proviene cada cita. Además de tratarse de una buena práctica, refuerza tu credibilidad y transparencia. Para indicar la fuente de una cita, puedes utilizar el atributo cite o el elemento <cite>, con cualquiera de las dos etiquetas que hemos visto hasta ahora: <q> y <blockquote>.

Atributo HTML cite

El atributo cite se utiliza para indicar las fuentes específicas de una cita como referencia. Suele emplearse principalmente en citas en bloque y, generalmente, no es visible en el navegador, pero es de gran utilidad para otras tecnologías, como los lectores de pantalla o los bots de SEO.

Sintaxis:

<p>A continuación, la cita correspondiente:</p>
<blockquote cite="https://ejemplo.com/fuente">
"Esta es la cita".
</blockquote>

En el texto, la fuente podría aparecer de la siguiente manera:

“Esta es la cita”. – Fuente: https://ejemplo.com/fuente

El elemento HTML <cite>

El elemento HTML <cite> se utiliza para resaltar el título de una obra citada en un texto, por ejemplo, en letra cursiva. Asegúrate de que tus referencias sean claras y fáciles de identificar y cítalas de forma correcta para aumentar la transparencia y comprensión de tu página web, lo que además le dará una imagen más seria y fiable.

La sintaxis sería la siguiente:

<p>La cita mencionada proviene de <cite>referencia de la fuente</cite></p>

En el texto, la cita aparecería así:

“La cita mencionada proviene de (referencia de la fuente)“.