De acuerdo con las especificaciones HTML, existen tres elementos creados para etiquetar semánticamente las citas, y cuyos nombres son blockquote, q y cite. Aunque los tres fueron pensados para etiquetar citas, deben ser empleados en diferentes contextos. Entonces ¿cuándo usar cada cuál? HTML Dog proporciona una agradable y compacta panorámica sobre estos elementos, que Smashing Magazine publicó recientemente y que reproducimos aquí:
La etiqueta blockquote se reserva para una cita larga. El contenido de un elemento blockquote aparece separado en párrafo aparte y normalmente suele incluir otros elementos como títulos, listas, párrafos o divs. Este elemento puede incluso tener un atributo llamado cite en el que se especifica la localización del texto del que proviene la cita. Un ejemplo:
<blockquote cite=”http://www.htmldog.com/reference/htmltags/blockquote/”> <p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s.</p> <p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p> </blockquote>
La etiqueta q es para una cita corta. El contenido de este elemento es una cita de tipo contextual, es decir, que está metida dentro de un párrafo. Los navegadores modernos saben cómo interpretar q, de forma que puedas estilar las citas mediante CSS. Un ejemplo:
<p>Bob said <q>sexy pyjamas</q> but Chris said <q>a
kimono</q></p>
Aunque la etiqueta q apenas se utiliza, tiene algunas propiedades útiles. Por ejemplo, puedes especificar el aspecto de las comillas que hay en su interior mediante CSS. Esto es bastante razonable, puesto que las comillas para una misma cita varían de un idioma a otro. Por ejemplo, las siguientes:
Q {}
Q { quotes: '»' '«' }
Q { quotes: '„' '“' }`
Los navegadores modernos soportan esta forma de estilar. Por supuesto, Internet Explorer (incluso en su versión número 8) no lo contempla, aunque reconoce la etiqueta_ q _bastante bien. En particular, pueden aparecer problemas en la codificación de las comillas, por lo que es más recomendable proporcionar valores numéricos.
De acuerdo a los estándares, puedes llegar, incluso, a definir las comillas que quieres que se muestren dependiendo del idioma del navegador que utilice cada usuario. Este es el aspecto que tiene un ejemplo del W3C:
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '2039' '203A' }`
De todos modos, de cara a los usuarios de navegadores no visuales, en el XHTML puede dejarse un mensaje, invisible a la vista con CSS, que diga algo como "comienzo de la cita" antes de la misma, y otro que diga "fin de la cita" después. También puedes incluir un enlace similar al típico "skip navigation"
Por último, la etiqueta cite define una cita contextual procedente de otra fuente. Por ejemplo:
<p>And <cite>Bob</cite> said <q>No, I think it’s
a banana</q>.</p>
Resumiendo, para las citas largas emplea la etiqueta blockquote, para las cortas, la etiqueta q y para referencias de otras fuentes, lo más correcto es emplear cite. En la práctica, normalmente sólo se usan blockquote y q.
Anotación relacionada |La web sintáctica