HTML Quote: Cómo citar en HTML

Las citas en HTML se utilizan para integrar fra­g­me­n­tos de texto citados de otras fuentes en una página web. De­pe­n­die­n­do del tipo de cita, se pueden utilizar las etiquetas <blockquote>, <q> o <cite>. El uso de citas en HTML ofrece varias ventajas: una mejor es­tru­c­tu­ra del texto, la op­ti­mi­za­ción para los motores de búsqueda y una mejor co­mu­ni­ca­ción de los co­n­te­ni­dos.

¿Qué son las citas en HTML?

Las citas en HTML, también conocidas por su nombre en inglés HTML Quote, son etiquetas es­pe­cia­les que se utilizan para marcar y mostrar citas en do­cu­me­n­tos HTML. Las dos etiquetas HTML más im­po­r­ta­n­tes para citar en HTML son <blockquote> y <q>. La etiqueta <cite> o el atributo cite también pueden usarse para las citas, es­pe­cia­l­me­n­te para indicar las fuentes. Las citas en HTML, junto con las listas en HTML y las tablas en HTML, son una gran he­rra­mie­n­ta 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 atra­c­ti­vos vi­sua­l­me­n­te, sino que también mejora la es­tru­c­tu­ra semántica del documento. Gracias a las etiquetas, los motores de búsqueda y otras te­c­no­lo­gías web co­m­pre­n­den y procesan mejor el si­g­ni­fi­ca­do de las citas, lo que se traduce en una mejor vi­si­bi­li­dad y una mayor ac­ce­si­bi­li­dad de los co­n­te­ni­dos.

¿Qué tipos de citas HTML hay?

La forma de integrar una cita en tus do­cu­me­n­tos HTML dependerá de la etiqueta que elijas. A co­n­ti­nua­ción, te ex­pli­ca­mos 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 in­te­rru­m­pi­do y el contenido que se cita, ya sea directa o in­di­re­c­ta­me­n­te, queda destacado vi­sua­l­me­n­te para los lectores. Además, al utilizar las etiquetas <q> se añaden au­to­má­ti­ca­me­n­te las comillas al principio y al final de cada fragmento citado, por lo que no es necesario in­se­r­tar­las ma­nua­l­me­n­te. Las etiquetas <q> suelen usarse para citar fra­g­me­n­tos de texto cortos o diálogos directos, donde no es necesario in­te­rru­m­pir 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 vi­sua­l­me­n­te uti­li­za­n­do un párrafo sangrado o un borde delgado. Para destacar un fragmento como un párrafo in­di­vi­dual, aislado del resto del texto, se utiliza la etiqueta <blockquote>. Si es­tru­c­tu­ras tu texto de esta manera, evitarás grandes bloques de texto monótonos, re­sa­l­ta­rás el contenido im­po­r­ta­n­te y re­s­pa­l­da­rás las afi­r­ma­cio­nes re­le­va­n­tes con citas directas. Además, estarás op­ti­mi­za­n­do la es­tru­c­tu­ra del texto para los motores de búsqueda con diversos elementos de diseño. Ge­ne­ra­l­me­n­te, los elementos en bloque suelen usarse para citas más largas, aunque también pueden uti­li­zar­se para destacar vi­sua­l­me­n­te frases im­po­r­ta­n­tes o enlaces.

La función principal de la etiqueta <blockquote> es indicar a los na­ve­ga­do­res que marquen vi­sua­l­me­n­te los elementos de texto de­s­ta­ca­dos. 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 uti­li­za­n­do atributos HTML o in­s­tru­c­cio­nes 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 (re­fe­re­n­cia de la fuente)

Cuando incluyes citas en tu texto, no solo es im­po­r­ta­n­te marcarlas como tales, sino también, siempre y cuando sea posible, indicar la fuente. De esta manera, te aseguras de que los lectores co­m­pre­n­dan de dónde proviene cada cita. Además de tratarse de una buena práctica, refuerza tu cre­di­bi­li­dad y tra­n­s­pa­re­n­cia. Para indicar la fuente de una cita, puedes utilizar el atributo cite o el elemento <cite>, con cua­l­quie­ra de las dos etiquetas que hemos visto hasta ahora: <q> y <blockquote>.

Atributo HTML cite

El atributo cite se utiliza para indicar las fuentes es­pe­cí­fi­cas de una cita como re­fe­re­n­cia. Suele emplearse pri­n­ci­pa­l­me­n­te en citas en bloque y, ge­ne­ra­l­me­n­te, no es visible en el navegador, pero es de gran utilidad para otras te­c­no­lo­gí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 re­fe­re­n­cias sean claras y fáciles de ide­n­ti­fi­car y cítalas de forma correcta para aumentar la tra­n­s­pa­re­n­cia y co­m­pre­n­sió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 apa­re­ce­ría así:

“La cita me­n­cio­na­da proviene de (re­fe­re­n­cia de la fuente)“.