HTML: Citaciones

HTML ofrece elementos para definir citaciones de texto, es decir, porciones de texto que provienen de otra fuente. El elemento más conocido es <blockquote>, aunque existen muchos más. Por ejemplo, se puede definir una abreviatura con su descripción, una fuente de referencia o una información de contacto.

Lista de elementos para citaciones descritos en este artículo:

Elemento Descripción
<blockquote> Define una citación en un elemento de bloque
<q> Define una citación en un elemento de línea
<address> Define información de contacto
<cite> Define una referencia o fuente
<abbr> Define una abreviación o acrónimo
<dfn> Marca el término que se va a definir

Citación en bloque: elemento <blockquote>

Para definir una citación se utiliza el elemento <blockquote>, con el que se creará un nuevo elemento de bloque, creando una nueva línea. Todo texto que esté entre las etiquetas <blockquote> (de apertura) y </blockquote> (de cierre) aparecerá como texto citado. Este elemento puede contener más elementos en bloque.

Ejemplo de código HTML de texto de citación en bloque:

<blockquote>Texto citado en bloque.</blockquote>

El resultado será el siguiente:

Texto citado en bloque.

Este elemento tiene un atributo específico llamado cite que se utiliza para proporcionar un enlace al documento o fuente original del que se ha extraído el texto citado. Se usa con el formato habitual de los atributos: cite="".

Citación en línea: elemento <q>

Si lo que nos interesa es definir una citación en línea usaremos el elemento <q>, que a diferencia del anterior nos servirá para definir una citación de texto en la misma línea. Por tanto, todo texto que esté entre las etiquetas <q> (de apertura) y </q> (de cierre) aparecerá como citado en la misma línea, sin saltos de línea.

Ejemplo de código HTML de texto de citación en línea:

<p>Párrafo con texto <q>citado</q>.</p>

El resultado será el siguiente:

Párrafo con texto citado.

En nuestro caso, el texto citado en línea aparece entre comillas angulares (« y »), también llamadas latinas o españolas. Algunos medios de comunicación utilizan las comillas inglesas ( y ) y las comillas simples ( y ).

Al igual que ocurre con el elemento anterior, <q> también tiene el atributo específico cite para indicar con un enlace el documento o la fuente de referencia de al que obtuvimos el texto citado. Su uso no está demasiado popularizado, ya que lo habitual es indicar un listado de referencias bibliográficas al final de los artículos o de forma más directa con un enlace HTML justo al lado de la citación.

Información de contacto: elemento <address>

Se puede definir información de contacto con el elemento <address>, muy útil para exponer la información de contacto del propietario o autor de un artículo. La información de contacto puede ser una dirección de correo electrónico, una dirección física, una URL, un teléfono o un ID de una red social. Todo texto entre las etiquetas <address> (de apertura) y </address> (de cierre) aparecerá como información de contacto, normalmente en cursiva.

Ejemplo de código HTML con información de contacto:

<address>
Contacta con el autor en: <a href="/contacto/">Contacto</a>.<br>
Nuestro Twitter es el siguiente: @recursivos_
</address>

Este es el resultado del código anterior:

Contacta con el autor en: Contacto.
Nuestro Twitter es el siguiente: @recursivos_

Fuente de referencia: elemento <cite>

Para marcar una fuente de referencia se utiliza el elemento <cite>. El problema de este elemento es que su uso es habitualmente erróneo: se usa de forma equivocada para marcar el texto citado, cuando su uso verdadero es marcar la fuente. Por tanto, todo texto que esté entre las etiquetas <cite> (de apertura) y </cite> (de cierre) se usará para indicar el autor o fuente de una citación.

Ejemplo de código HTML con una fuente de referencia marcada:

<p>
  <cite>Tim Berners-Lee</cite> dijo:
  <q>La red no debe tener dueño</q>.
</p>

El resultado del código anterior es el siguiente:

Tim Berners-Lee dijo: La red no debe tener dueño.

Tal y como se puede ver, el texto que se encuentra entre las etiquetas del elemento <cite> aparece en cursiva. En el mismo ejemplo hemos aprovechado la ocasión para añadir un elemento de cita en línea (<q>) para que se aprecie mejor la diferencia de uso entre los dos elementos.

Otro ejemplo de uso es el siguiente:

<p>Este artículo es de <cite>Recursivos.com</cite>.</p>

Dando como resultado:

Este artículo es de Recursivos.com.

Abreviación o acrónimo: elemento <abbr>

Con el elemento <abbr> se pueden definir abreviaturas o acrónimos. Este elemento ayuda a proporcionar información adicional. Con el atributo title se puede especificar la definición del acrónimo, de forma opcional, conteniendo la descripción completa. El texto que esté entre las etiquetas <abbr> (de apertura) y </abbr> (de cierre) aparecerá como una abreviatura o acrónimo.

Ejemplo de código HTML de una abreviatura:

<p>El lenguaje <abbr title="HyperText Markup Language">HTML</abbr> es muy fácil de aprender.</p>

Este es el resultado del ejemplo anterior:

El lenguaje HTML es muy fácil de aprender.

Se puede ver que el texto contenido dentro de las etiquetas del elemento <abbr> aparece subrayado con una pequeña línea punteada. Si se pone el cursor encima aparecerá la descripción del texto contenido en el atributo title.

Marca una definición: elemento <dfn>

En HTML existe la posibilidad de marcar el término que se va a definir en el mismo párrafo; esto se consigue mediante el elemento <dfn>. Se trata de un elemento de línea con dos etiquetas: <dfn> (de apertura) y </dfn> (de cierre). Por defecto, el navegador web mostrará este elemento en cursiva.

Ejemplo de código HTML con una definición:

<p>El <dfn title="HyperText Markup Language">HTML</dfn> es un lenguaje de marcas o etiquetas que se utiliza para la creación de páginas web.</p>

Este es el resultado:

El HTML es un lenguaje de marcas o etiquetas que se utiliza para la creación de páginas web.

Puede ser útil usar el atributo id en el elemento <dfn> para hacerle referencia desde un enlace ubicado en otro párrafo. De esta manera permitiríamos ir hasta la definición realizada anteriormente, sin tener que repetirla.

← Artículo anterior
HTML: Formato de texto
Artículo siguiente →
HTML: Anotaciones